Event Summary In jQuery

1. $ (document). ready ()

$ (Document). ready () is a typical method in jQuery to respond to the onload event built in JavaScript and execute the task. It has a similar effect with onload. However, there are also some differences:

• When a document is completely downloaded to the browser, the window. onload event is triggered. Use $ (document ). the event handler registered by ready () can run the code after html is downloaded and parsed as a Dom tree, but it does not mean that all associated files have been downloaded.
• A page usually has only one onload event handler, and can only store references to one function at a time. $ (document). ready () can have multiple.
• In general, $ (document). ready () is superior to the onload event handler. However, if the associated file is not loaded yet, the calling of attributes similar to the image height and width will be problematic. Therefore, you need to select an appropriate method for different purposes.
  

$ (Document). ready () has three methods:

• > $ (Document). ready (function (){

  // This is the coding...

  });

• > $ (). Ready (function (){
  // This is the coding...
  });
• > $ (Function (){
  // This is the coding...
  });

2. Event capture and event bubbling

Event capture: A policy that allows multiple elements to respond to events. In the process of event capturing, the event is first handed over to the elements at the outermost layer, and then to more specific elements.
Event bubbling: Another opposite strategy is time bubbling. when an event occurs, it is first sent to the most specific element. After this element gets a response opportunity, events will bubble up to more general elements. Event bubbling sometimes produces side effects, resulting in unexpected behavior.

3. Three methods to prevent event bubbles

• Default operation
  
  You can call the. preventDefault () method to terminate an event before starting the default operation.

• Call event. stopPropagation () to stop event Propagation
  JQuery provides a. stopPropagation () method that completely prevents event bubbles. The instance code is as follows:
  Use the stopPropagation () method to prevent event bubbles $ (Document). ready (function (){
  $ ('Switcher '). click (function (event ){
  If (this. id = 'switcher-narrow '){
  $ ('Body'). addClass ('narrow ');
  }
  Else if (this. id = 'switcher-large '){
  $ ('Body'). addClass ('large ');
  }
  $ ('Switcher. click'). romoveClass ('selected ');
  $ (This). addClass ('selected ');
  Event. stopPropagation ();
  };)
  });
  

• UseEvent. tatgetAttributeSpecify the event object

  The variable event in the event handler stores the event object. The event. tatget attribute stores the target element of an event. This attribute is specified in the dom api but is not implemented by all browsers. JQuery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements of the event first received in the DOM. Furthermore, we know that this references the DOM elements used to process events.

  Use the event. tatget attribute to specify the event object

• The code to prevent event bubbles is as follows:
  $ (Document). ready (function (){
  $ ('Switcher '). click (function (event ){
  If(event.tar get = this)
  {
  $ ('Switcher. click'). toggleClass ('hiddy ');
  }
  };)
  });
  

4. Bind common events

JQueryBind the element by using the. bind () method, and unbind the element by using the. unbind () method. In addition, the. bind () method can be bound multiple times. If it is not bound, it is safe to unbind it.

In many cases, an event only needs to be triggered once, and then it is necessary to immediately unbind it. According to the traditional practice, we may first bind the event and then unbind it after the event is executed. JQuery provides us with a short method. one to specifically solve the tedious coding in the above scenario, for example:

 

$ (Document). ready (function (){
$ ('# Swotcjer'). one ('click', toggleStyleSwitcher );
});

5. composite events

When capturing events, you often need to capture combined user operations and respond with multiple functions. These events are called composite events.

Provided by jQuery. Read ()The method is one of the most common event-compliant methods. In addition, there are two functions used for interactive processing:

• .Hover (over, out)A method that imitates a hover event (move the mouse over an object and remove it. This is a custom method that provides a "Keep in it" status for frequently used tasks.
• . Toggle (fn, fn)Switch the function to be called each time you click.