js总结（7）事件

原始的兼容性好

li.onclick=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))  

    }

事件进阶部分

js总结 （7）事件

js总结（7）事件