Of Stack

Deep understanding of jQuery event handling

  • 2021-06-28 10:41:40
  • OfStack

Browser Event Model

DOM Level 0 Event Model

1.Event instance

His properties provide a lot of information about the triggered events that are currently being processed.This includes details such as which element triggered the event, the coordinates of the mouse event, and which key was clicked in the keyboard event.

2. Event Bubble

When an event is triggered on an element in the dom tree, the event model checks whether that element has created a specific event handler.If so, the created event handler is invoked.The event model then checks the parent element of the target element to see if it has already created a processor for this event type.If so, call the created processor, then check its parent element, and so on, until the top of the dom tree.

DOM Level 2 Event Model

IE event model

jQuery event model

Bind event handlers using jQuery 


<html> 
<head> 
  <title>jQuery Events Example</title> 
  <script type="text/javascript" src="../scripts/jquery-1.7.1.js"></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 id="example" src="example.jpg" /> 
</body> 
</html>

bind(eventType, data, handler); bind(eventMap)

You can specify a namespace by adding dot-delimited suffixes to event names to batch manipulate event handlers.

Multiple events can be bound to a single element using a single bind () method. 


$('.whatever').bind({
  click:function(event){/* handle */},
  mouseenter: function (event) {/* handle */ },
  mouseleave: function (event) {/* handle */ }
})

Specific event bindings:

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 event.data value is read-only.They have one parameter, the listener function, which represents the event handler.

focusin focusout

one(eventType, data, listener)

Delete event handler

unbind(eventType, listener); unbind(event)

Delete specific event handlers

Delete all event handlers in the namespace

$('*'). unbind ('.fred') Event instance

Browser-independent jQuery.Event properties and methods

名称 描述
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)

Quick way 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 Event Related Methods

1. Switching listeners

toggle(listener1, listener2, ...)

2. Hover over elements

hover(enterHandler, leaveHandler); hover(handler)

Take full advantage of (more) events

Filter large data collections

Create elements by template copying

Establish subject tag

Add a new filter

Add Qualifying Control

Delete unneeded filters and other tasks

Related articles: