JavaScript events
1、
jQuery events
Common Events in JQuery
| .click() |
Mouse click trigger event, optional parameters (data, function) |
| .dblclick() |
Double click to trigger, same as above |
| .mousedown()/up() |
Mouse down/up trigger event |
| .mousemove() |
mouse move event |
| .mouseover()/out() |
Mouse move in/out trigger event |
| .mouseenter()/leave() |
Mouse enter/leave trigger event* |
| .hover(func1,func2) |
Move the mouse in to call the func1 function, move out to call the func2 function |
| .focusin() |
Fires an event when the mouse is focused on the element |
| .focusout() |
Event fired when mouse loses focus |
| . focus()/.blur() |
Mouse focus/lose focus trigger event (bubble is not supported) |
| .change() |
Fires an event when a form element changes |
| .select() |
Fires an event when a text element is selected |
| .submit() |
Form submit action triggers* |
| .keydown()/up() |
Keyboard key press / pop up trigger |
| .on() |
Binding of multiple events |
| .off() |
remove event binding |
| .trigger(“event”) |
trigger event event call |
| .triggerHandler() |
Trigger events, no bubbles, no default events |
Note:
1. Most of the above event functions have three usages:
- // Directly bind the event to the element
- $elem.keydown( handler(eventObject) )
- //Pass parameters to call the function handler for processing
- $elem.keydown( [eventData ], handler(eventObject) )
- // Manually trigger the bound event
- $elem.keydown()
// Directly bind the event to the element $elem.keydown( handler(eventObject) ) //Pass parameters to call the function handler for processing $elem.keydown( [eventData ], handler(eventObject) ) // Manually trigger the bound event $elem.keydown()
2. The difference between mouseover and mouseenter: regardless of whether the mouse pointer passes through the selected element or its child elements, the mouseover event will be triggered, which is called support for bubbling processing. Bubbling processing refers to the event defined by the child element and the parent element. , or if no child element is defined, the event is propagated to the parent, causing the parent event to fire. The mouseenter event is fired only when the mouse pointer crosses the selected element.
3. The form element has the default behavior of submitting the form. If it is processed through submit, this default behavior of the browser needs to be disabled. The traditional way is to call the event object e.preventDefault() to handle it. In jQuery, you can directly return false at the end of the function.
4, on () use
Basic usage: .on( events ,[ selector ] ,[ data ] )
The most common is to bind a click event to an element, and compare the difference between the shortcut and the on method
- $( "#elem" ).click( function (){}) //Shortcut
- $("#elem").on('click',function(){}) //on方式
$("#elem").click(function(){}) //Shortcut
$("#elem").on('click',function(){}) //on方式
Multiple events bound to the same function
$("#elem").on("mouseover mouseout",function(){ });
Separated by spaces and passed different event names, multiple events can be bound at the same time
Multiple events bind different functions
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
pass data to handler
function greet( event ) {
alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}
$( "button" ).on( "click", {
name: "Mr.Tory"
}, greet );
You can pass the second parameter (object) to be passed to the event handler when an event is triggered
JQuery event object properties and methods
| .type |
Event type. If you use an event handler to handle multiple events, you can use this property to get the event type, such as click |
||
| .data |
Passing extra parameters when calling the event |
||
| .target |
|
||
| .which |
Indicates which key or button was pressed |
||
| .timeStamp |
This property returns the number of milliseconds from January 1, 1970 until the event occurred |
||
| .pageX/Y |
Mouse position relative to the left/top edge of the document |
||
| .result |
The value returned by the previous same event handler function |
||
| .preventDefalut() |
Default action for blocking events |
||
| .stopPropagation() |
Cancel event bubbling |