Concepts about javascript-related events _ javascript skills

For events, we need to understand the following concepts: Events, event handlers, event types, event streams, event bubbles, event capturing, and event objects; event performance optimization (event delegation, removal of event handlers); common browser compatibility issues. The client javascript program adopts the asynchronous event-driven programming model.

Concepts of related events:

　　Event type ):String used to indicate the type of event;

　　Event target ):Event object;

　　Event handler ):Functions that process or respond to events;

　　Event object ):Objects related to a specific event and containing detailed information about the event;

　　Event propagation ):The browser determines the process of starting the event handler for an object;

Register the event handler:

1. set javascript Object attributes;

2. set html tag attributes

3. addEventListener or attachEvent (the latter is IE)

 function addEvent(target,type,handler){   if(target.addEventListener){     target.addEventListener(type,handler,false);   }else{     target.attachEvent("on"+type,function(event){return handler.call(target,event)});   } }

Three phases of event propagation:

1. occurs before the target processing function, which is called the 'Capturing 'stage;

2. call the event handling of the object itself;

3. event bubbling stage;

In javascript, you canSpecify an event for an element,MethodThere are three types:

1. use the onclick attribute in html
2. use the onclick attribute in javascript
3. use the addEvenListener () method in javascipt.

Comparison of the three methods

(1) in the second and third methods, an event object can be passed into the function and its corresponding attributes can be read. Method 1 cannot.
(2) the second and third types of content are preferred. The first is not conducive to separating content from the event, nor to using the relevant content of the event object.

Syntax details

(1) in the first method, onclick is case-insensitive, but in the second method, it must be in lower case. HMTL is not case sensitive, whereas JS is case sensitive.
(2) in the second and third methods, no double quotation marks are specified for the function name, while the first method is an HTML attribute, which requires double quotation marks.
(3) The first method requires parentheses, and the second and third methods do not.

 onclick="clickHandler()" document.getElementById("jsOnClick").onclick = clickHandler2;  document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Complete code:

   
  Even Deom     HtmlOnClick  JsOnClick  AddEventListener