jQuery learning notes - event related

The development of jQuery events

Simple event binding > > bind event binding > > delegate event binding > > on event binding

Simple event binding

Simple event registration
Click (handler): click the event;
mouseenter (handler): mouse in event;
mouseleave (handler): mouse away event;
Disadvantages:
Cannot register multiple events at the same time

bind mode registration event

bind() has two parameters:
① The first parameter: event type;
② Second parameter: event handler
Disadvantages:
Dynamic event binding is not supported, that is, when a new element is created, there will be no event binding
jQuery 3.x has been removed, instead of using the on() method

<body>
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
    // bind registration event
    $('p').bind("click mouseenter",function(){
      $(this).css('background-color', 'skyblue');
    })
    $('<p>90</p>').appendTo($('#pnum'));  // The newly added element p has no registered event
  </script>
  
</body>

delegate mode registration event

Parameters:
① First parameter: selector, who will execute the event finally;
② Second parameter: type of event
③ Third parameter: what to do
Characteristic:
① Dynamically created elements also have registration events
② Just create an event and assign it
Substance:
Watch by bubbling, register events
Disadvantages:
Only delegate events can be registered

<body>
  
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
    // delegate registration event
    // Delegate event. The final execution is not div, but p
    $('div').delegate("p", 'mouseenter', function(){
      // alert('hhhhh');
      $(this).css('background-color', 'skyblue');
    });
    $('<p>90</p>').appendTo($('#pnum'));   // Newly added p element added registration event
  </script>
</body>

on registration events

jQuery3.x removes bind() and delegate() and uses on() instead, which unifies the handling of all events

  • on registering simple events
    Characteristic:
    Triggered by itself, dynamic binding is not supported
    Syntax:
    $(selector).on(event,handler)
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
   
    // on registration events
    // on event registration simple event
    $('p').on('mouseenter', function(){
      $(this).css('background-color', 'skyblue');
    });
    $('<p>90</p>').appendTo($('#pnum'));

  </script>
  
</body>

  • on registration delegation event
    Syntax:
    $(selector).on(event,selector,data,handler )
    Parameters:
    ① Events, the name of binding events can be multiple events separated by spaces (standard events or custom events);
    ② selector, to execute the descendant element of the event (optional). If there is no descendant element, the event will be executed by itself
    ③ Data is the data passed to the processing function. When an event is triggered, the function handler uses event.data (not commonly used). Objects like {key1:value1,key2:value2} are used
    ④ Handler, event handler

Event execution order

<body>
  
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
 
    // Execution sequence
    // When you click p in div, the display order is 1 > > 3 > > 2
    $('p').on('click',function(){
      alert('1');
    });

    $('div').on('click', function(){
      alert('2');
    })

    $('div').on('click', 'p', function(){
      alert('3');
    })

  </script>
</body>

Conclusion:
If the element has its own registration event and delegation event, execute the delegation event first, and then execute its own event

Binding event handler

ready(fn)

Specifies that the fn() function is executed when the DOM object corresponding to jQuery is loaded
Common scenarios:
Entry function:

$(document).ready(function(){ 
 //...
})

Specifies that the function specified in the ready() method is executed immediately after the page is loaded

on(events [,selector] [,data],handler(eventObj))

<body>
  
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    $('div').on('click', 'p', {reading: 'book', watching: 'movie'}, function(event){
      alert('data attribute:\n' + event.data.watching);
    })

  </script>
  
</body>

off(events [,selector] [,handler(eventobj)])

The reverse operation of the one() method, which is used to delete the bound event handler
If the selector is specified, only the event handler on the DOM element matching the selector will be deleted;
If handler is specified, only the event handler is deleted;
However, if no parameter is specified, the event handler on all DOM elements in the jQuery object is deleted;

<body>
  
  <input type="button" value="Button click" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <span>sp</span>
  </div>
  <br /> 
  <span>span</span>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    $('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, function(event){
      alert('data attribute:\n' + event.data.watching);

    })
    var foo = function(){
      $(this).css('background-color', 'skyblue');
    }
    $('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, foo)

    $('span').on('mouseenter', function(){
      $(this).css('background-color', 'pink');
      $(this).css('color', 'red');
    })

    // $('span').off('mouseenter');
    // $('div').off('mouseenter', 'p');
    $('div').off('mouseenter', 'p', foo);

    // $('div').off()

  </script>
</body>

one(type,data,fn)

This event handler will only execute once, that is, after the event handler bound with one() is fired once, jQuery will unbind the event handler bound with one() method

trigger(type [,data])

Programmatically trigger type events on all DOM objects contained in the current jQuery object, which can trigger custom events bound by bind()
In addition, this function causes DOM elements to perform event actions with the same name

<body>
  
  <input type="button" value="Button click" id="btn" />
  <input type="checkbox" name="trigger" id="check" />

  <script src="./jquery-1.12.4.js"></script>
  <script>
  
    // trigger event
    $('#btn').on("click", function(){
      $('#check').trigger('click');
    })

  </script>
  
</body>

triggerHandler(type [,data])

The function of this method is basically similar to that of trigger, except that when the method is used to trigger the type event, the DOM element will not execute the event action with the same name.

hover(over,out)

Where over and out are functions, bound to onmouseover and onmouseout events respectively as event handling functions

<body>

  <p id='hover'>colour</p>
  
  <script src="./jquery-1.12.4.js"></script>
  <script>

    // hover
    $('#hover').hover(
      function(){$(this).css('background-color', 'skyblue')}, 
      function(){$(this).css('background-color', 'pink')}
    )

  </script>
</body>

toggle([speed],[easing],[fn])

Toggles the display / hide state of DOM elements contained in jQuery objects.
Among them:
The speed parameter specifies the speed of the "show / hide" animation effect, which is 0ms by default. The possible values include slow, normal and fast;
The easing parameter specifies the switching effect, which is swing or linear by default;
fn is a function executed when the animation is finished, and fn function is executed once after the animation of each element is finished

<body>

  <input type="button" value="toggle" id='tbtn' />
  <div id="tog"></div>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    // toggle
    $('#tbtn').on('click', function(){
      $('#tog').toggle("slow", "linear", function(){
      console.log("Animation complete!")
      })
    })

  </script>
</body>

Event object

jQuery events contain the following properties and methods:

  • currentTarget:
    Represents the DOM object of the event object in the event bubbling phase;
  • data:
    Represents the data parameter passed in when binding the event handling function through bind(), on(), delegate(), etc;
  • delegateTarget:
    Returns the object bound to the event handler in jQuery
  • isDefaultPrevented( ):
    Determines whether the event object's preventDefault() method is called, that is, whether the default behavior is blocked.
  • isPropagationStopped( ):
    Determines whether the stoppropagation() method of the event object is called, that is, whether the event propagation is prevented.
  • pageX:
    Returns the distance of the mouse pointer from the left border of the document.
  • pageY:
    Returns the distance the mouse pointer is from the upper boundary of the document.
  • preventDefault( ):
    Call this method to block the default behavior of the event.
  • which:
    For mouse or keyboard events, this property returns the mouse or keyboard key that fired the event.
  • type:
    Returns the type of event
  • relatedTarget:
    Returns all other DOM elements participating in the event
  • result:
    Returns the return value of the event handler triggered by the event after execution
  • stopPropagation( ):
    Call this method to stop event propagation
  • target:
    Returns the initial event source that triggered the event
  • timeStamp:
    Returns the time difference between 1970-01-01 and when the browser created the event, in ms.
Published 4 original articles, won praise 0, visited 28
Private letter follow

Tags: JQuery Attribute

Posted on Sat, 11 Jan 2020 04:29:57 -0800 by [/Darthus]