JS基础知识9（事件，事件委托）

javascript和html的交互是通过事件实现的
1.dom文档对象模型是树形结构

事件流

描述从页面中接收对象的顺序。
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。如下图

2.事件捕获阶段是从不太具体的节点（window）逐级向下传播到最具体的元素（为截获事件提供了机会）。然后是实际的目标接收到事件。最后通过事件冒泡对事件做出响应并一级一级向上传回到window（根节点）
3.阻止事件冒泡主要是通过preventDefault()取消事件的默认行为，stopPropagation()取消事件的进一步捕获或冒泡。
4.事件冒泡的应用是事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件代理的优点：1.代码简洁 2.减少浏览器内存占用
5.页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
6.为什么要用事件委托：
1.减少事件数量
2.避免内存外泄
3.预测未来元素
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
7.适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick =