Introduction to JavaScript Event handling

First, what is an event? The event is what the Web browser notifies the application about. We can register events in a number of ways to listen for events that we need to deal with. The event contains some properties:

Event Type: String used to describe what type of event

Event handler: Listen for something that you want him to do

Event objects: Specific event types, with different properties

Event propagation: Typically, the process of capturing-> target object-> Bubbling is experienced, IE8 browsers do not support event capture

The following is a brief description of the types of events, document load and readiness events, mouse events, mouse wheel events, drag-and-drop events, keyboard events, and text entry events. As the web platform grows, the collection of events is growing, and these new events come mainly from: HTML5 specifications and mobile device touch and gesture events.

After describing what types of events are, then let's talk about registering event handlers. We know that there are two basic ways to register an event handler: The first one appears in the early web, setting properties (Level 0 event models) for event target objects or document elements, and the second way is to pass event handlers to an object or an element (Level 2 event model).

Level 0 Event Model:

Write directly in the attribute  
    <button id= "btn" onclick= "alert (' click Me ')" >clicke me</button>  
    //through JS bound to the  
    element document.getElementById (' btn '). onclick = function () {  
          alert (' click Me ');  
     }

Level 2 Event Model

function ClickHandler = function () {  
        alert (' click Me ');  
    }  
    Non IE browser  
        /* Parameter description: The first parameter is the event type, the second parameter is the handler, and the third parameter is whether to perform a view in the capture phase.  
		More Highlights: http://www.bianceng.cnhttp:// www.bianceng.cn/webkf/script/
        prevents event propagation: event.stoppropagation ();  
        Block Default event: Event.preventdefault ();  
    * *
    document.getElementById (' btn '). AddEventListener (' Click ', ClickHandler, false);    Register  
    document.getElementById (' btn '). RemoveEventListener (' Click ', ClickHandler, false);    Clear  
           
    //ie Browser  
        /* Parameter description: The first parameter is the event type, the second parameter is the handler; because IE does not support capturing, there is no third parameter  
         Block Event Propagation: window.event.cancleBuble ();  
         Block Default event: Window.event.returnValue = false;  
    * *
   document.getElementById (' btn '). attachevent (' onclick ', clickhandler);    Registered  
   document.getElementById (' btn '). DetachEvent (' onclick ', clickhandler);    Lifted

Note:

1. Although all events are dominated by the capture phase of the event's propagation, not all events are bubbling; Typically, raw input events bubble, and high-level semantic events do not bubble (blur, Focus)

2.addEventListener registered events are ordered by Attachevent without order

Event proxies can be implemented using event.target and bubbling.