Explain the events in jquery _jquery

General Introduction

jquery adds and expands basic event-handling mechanisms that provide more elegant event-handling syntax and greatly enhance event-handling capabilities

Events in jquery

Load DOM

In jquery, the $ (document). Ready () method is used to replace the Window.onload method in JavaScript, but they also have some differences

1. Timing of implementation

For example, we have a page with a lot of pictures

$ (document). The Ready () method is executed when the DOM tree of the Web page is loaded, and the Window.onload method must be loaded and the picture is loaded before the DOM tree finishes

If using jquery we want the load () method to be executed at the end of the entire page

The following two pieces of code function the same

      JQuery
      $ (window). Load (function () {
        //code 1
      });
      JavaScript
      window.onload = function () {
        //code 2
      };

2. Multiple use

A JavaScript onload event can only hold a reference to one function at a time, and $ (document). Ready () can save multiple

      function One () {
        alert (' 1 ');
      }
      function two () {
        alert (' 2 ');
      }
      JavaScript
      window.onload = one;
      Window.onload = two;//only executes two ()
      //JQuery
      $ (document). Ready (function () {one
        ();
      });
      $ (document). Ready (function () {
        two ();
      }); /one () and two () will perform

3. Shorthand method

$ (document). Ready (function () {}), which can be abbreviated to $ (function () {});

Event Bindings

Syntax for the bind () function: Bind (TYPE,[.DATA],FN)

The first parameter is the event type

The second parameter is an optional parameter that is passed as an additional data object to the event object as the Event.data property value

The third parameter is the handler function to bind to

For example, there are two Div, the second div is hidden, when we click the first Div, the second Div shows

  <div id= "Div1" ></div>
  <div id= "Div2" ></div>
  <script type= "Text/javascript" >
  $ (function () {
    $ (' #div1 '). Bind (' click ', Function () {
      $ (this). Next (). Show ();
    })
    
  ;

Add function, when clicked Div1 if Div2 is displayed, hide it, otherwise show it

  $ (function () {
    $ (' #div1 '). Bind (' click ', Function () {
      if ($). Next (). Is (': visible ')] {
        $ (this). Next (). Hide ();
      } else{
        $ (this). Next (). Show ();}});
  

Shorthand:

    $ (' #div1 '). Click (function () {
      if ($ (). Next (). Is (': Visible ')) {
         $ (this). Next (). Hide ();
       else{
         $ (this). Next (). Show ();
       }
    )

Synthetic events

1, hover () method

Used to simulate a cursor hover event. The first function is triggered when the cursor is moved over the element, and the second function is triggered when the cursor moves out of the element

    $ (' #div1 '). Hover (function () {
      $ (this). Next (). Show ();
    },function () {
      $ (this). Next (). Hide ();
    });

2, Toggle () method

Used to simulate mouse continuous click events, when the mouse first clicks on the element, triggering the first function, when the mouse clicks the same function when the second function is triggered

$ (' #div1 '). Toggle (function () {
  $ (this). Next (). Show ();
},function () {
  $ (this). Next (). Hide ();

Block event bubbling and blocking default behavior

1. Prevent event bubbling

Stoppropagation () method

2. Block default behavior

Preventdefault () method

Note:1, return False in jquery is to prevent event bubbling and prevent default behavior

2. jquery does not support event capture

Properties of the Event object

1, Event.type

The purpose of the modified method is to obtain the type of the event

   $ (' #div1 '). Click (function (EV) {
      alert (ev.type);//click
    })

2, Event.target

Gets the element that triggers the event

 $ (' #div1 '). Click (function (EV) {
   alert (ev.target.id);//div1
  })

3, Event.relatedtarget

Get related elements

4, Event.pagex and Event.pagey

Gets the coordinates of x to the cursor relative to the page and the coordinates of Y

  $ (' #div1 '). Click (function (EV) {
   alert (Ev.pagex + ', ' + ev.pagey);//275,181
   })

5, Event.which

The purpose of this method is to get the left, middle, and right mouse buttons in the mouse click event, and to get the keyboard keys in the keyboard event

$ (' #div1 '). Click (function (EV) {
 alert (Ev.which);//1 is the left mouse button, 2 is the mouse, 3 is the right mouse button
})

removing events

Unbind () method syntax: Unbind ([Type],[data]);

The 1th parameter is the event type, and the 2nd argument is the function to be removed

To see an example, bind the following event for Div1

    $ (' #div1 '). Bind (' click ', Function () {
      alert (' 1 ');
    }). Bind (' click ', Function () {
      alert (' 2 ');
    }). Bind (' MouseOver ', function () {
      alert (' 3 ');
    })

1, if there are no parameters, then delete all bound events

$('#div1').unbind();//删除所有事件

2, if the event type is provided as a parameter, only the binding event of that type is deleted

$('#div1').unbind('mouseover');//删除mouseover事件

3, if the binding is passed the processing function as the 2nd parameter, then only this particular time processing function will be deleted

Impersonation operation

1, commonly used simulation

In jquery, you can use the trigger () method to complete the impersonation operation, for example, you can use the following code to trigger the Click event of a button with ID btn

$('#btn').trigger('click');

2. Trigger Custom Events

The trigger () method can not only trigger events with the same name as supported by the browser, but also events that trigger custom names.

$ (' #btn '). Bind (' Myclick ', function () {
  alert (' 1 ');
});
$ (' #btn '). Trigger (' Myclick ');

3, the transfer of data

$ (' #btn '). Bind (' Myclick ', function (event,message1,message2) {
 alert (message1 + message2);
});
$ (' #btn '). Trigger (' Myclick ', ["1", "2"]);

4. Perform default actions

$('input').trigger('focus');

The above code triggers the focus event of the input element and also causes the <input> element itself to be focused

You can use the Triggerhandler () method if you want to trigger only specific events that are bound by the <input> element, while canceling the browser's default action for this event

Other usage

Add event namespaces for easy management

For example, you can use namespace specification for multiple event types that are bound by elements

    $ (' div '). bind (' Click.plugin ', function () {
      alert (' 1 ');
    });
    $ (' div '). bind (' Mouseover.plugin ', function () {
      alert (' 2 ');
    });
    $ (' div '). bind (' Dbclick.plugin ', function () {
      alert (' 3 ');
    });
    $ (' button '). Click (function () {
      $ (' div '). Unbind ('. plugin ');
    })

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!