Detailed explanation of JavaScript event model, objects, monitoring, and delivery code examples

1. Event model

Bubbling events (Bubbling): events are transmitted from leaf nodes along the ancestor nodes all the way up to the root node
Capturing events (Capturing): From the top element of the DOM tree to the most precise element, as opposed to the bubbling event
DOM standard event model: The DOM standard supports both bubbling events and capture events, which can be said to be a combination of the two. , first is the capture type, and then bubbles to pass

2. Event object

In the IE browser, the event object is an attribute of the window. In the DOM standard, event must be passed as the only parameter to the event processing function

Get a compatible event object:

function(event){
  //event 是作为DOM标准的参数传入处理函数
 event = event ?event : window.event;
}

In IE, the event object is included in the event srcElement, and in the DOM standard, the object is included in the target attribute
Obtain the element pointed to by the compatible event object:

##

var target =event.srcElement ? event.srcElement : event.target ;

The premise is to ensure that the event object has Correct acquisition

3. Event listener

Under IE, the registered listeners are executed in reverse order, that is, the ones registered later are executed first

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

The first parameter is the event name, and the second parameter is the callback processing function

Under DOM standard:

element.addEventListener('click',observer,useCapture)
element.removeEventListener('click',observer,useCapture)

One parameter is the event name without the "on" prefix, the second parameter is the callback processing function, and the third parameter indicates whether the callback function is called in the capture phase or the bubbling phase. The default true is the capture phase

4. Event delivery

Compatibly cancel the browser's event delivery

function someHandler(event){
  event = event || window.event;
  if(event.stopPropagation) //DOM标准
  event.stopPropagation();
  else
  event.cancelBubble = true; //IE标准
}

Default processing after canceling event delivery

function someHandler(event){
  event = event || window.event;
  if(event.preventDefault) //DOM标准
  event. preventDefault ();
  else
  event.returnValue = true; //IE标准
}

The above is the detailed content of Detailed explanation of JavaScript event model, objects, monitoring, and delivery code examples. For more information, please follow other related articles on the PHP Chinese website!