What are the jquery events?

jquery events: 1. Mouse events, including click events, mouseover events, etc.; 2. Keyboard events, including keydown pressing keys, keyup releasing keys, etc.; 3. Form events, including focus gaining focus, blur loses focus, etc.; 4. Binding events, bind binding events; 5. Composite events, including events triggered by the hover method, events triggered by the toggle() method, etc.

The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.

What are the jquery events?

jQuery events are encapsulation of JavaScript events. Commonly used events include: mouse events, keyboard events, form events, binding events, compound events, etc.

1. Mouse event

The method is as follows

click(): click event, trigger or bind a function to the click event of the 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:

The method is as follows:

keydown(): When the key is pressed, trigger or bind the function to The keydown event of the specified element

keyup(): Triggered when the key is released, or bind the function to the keyup event of the specified element

keypress(): Triggered when printable characters are generated, 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 event:

The method is as follows:

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

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

Code example:

// 查询输入框
  $("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 event:

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, it can also be a custom event

fn: Processing function used for binding

Code examples:

bind one,

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

bind multiple,

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

move Exception method:

unbind([type],[fn]) is just the opposite of binding events. If the method has no parameters, it means removing all events.

unbind If you want to remove multiple Just add a space between the two

Code example:

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

Note: When unbind() takes no parameters, it means to remove all bound events

5. Compound event

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");
           });

toggle() method

toggle() method is used for simulation Continuous mouse click event

Code example:

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

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

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

Video tutorial recommendation:jQuery video Tutorial

The above is the detailed content of What are the jquery events?. For more information, please follow other related articles on the PHP Chinese website!