This is the 26th day of my participation in the August Text Challenge.More challenges in August
JQuery event operations
Simple way to register events
• Syntax: jQuery objects. Event name (event handler);
The on method registers the event
The underlying encapsulation of the on() method is actually addEventListener(), which, unlike onclick, registers the same event for the same element multiple times.
• Register simple event syntax: jQuery object. On (‘ event name ‘, event handler);
• Event delegate implementation: jQuery object. On (‘ event name ‘,’ selector ‘, event handler);
Selector: Descendant element
Note: In event handlers, this represents descendant elements (the first triggered by the click)
- Registration:
$("input").on("click".function () {
alert(2)})Copy the code
- Event delegation
$("ul").on("click"."li".function () {
// In the event delegate process, the this inside the event function does not refer to the event source, but to the delegate child that triggered the event
alert($(this).text())
})
Copy the code
The off method removes the event
• Unbind simple events: jQuery object. Off (‘click’, event handler name)
• Unbind event delegate registered event: jQuery object. Off (‘click’, ‘selector ‘, event handler name)
- Unbind simple events
// Define the event handler
var fun1 = function () {
alert(2)};var fun2 = function () {
alert(3)};// Bind simple events
$("input").on("click",fun1)
$("input").on("click",fun2)
// Unbind events
$("input").off("click",fun2)
Copy the code
- Unbind the event delegate
var fn1 = function () {
alert($(this).text())
};
var fn2 = function () {
alert($(this).index())
};
// Bind event delegate events
$("ul").on("click"."li", fn1)
$("ul").on("click"."li", fn2)
// Unbind event delegates
$("ul").off("click"."li", fn2)
Copy the code
Triggering event
• Syntax: jQuery object. Trigger (‘ event name ‘);
Automatically triggers an event, such as triggering auto-multicast of a multicast graph.
// You can use the trigger method in JQ to automatically execute the right button event
function autoPlay() {$(".arrow-right").trigger("click");
}
var timer = setInterval(autoPlay,1000);
// Mouse over stop timer
$(".slider").on("mouseenter".function () {
clearInterval(timer);
})
// Mouse away to restart the timer
$(".slider").on("mouseleave".function () {
timer = setInterval(autoPlay,1000)})Copy the code
JQuery Event object
The event object
• The event handler’s first parameter, e
Properties associated with the mouse event object
• Event object. ClientX /Y reference browser
• Event object. PageX /Y reference document
• Event object. OffsetX /Y references ancestor level elements
Properties associated with the keyboard event object
• event object keyCode returns the keyCode number
AltKey /shiftKey/ctrlKey returns a Boolean value. Check if pressed (true)
// Get the number of key code in the keypress event
$(document).keydown(function (e) {
console.log(e.keyCode)
})
Copy the code
A public property or method
• attribute
Target The DOM element that initially fires the event
CurrentTarget The current DOM element in the event bubble phase
Methods:
PreventDefault (); Blocking default behavior (such as a tag)
Event object. StopPropagation (); Prevents events from bubbling
Multi – library coexistence problem
Questions about $conflicts
Solution 1: Use jQuery instead of $
Solution 2: The jQuery library frees up the use of $matches and uses another simple symbol instead
- jQuery.noConflict(); Release, return, return, and return the represented function to the user, who can receive it with other variables
// Solution 2: Release the $sign
var $1 = jQuery.noConflict();
// console.log($1)
$1("button").click(function () {
alert(1);
})
Copy the code