原始的 兼容性好
li.οnclick=fn;
一个事件绑定多个函数的方法
li.addEventListener("click",fn,false); [注意这里要加引号，不要on ]
1.冒泡
碰到父子元素结构的时候，当我们给他设置事件的时候，最后的布尔值设false时
就会发生“冒泡”事件，从逐往上面冒。阻止冒泡的话 在fn大括号里加上 event.stopPropagation();
IE：event.cancelBubble = true;li.addEventListener("click",function(){
event.stopPropagation();
},false);
2.事件抓捕
碰到父子元素结构的时候，当我们给他设置事件的时候，最后的布尔值设true时
就产生 “事件抓捕”现象 ，擒贼先擒王 先抓捕祖级，把上面的先抓【IE没有】触发顺序，先捕获，后冒泡div[0].addEventListener('click', red ,true ) <div class="wrap"> <div class="content"> <div class="box"></div> </div> </div> <script> var div=document.getElementsByTagName('div'); div[0].addEventListener('click', red ,true ) div[1].addEventListener('click', black ,true ) div[2].addEventListener('click', orange ,true ) function red() { console.log("red") } function black() { console.log("black") } function orange() { console.log("orange") } </script>
练习题1.点击哪个弹出对应的li
这里面有个闭包的问题 我用立即执行函数解决了 var licol=document.getElementsByTagName('li'); for (var i = 0; i <licol.length; i++) { (function (i) { licol[i].onclick=function () { console.log(i); } }(i)) }事件进阶部分
转载于:https://www.cnblogs.com/nice2018/p/9874912.html
