Several concepts of javascript related events_javascript skills-JS Tutorial-php.cn

Several concepts of javascript related events_javascript skills

WBOY

Release： 2016-05-16 15:58:08

Original

1068 people have browsed it

The client-side JavaScript program adopts an asynchronous event-driven programming model.

Several concepts of related events:

　Event type: A string used to describe what type of event occurred;

　Event target: The object where the event occurs;

　Event handler: A function that handles or responds to events;

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

　Event propagation: The process by which the browser determines which object triggers its event handler;

Register event handler:

1. Set JavaScript object attributes;

2. Set html tag attributes

　3. addEventListener or attachEvent (the latter is for 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)});
   }
 }

Copy after login

Three stages of event propagation:

1. Occurs before the target processing function, which is called the ‘capture’ phase;

2. Calling the object’s own processing events;

3. The bubbling stage of events;

In javascript, you can specify an event for an element. There are three ways to specify :

1. In html, use the onclick attribute

2. In javascript, use the onclick attribute
3. In javascipt, use the addEvenListener() method

Comparison of three methods

(1) In the second and third methods, you can pass an event object to the function and read its corresponding attributes, but method one cannot.

(2) The second and third options are preferred. The first one is not conducive to separating the content from the event, and the related content of the event object cannot be used.

Some grammatical details

(1) In the first method, onclick is case-independent, but in the second method, lowercase must be used. Because HMTL is not case-sensitive, while JS is case-sensitive.

(2) In the second and third methods, there are no double quotes when specifying the function name, while the first method, as an HTML attribute, requires double quotes.
(3) The first method requires parentheses, but the second and third methods do not.

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

Copy after login

Full code:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 
 
</head> 
<body> 
 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
 <button id="jsOnClick">jsOnClick</button> 
 <button id="addEventListener">addEventListener</button> 
  
 <script defer> 
 function clickHandler() { 
 alert("onclick attribute in html"); 
 } 
 function clickHandler2(e) { 
 alert(e.target.innerHTML); 
 } 
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", 
  clickHandler2); 
</script> 
</body> 
</html>

Copy after login

The above is the entire content of this article, I hope you all like it.