Of Stack

JavaScript Event Detailed Explanation

  • 2021-07-01 06:08:59
  • OfStack

Concept of event

Events: Refers to 1 specific interaction moment in a document or browser window. We can use listeners (or handlers) to schedule events so that the corresponding code can be executed when an event occurs.

1. Event flow

1. Event flow: Describes the order in which events are accepted in the page

2. Event bubbling: Nodes (documents) that are received by the most specific elements and then propagated step by step up to the least specific elements

3. Event capture: The least specific node receives the event first, while the most specific node should receive the event last

2. Event handling

1. HTML event handling: Added directly to the HTML structure

2. DOM Level 0 Event Handling: Assign a function to an event handler property

3. DOM2 level event handling:

addEventListener ("Event Name", "Event Handler", Boolean)

true: Event Capture

false: Event Bubble

removeEventListener();

4. IE event handler

attachEvent

detachEvent 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1"> Button </button>
</div>
<!--<script>
function demo(){
alert("Hello HTML Event handling ");
}
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){alert("Hello DOM0 Level event handler ")};// Be covered 
btn1.onclick = function(){alert("Hello DOM0 Level event handler 2")};
btn1.onclick = function(){alert("Hello DOM0 Level event handler 3")};
</script>-->
<!--<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2 Level event handler 1");
}
function demo2(){
alert("DOM2 Level event handler 2");
}
function demo3(){
alert("DOM2 Level event handler 3");
}
btn1.removeEventListener("click",demo2)
</script>-->
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo)
}else{
btn1.onclick = demo();
}
function demo(){
alert("Hello");
}
</script>
</body>
</html>

3. Event objects

1. Event object: 1 object will be generated when DOM event is triggered

2. Event object event:

type: Get the event type

target: Get the event target

stopPropagation (): Prevent event bubbling

preventDefault (): Block Event Default Behavior 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div">
<button id="btn1"> Button </button>
<a href="http://www.baidu.com" id="aid"> Baidu </a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
// alert(event.type);
alert(event.target);
event.stopPropagation();// Prevent events from bubbling 
}
function showDiv(){
alert("div")
}
function showA(event){
// event.stopPropagation();
// event.preventDefault();
}
</script>
</body>
</html>

Related articles: