Dom 事件监听
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1">here</p> <div id="div1"> <p id="p2"> div+p+bubbing; </p> </div> <div id="div2"> <p id="p3"> div+p+capturing; </p> </div> <button type="button" id="btn1">moveListen</button> <script type="text/javascript" src="Dom_listen.js"> </script> </body> </html>
//不会覆盖已有的事件处理程序 依次执行 document.getElementById("p1").addEventListener("click",clickFun); function clickFun(){ alert("Hello World"); } document.getElementById("p1").addEventListener("click",clickFun1); function clickFun1(){ alert("Hello"); } //向window对象添加 //当用户调整窗口大小时触发的事件监听器: window.addEventListener("resize",winFun); function winFun(){ alert("resize"); } //事件传播 俩种:冒泡和捕获 //冒泡 先处理内侧再外侧 默认 FALSE //捕获 先外侧再内侧 true document.getElementById("div1").addEventListener("click",divFun,false); document.getElementById("p2").addEventListener("click",pFun,false); function divFun(){ console.log("div"); } function pFun(){ console.log("p"); } document.getElementById("div2").addEventListener("click",divFun,true); document.getElementById("p3").addEventListener("click",pFun,true); //移除监听事件 document.getElementById("btn1").addEventListener("click",btnFun); function btnFun(){ document.getElementById("p1").removeEventListener("click",clickFun); }