JS中的DOM相关、事件绑定、事件委托、冒泡、捕获、阻止默认行为
事件绑定
广义JavaScript:ECMAScript + DOM + BOM
狭义JavaScript:ECMAScript ES6 ES5 ES3
//事件绑定 document.getElementById('btn').onclick = function(){ alert('dom0级事件,事件绑定!'); }//只执行最后一个事件 //事件监听 // element.addEventListener(event,function,useCapture)//removeEventListener() // event 必传参数,事件名,支持所有DOM事件 // function 必传参数,指定要触发的函数 // useCapture 可选,事件的执行方式,true 捕获,false 冒泡,默认false冒泡 // IE8:element.attachEvent(event,function) // event 必传参数,事件类型,需要加on,onclick // function:指定事件触发时要执行的函数 document.getElementById('btn2').addEventListener("click",fun2); document.getElementById('btn2').addEventListener("click",fun3); function fun2(){ alert("事件监听,首个事件"); } function fun3(){ alert("事件监听,第二个事件!"); }
阻止事件冒泡
e.stopPropagation();//Propagation蔓延
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> div1 <div id="div2"> div2 </div> </div> </body> <script> document.getElementById("div1") .addEventListener('click',function(e){ alert("div1"); },false); document.getElementById('div2') .addEventListener('click',function(e){ e.stopPropagation(); alert('div2'); },false); </script> </html>
IE:e.cancelBubble = true
事件委托
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="demo"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> // 事件委托 document.getElementById("demo") .addEventListener('click',function(e){ var e = e || window.event; if(e.target.nodeName.toLowerCase() == 'li'){ alert(e.target.innerHTML); } },false); </script> </html>
阻止默认行为
e.preventDefault();
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com">百度</a> </body> <script> document.querySelector('a') .onclick = function(e){ // e.preventDefault(); return false; } </script> </html>