web学习笔记（二十四）

1.事件流

1.1事件流的定义

就是事件在页面中的传播机制，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流。

1.2事件流的三个阶段

（1）捕获阶段：网景最早提出，现在我们使用的浏览器都已经不使用这个阶段了，了解即可，从最外层节点向内层进行传播，如果没有操作则继续向下传播，直到目标。

（2）目标阶段：就是当前操作的节点。

（3）冒泡阶段： IE 最早提出，现在浏览器大都使用冒泡机制，从里层向外层进行传播，直到最顶层。

1.3没有冒泡机制的事件

大部分事件都要冒泡机制 ，但有一些事件没有冒泡机制，需要我们注意一下。

1.4事件流总结

• onclick和attchEvent只能得到冒泡阶段。
• addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
• 在时间开发中我们很少用事件捕获，更多的使用事件冒泡。
• 通过e.cancelBubble=true;或者e.stopPropagation()可以阻止冒泡。根据浏览器的版本不同，可能会有问题产生，下面的代码可以解决兼容性的问题，从而更好的阻止冒泡的发生。

    if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble=true;
            }

2.事件对象和事件委托

2.1什么是事件对象

事件对象event(e)就是函数中的形参，这个形参是系统帮我们创建的，里面包含了跟事件相关的一系列信息数据，不需要传递实参过去。可以直接使用

  var btn = document.querySelector('#btn');
        btn.onclick = function (e) {
            console.log(e);
            // 输出鼠标事件对象 
 
        }

2.2 事件对象中需要关注的属性和方法 补充 阻止默认动作的方法：

（1）阻止超链接跳转动作：<a href="iavascript:;"></a>

（2）阻止表单的提交动作： <form action="return false"></form>或者用下面的代码也可以完成这个工作。

   form.onsubmit=function(e){
            e.preventDefault();
        }

（3）阻止右击菜单动作：

  document.oncontextmenu=function(e){
            e.preventDefault();
        }

（4）阻止选中的动作，禁止鼠标选中：

    document.onselectstart=function(e){
            e.preventDefault();
        }

2.3 e.target 和 this 的区别：

this 是事件绑定的元素， 这个是函数的调用者（绑定这个事件的元素）

e.target 是事件触发的元素。

2.4事件对象的兼容性问题

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决办法:e = e || window.event;

3.事件委托

     事件委托也称为事件代理， 在 jQuery 里面称为事件委派。事件委托就是利用冒泡机制，比如我们通过cloneNode克隆出来的节点，然后新节点事件不生效，此时就可以通过事件委托来解决。

      解决思路：不给被克隆的元素加事件，委托给父辈的元素代替他添加这个事件，然后利用冒泡原理影响设置每个子节点。一般在使用时搭配e.target(事件触发的元素)来完成一些事情。

利用事件委托我们减少了访问DOM的次数，减少了整个页面的交互就绪时间，提高了程序的性能。

4.键盘事件

• 键盘对象中比较重要的属性： e.keyCode  键的ASCII码；    e.key      键（使用率较高）
• 通常都是给文档添加键盘事件。