Event infrastructure

Event Type:

　　Distribution system events, custom events dispatch: dispatch system is fixed string of events, custom events dispatch, the string can be any

　　EventTarget, Event: Customizing an Object object can not add events, only the object classes inherit from EventTarget can add an event, the event angle target audience, Event instantiated object called Event objects, which are used to distribute the target object event event. When I use the system comes with the event, the system automatically creates the object, to distribute event.

 

Event transmission infrastructure:

　　1, the event target object is registered to listen for events 2, distribute event object to the event target object

　　

1      var target = new new EventTarget ();
 2      //   create an event target object 
3      target.addEventListener ( "chilema" , clickHandler);
 4      //   Register an event listener 
5      var evt = new new Event ( "chilema" );
 6      //   creating an event object 
. 7      evt.num = 10 ;
 . 8      //   add the attribute to the event object num = 10 
. 9      of target.dispatchEvent (EVT);
 10      //   dispatch events 
. 11      function the clickHandler (E) {
 12 is             the console.log (e.num) ;
 13      }
 14     //   trigger event to perform this function

 

Event principle in three stages:

　　　　Target acquisition bubbling
                outside to reach the target
                 | |
                outer

 

Event listener method:

　　addEventListener () three parameters: the event type, event trigger function is executed, the third parameter: if execution only once for boolean or {once, true} during the capture phase. Low version of the browser can not be used

　　onClick () in a similar manner to support low version.

　　attachEvent () two arguments: the type of event, trigger the execution of the function is only compatible with IE8 and below

 

Remove event methods:

　　elem.removeEventListener()  

　　elem.onClick = null;

　　elem.detachEvent();

　　Three methods are used to remove events and listening for the event, but the event passed three methods are different types of names: addEventListener () without access events on, onClick () does not pass parameters, detachEvent () add on after the type is not capitalized.

 

Stop event bubbling:

　　addEventListener()中：   e.stopProagation();

　　onClick()中：  return false;

　　attachEvent()中： e.cancelBubble = true;

 

 Prevent default event behavior:

　　e.preventDefault (). Not all situations

 

Event delegates:

　　If you add to each event under the li ul, is the need to add multiple event listeners memory, if you add an event listener to ul, li do is to click on the handle so that the code will be strong on a lot.

 

区分  e.currentTarget 、e.target :

　　currentTarget event is the target audience, who added the event listener, who is the object

　　target object is actually clicks

　　e is a specific kind of trigger events, that is, who e, e In addition to these objects, there are many attributes.