JS basis - Event

Event mechanism

Three-stage trigger events

Event trigger has three stages:

• window to trigger events at the spread encountered registered capture event triggers
• Registered event is triggered when the event is triggered at the spread
• From triggering event to spread at the window, encountered registered bubbling event triggers

Event trigger will generally be in the order above, but there are exceptions, if a child node to a body simultaneously registered bubbling and capture the event which triggers will be executed in the order of registration.

Registration issue

Usually registered using addEventListener event, the third parameter of the function may be a Boolean value, it can also be a target. The third parameter default value is false, determines the registered event is to capture the event (ture is) or a bubbling event.

Generally speaking, if we only want the event to trigger only on the target, which can be used when stopPropagation to prevent further propagation of an event. Usually we think stopPropagation is used to stop the event bubbling, in fact, this function can also prevent capture events. stopImmediatePropagation also enables to prevent the event, but also prevent the implementation of other objectives of the event registration event.

target 和 currentTarget

In the event delivery after understanding the above-mentioned three stages, we have to sort out the event object in confusing two properties: target and currentTarget.

target object is a specific trigger event, will only appear in the target phase of the event mechanism, namely, "who triggered the event, who is the target."
currentTarget is the object binding events.

Cancel the default action

Cancel the default operation
method is w3c e.preventDefault (), IE is the use e.returnValue = false;

function cancelHandler(event){  
  var event = event || window.event;  //用于IE  
  if(event.preventDefault) event.preventDefault();  //标准技术  
  if(event.returnValue) event.returnValue = false;  //IE  
  return false;   //用于处理使用对象属性注册的处理程序  
}