盲点1：JS的事件冒泡和事件捕获

这篇笔记也算是对盲点的一个“扫盲”，之前其实在学习JS的事件的时候是有了解到的，但其实并不是深入的了解，本文也是对JS事件冒泡和事件捕获的一个总结吧（资料参考网上搜索的一些内容）

IE：事件冒泡 （不太确认）

首先可以先PO个图：

可以看到的是：捕获的话是从外到内，与之相反的冒泡是从内到外

事件冒泡

    <div id="parent">
        <div id="child">我是子</div>
    </div>

    window.onload = function () {
        document.getElementById("parent").addEventListener("click",function (e) {
           alert("触发parent"+this.id);
        });
        document.getElementById("child").addEventListener("click",function (e) {
           alert("触发child"+this.id);
        });
    }

执行后的效果是先触发里面的child，然后再触发parent事件，这就是事件冒泡（从内到外）

事件捕获 (改一个参数值，默认为false)

    window.onload = function () {
        document.getElementById("parent").addEventListener("click",function (e) {
           alert("触发parent"+this.id);
        },true);
        document.getElementById("child").addEventListener("click",function (e) {
           alert("触发child"+this.id);
        },true);
    }

执行后的效果是先触发外面的parent，然后再触发child事件，这就是事件捕获（从外到内）

阻止事件冒泡

var ev = ev || window.event
ev.cancelBubble = true //IE9之前
ev.stopPropagation(); //标准浏览器

阻止默认事件（这个和阻止事件冒泡是相反的）（会发生冒泡传递给父元素）

event.preventDefault();//阻止默认事件

暴力阻止冒泡和默认事件

return false

事件委托（其实是利用事件冒泡的原理来实现的，让自己触发的事件，委托给父元素执行）

<ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
</ul>

    　　　　$("ul").on("mouseover",function(e){
                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
            })

target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较