The concept of events
Event: refers to some specific interaction moments that occur in a document or browser window. We can schedule events through listeners (or handlers) so that the corresponding code will be executed when the event occurs.
1. Event flow
1. Event flow: describes the order in which events are accepted in the page
2. Event bubbles: received by the most specific element and then propagated upward step by step to the node of the least specific element (document)
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 processing: directly add to HTML structure
2. DOM0 level event processing: Assign a function to an event handler attribute
3. DOM2 level event handling:
addEventListener("event name", "event handler function", boolean value)
true: Event capture
False: Event bubbles
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")};//overrided 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>III. Event Object
1. Event object: An object will be generated when the DOM event is triggered.
2. Event object event:
type: Get the event type
target: Get the event target
stopPropagation(): Prevent events from bubbles
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();//Stop event bubbles}function showDiv(){alert("div")}function showA(event){// event.stopPropagation();// event.preventDefault();}</script></body></html>