This is the 28th day of my participation in the August Text Challenge.

JQuery event

JQuery Event Registration

–> Element. event (function(){})

$(“div”).click(function(){})

● Other events are basically consistent with native JS, such as Mouseover, mouseout, blur, Focus, KeyDown, keyUp, resize, Scroll, change, etc

JQuery Event Handling

● The on() method binds one or more events to matched elements

● Syntax: element.on(“events”, [“selector”], fn)

● Events –> One or more space-delimited event types, written as objects

● When the event handler is the same, separate the event type with a space

● Selector –> child selectors

● The on() method implements event delegation. Event delegation is the act of delegating an event to a parent element by binding an event to a child element. (If you bind an event to a parent element, doing something on a child element will bubble up to the parent element, triggering the event.)

● The above method will bind events to each LI through implicit iteration, which is quite troublesome; We now bind the event to ul using the on() method, but it is LI that fires the event

● The on() method can bind events to dynamically created elements, but the click() method cannot

● Bind the click event directly through OL Li, and it cannot be triggered; But you can bind events to dynamically created elements using the on() method

● The off() method unties events (the off method removes events added by the on method)

● $(” selector “).off() If the parameter is empty, all events for the matched selector are removed

● $(” selector “).off(” event name “) removes the specified event of the matching element

$(” parent element selector “).off(” event name “, “child element selector “)

● The one() method binds one-time events

● You can bind events with one() if you want to fire only once

● Trigger () Automatically triggers events

$(” selector “). Event name ();

$(” selector “).trigger(” event name “)

$(” selector “).triggerHandler(” event name “)

● different from 1 and 2,3 does not trigger the default behavior of elements

JQuery Event object

Event objects are generated whenever an event is triggered

Element. on(“event”, [“selector”], fn(e){}) e is the event object

Event objects have many methods

● Prevent default behavior: e.preventDefault() or return false

● Prevent bubbles: e.topPropagation ()

● Because the event bubbles, after clicking div, two click events are triggered

● This section is similar to Web API, check out the review section

7, jQuery other methods

Extend (copy one object to another)

● $.extend([deep], target, object1, objectN)

If the value of deep is true, it is a deep copy. The default is false shallow copy

Shallow copy: Copies the address of the complex data type of the copied object to the target object. Modifying the target object affects the copied object

Deep copy: A full clone that copies objects, not addresses. Modifying the target object does not affect the copied object( The original MSG object of the target object conflicts with the copied object, but the copied object will not be overwritten. Instead, the original attributes and values are retained, and another space is opened in memory for storage.)

● Target The target object (the object waiting to receive the copy object)

● Object Indicates the object to be copied

● Note: This method overwrites properties that conflict with the original object

JQuery libraries coexist

● Problem: jQuery uses identifiers, other JS libraries may use identifiers, other JS libraries may use identifiers, and other JS libraries may use identifiers, causing conflicts. To have jQuery and other JS libraries coexist without conflict is to have multiple libraries coexist

● 1. If $conflicts, we use jQuery instead

● 2, release the control, let the user decide what variable to replace the control, let the user decide what variable to replace the control

● $.noconflict () or $.noconflict ()

●   var xx = $.noConflict( )