Home > Article > Web Front-end > Several concepts of javascript related events_javascript skills

Several concepts of javascript related events_javascript skills

WBOYOriginal: 2016-05-16 15:58:081031browse

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)});
   }
 }

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);

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of js same origin policy_javascript skillsNext article：Detailed explanation of js same origin policy_javascript skills

See more

Several concepts of javascript related events_javascript skills

Related articles