Common events in jQuery

Here are some common events in jQuery

jQuery events are the encapsulation of JavaScript events. Common events such as mouse events, keyboard events, form events, binding events, composite events, etc.

1. Mouse events

Methods as below

• click(): Click event, trigger or bind function to click event of specified element
• mouseover(): Trigger or bind the function to the mouseover event of the specified element
• mouseout(): Trigger or bind the function to the mouseout event of the specified element

Code example:

 $(function () {
    
    
            $("input").click(function () {
    
    
                $("li").mouseover(function () {
    
    
                    $(this).css("background", "green");
                }).mouseout(function () {
    
    
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

2. Keyboard events:

Methods as below:

• keydown(): When the key is pressed, trigger or bind the function to the keydown event of the specified element
• keyup(): When the key is released, trigger or bind the function to the keyup event of the specified element
• keypress(): When a printable character is generated, trigger or bind the function to the keypress event of the specified element

Code example:

  $(function () {
    
    
        $("p input").keyup(function () {
    
    
            $("#events").append("keyup");
        }).keydown(function () {
    
    
            $("#events").append("keydown");
        }).keypress(function () {
    
    
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
    
    
            if (event.keyCode == "13") {
    
    
                //按enter键
                alert("确认要提交么?");
            }
        });
    });

3. Form events:

Methods as below:

• focus(): Get focus, trigger or bind the function to the focus event of the specified element
• blur(): Lose focus, trigger or bind the function to the blur event of the specified element

Code example:

1、
// 查询输入框
  $("input[name='search']").focus(function(){
    
    
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
    
    
   $(this).val("请输入要查询的问题"); 
  });
2、
 $(function () {
    
    
 //给文本框添加边框样式
     $("input").focus(function() {
    
    
          $(this).addClass("myclass");
        }).blur(function() {
    
    
          $(this).removeClass("myclass");
    });
  });

4. Binding events:

Syntax analysis:

• bind(type,[data],fn), where data is not required
• type: event type, mainly including basic events such as blur, focus, click, mouseout, etc., in addition to custom events
• fn: the processing function used to bind

Code example:

绑定一个、
$("input[name=event_1]").bind("click",function() {
    
    
 $("p").css("background-color","#F30");
});

绑定多个、
$("input[name=event_1]").bind({
    
    
mouseover: function () {
    
    
 $("ul").css("display", "none");
},
mouseout: function () {
    
    
 $("ul").css("display", "block");
}
});

Removal method:

• unbind([type],[fn]) is just the opposite of binding events. If the method has no parameters, it means to remove all events
• If you want to remove multiple unbind, just add a space between the two

Code example:

 $(function () {
    
    
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

note: When unbind() has no parameters, it means to remove all bound events

5. Compound events

One, hover() method

Syntax: hover(enter,leave);
This method is equivalent to the combination of mouseover and mouseout events

Code example:

$("li").hover(function() {
    
    
               $("li").css("background", "gray");
           }, function() {
    
    
               $("li").css("background", "green");
           });    

2. Toggle() method

The toggle() method is used to simulate the continuous mouse click event

Code example:

$("body").toggle(
function () {
    
     }, //第一次点击触发
function () {
    
     }, //第二次点击触发
function () {
    
     } //第三次点击触发
...     //...
);

At the same time, the toggle() method has another function: to switch the visible state of the element

$('input').toggle( 
  function () {
    
    
  $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  },
  function () {
    
    
   $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  }
 );