1.事件流
1.1 事件流
描述的是在页面中接受事件的顺序
1.2 事件冒泡
由最具体的元素接收，然后逐级向上传播最不具体的元素的节点（文档）
1.3 事件捕获
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
例如：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<div id="div"> ???????????<button id="btn1">按钮</button> ???????</div> ???</body></html>
事件的冒泡就是先从button再到div再到body最后到文档是逐级向上，而事件捕获就是先接受到文档然后逐级向下到button。
2.事件处理
2.1 HTML事件处理
直接添加到HTML结构中
2.2 DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
2.3 DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true：事件捕获
false：事件冒泡
removeEventListener();
2.4 IE事件处理程序
attachEvent
detachEvent
EventHanding.html
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<!--Html事件处理--> ???????<button id="btn1" onclick="demo1()">Html事件处理</button> ???????<script> ???????????function demo1(){ ???????????????alert("Html事件处理"); ???????????} ???????</script> ???????<br /> ???????????????<!--DOM0级事件处理--> ???????<button id="btn2">DOM0级事件处理</button> ???????<script> ???????????var btn2=document.getElementById("btn2"); ???????????btn2.onclick=function(){alert("DOM0级事件处理1")};//会被覆盖 ???????????btn2.onclick=function(){alert("DOM0级事件处理2")};//会被覆盖 ???????????btn2.onclick=function(){alert("DOM0级事件处理3")}; ???????????//btn2.onclick=null; ???????</script> ???????<br /> ???????????????<!--DOM2级事件处理--> ???????<button id="btn3">DOM2级事件处理</button> ???????<script> ???????var btn3=document.getElementById("btn3"); ???????btn3.addEventListener("click",demo31); ???????btn3.addEventListener("click",demo32); ???????btn3.addEventListener("click",demo33); ???????function ?demo31(){ ???????????alert("DOM2级事件处理31"); ???????} ???????function ?demo32(){ ???????????alert("DOM2级事件处理32"); ???????} ???????function ?demo33(){ ???????????alert("DOM2级事件处理33"); ???????} ???????btn3.removeEventListener("click",demo31); ???????</script> ???????<br /> ???????????????<!--IE事件处理--> ???????<button id="btn4">IE事件处理</button> ???????<script> ???????//小于等于IE8 ???????var btn4=document.getElementById("btn4"); ???????if(btn4.addEventListener){ ???????????btn4.addEventListener("click",demo4); ???????}else if(btn4.attachEvent){ ???????????btn4.attachEvent("onclick",demo4); ???????}else{ ???????????btn4.onclick=demo4(); ???????} ???????function demo4(){ ???????????alert("hello"); ???????} ???????</script> ?????????????</body></html>3.事件对象
3.1 事件对象
在触发DOM事件的时候都会产生一个对象
3.2 事件对象event
1>type:获取事件类型
2>target：获取事件目标
3>stopPropagation():阻止事件冒泡
4> preventDefault():阻止事件默认行为
EventObject.html
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<body> 8 ????????<div id="div"> 9 ????????????<button id="btn1">按钮</button>10 ????????????<a id="aid" href="EventHanding.html">跳转</a>11 ????????</div>12 ????????13 ????????<script>14 ????????????document.getElementById("btn1").addEventListener("click",showtype);15 ????????????function showtype(event){16 ????????????????alert(event.type);//获得事件类型17 ????????????????alert(event.target);//获得事件目标18 ????????????????event.stopPropagation();//阻止事件冒泡19 ????????????}20 ????????????21 ????????????document.getElementById("div").addEventListener("click",showdiv);//事件的冒泡22 ????????????function showdiv(){23 ????????????????alert("div");24 ????????????}25 ????????????26 ????????????document.getElementById("aid").addEventListener("click",showA);27 ????????????function showA(event){28 ????????????????event.stopPropagation();29 ????????????????event.preventDefault();//阻止事件默认行为30 ????????????}31 ????????</script>32 ????</body>33 </html>Js 事件详解
原文地址：https://www.cnblogs.com/nullcodeworld/p/9308782.html