Browser event model
DOM Level 0 Event Model
Example
His attribute provides a lot of information about the triggered event currently being processed. This includes details such as the event triggered on which element, the coordinates of the mouse event, and which key was clicked in the keyboard event.
2. Event bubbles
When an event on an element in the dom tree is triggered, the event model checks whether the element has created a specific event handler. If so, the created event handler will be called. The event model then checks the parent element of the target element to see if it has created a processor for this event type. If so, call the created processor, then check its parent element, and the parent element of the parent element, and so on until the top of the dom tree.
DOM Level 2 Event Model
IE Event Model
jQuery event model
Binding event handler using jQuery
<html>
<head>
<title>jQuery Events Example</title>
<script type="text/javascript" src="../scripts/jquery-1.7."></script>
<script type="text/javascript">
$(function () {
$('#example')
.bind('click', function (event) {
alert('BOOM once!');
})
.bind('click', function (event) {
alert('BOOM twice!');
})
.bind('click', function (event) {
alert('BOOM three times!');
});
});
</script>
</head>
<body>
<img src="" />
</body>
</html>
bind(eventType, data, handler); bind(eventMap)
You can specify a namespace by adding a dot-separated suffix to event names to batch operate the event processor.
Multiple events can be bound to one element through a single bind() method.
$('.whatever').bind({
click:function(event){/* handle */},
mouseenter: function (event) {/* handle */ },
mouseleave: function (event) {/* handle */ }
})
Specific event binding:
blur change click dblclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup ready resize scroll select submit unload
When using these convenient methods, the values are read-only. They have a parameter listener function that represents the event handler.
focusin focusout
one(eventType, data, listener)
Delete event handler
unbind(eventType, listener); unbind(event)
Delete a specific event handler
Delete all event handlers in the namespace
$('*').unbind('.fred')Event instance
Browser-independent properties and methods
| name | describe |
| altKey | |
| ctrlKey | |
| currentTarget | |
| data | |
| metaKey | |
| pageX | |
| pageY | |
| relatedTarget | |
| screenX | |
| screenY | |
| shiftKey | |
| result | |
| target | |
| timestamp | |
| type | |
| which | |
| preventDefault() | |
| stopPropagation() | |
| stopImmediatePropagation() | |
| isPropagationStopped() | |
| isImmediatePropagationStopped() |
Trigger event handler
trigger(eventType, data)
triggerHandler(eventType, data)
Convenient method to trigger
blur() change() click() dblclick() error() focus() focusin() focusout() keydown() keypress() keyup() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() resize() scroll() select() submit() unload()
Other events-related methods
1. A switchable monitor
toggle(listener1, listener2, ...)
2. Hover the mouse over the element
hover(enterHandler, leaveHandler); hover(handler)
Make the most of (more) events
Filter large data collections
Create elements through template copy
Create body mark
Add a new filter
Add limited controls
Remove unwanted filters and other tasks
The above article in-depth understanding of jQuery event handling is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.