web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1、JS事件详解-事件流
1.1、事件流
1.事件流：
描述的是在页面中接受事件的顺序
2.事件冒泡：
由最具体的元素接收，然后逐级上传播至最不具体的节点（文档）
3.事件捕获：
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <button id="btn"></button> <!--冒泡的方式 先点击btn第一接收的应该是按钮， 然后应该是包含他的div，再就是html标签， 最后应该就是html文档了 事件的捕获： 最先接收的是文档型接收，然后就是div接收， 最后才是最具体的button接收--> </div> </body> </html>
2、JS事件详解-事件处理
1.HTML事件处理：
直接添加到HTML结构中
2.DOM0级事件处理
把一个函数赋值给一个事件处理程序属性
注：只能添加一个事件处理程序；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <button id="btn">按钮</button> </div> <script> var btn = document.getElementById("btn"); btn.onclick = function(){alert("DOM0级事件处理111");} //第一个事件被覆盖。 // DOM0级事件处理程序只会处理最后一个事件处理程序 btn.onclick = function(){alert("DOM0级事件处理222");} // btn.onclick = null;/*将DOM0级事件处理程序清除*/ </script> </body> </html>
3.DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡
removeEventListener();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <button id="btn">按钮</button> </div> <script> var btn = document.getElementById("btn"); btn.addEventListener("click",demo1); btn.addEventListener("click",demo2); btn.addEventListener("click",demo3); function demo1(){ alert("DOM2级事件处理程序1"); } function demo2(){ alert("DOM2级事件处理程序2"); } function demo3(){ alert("DOM2级事件处理程序3"); } btn.removeEventListener("click",demo2); </script> </body> </html>
DOM2级事件处理程序处理方便。
4.IE事件处理程序
attachEvent
detachEvent
这两个是比IE8低的版本使用的语句。
使用如下代码可解决问题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <button id="btn">按钮</button> </div> <script> var btn = document.getElementById("btn"); if(btn.addEventListener){ // alert("1"); // btn.onclick = demo(); btn.addEventListener("click",demo); }else if(btn.attachEvent){ alert("2"); btn.attachEvent("onclick",demo); }else{ alert("3"); btn.onclick = demo; } function demo(){ alert("111"); } </script> </body> </html>
3、JS事件详解-事件对象
3.1、事件对象：
在触发DOM事件的时候都会产生一个对象
3.2、事件对象event
1.type：获取事件类型
2.target：获取事件目标
3.stopPropagation：阻止事件冒泡
4.preventDefault：阻止事件默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <button id="btn">点击按钮</button> <a id="aid" href="http://www.baidu.com">百度一下</a> </div> <script> document.getElementById("btn").addEventListener("click",showType); document.getElementById("div").addEventListener("click",showDiv); document.getElementById("aid").addEventListener("click",showA); function showType(){ alert(event.type);//顾名思义 alert(event.target);//顾名思义 event.stopPropagation();//阻止事件冒泡，否则还会触发点击div的事件 } function showDiv(){ alert("div"); } function showA(){ event.stopPropagation(); event.preventDefault();//阻止事件的默认行为 } </script> </body> </html>
