jquery: event mechanism bind() on()

1. Register the event

The bind() and on() methods add one or more event handlers to the selected element, as well as a function to run when the event occurs.

  • Usage of bind:
    $('a').bind('click',[data],function(){})
  • Usage of on:
    $('body').on('click','a',[data],function(){})

For example, to bind the p tag to
Insert picture description here
the difference between the click and mouse move events bind and on at the same time :
Insert picture description here
When using on, after binding events to the parent label, when adding a new element to the parent label, the new element can also dynamically obtain the bound event.

Insert picture description here

2. Event delegation

The essence is to use the bubbling mechanism and event source to bind the event to the parent tag, and then trigger the execution through the child tag. This allows for dynamic binding of events, so that new elements also have event listeners

The delegate() method adds one or more event handlers to the specified element (sub-elements of the selected element), and specifies the function to run when these events occur

Create a div tag and set the id to home. Write the p tag in it, bind the click event to the p tag, and get the text value of p. After adding a new p tag to the div, the new tag will also have a click event.
Insert picture description here

3. Event object

The event object has the following properties

  • type: Event type, such as click.
  • which: The mouse button or keyboard key that triggered the event.
  • target: The initial object where the event occurred, and the source of the event (who triggered the event).
  • data: The data of the incoming event object.
  • pageX: The horizontal coordinate of the mouse position when the event occurs (relative to the upper left corner of the page).
  • pageY: The vertical coordinate of the mouse position when the event occurs (relative to the upper left corner of the page

4、each()

Used for traversal operations
Insert picture description here

Guess you like

Origin blog.csdn.net/qq_41504815/article/details/114643531