Detailed explanation of event model

This time I will bring you a detailed explanation of the event model. What are the precautions for using the detailed explanation of the event? The following is a practical case, let's take a look.

IEEventModel (no capture) (<=ie8)

1. attachEvent(event, function)
   detachEvent(event, function)
   The first parameter is on+'event';

2. TargetObjectevent.srcElement;

3. this will point to window;

4. event.cancelBubble = true // Stop bubbling
   event.returnValue = false // Prevent default events

##Standard DOM event model (capture, target, bubble)(>ie8)

1. addEventListener(event, function, useCapture)

   removeEventListener(event, function, useCapture)
   useCapture is true, executed in the capture phase, triggered from outside to inside;
   useCapture is false, in the risk Bubble phase execution (default), triggered from inside to outside;
   

2. event.target and event.

   currentTargettarget are in the target phase of the event flow ( Points to the object that triggers event monitoring);
   currentTarget is in the capture, target and bubbling stages of the event flow (points to the object that adds event monitoring);
   Only when the event flow is in the target stage, the two points It's the same;
   When in the capturing and bubbling stages, target points to the clicked object and currentTarget points to the object of the current event activity (usually the parent).
   

3. this points to the event listening object;

4. event.stopPropagation() // Stop bubbling

   event.preventDefault() // Prevent the default event
   

##event.stopImmediatePropagation(), prevent the remaining
5. event processing

   functions from executing and prevent the event from bubbling up the DOM tree. This method does not accept any parameters ;

Custom event

var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
  log('The time is: ' + e.detail);
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

OTHER

Related articles! Recommended reading:

How to use event loop

How to implement JavaSript event bubbling and event capture

The above is the detailed content of Detailed explanation of event model. For more information, please follow other related articles on the PHP Chinese website!