web学习笔记（二十四）_web大师课笔记-CSDN博客

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

2.事件对象和事件委托

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

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

        }

e.cancelBubble	阻止冒泡属性，取值为true或false，所有版本都支持
e.stopPropagation()	阻止冒泡的方法，只支持ie9以上版本
clientX和clientY	鼠标在可视区域的坐标（不包含滚动条）
pageX和pageY	鼠标在页面的坐标（包含滚动条）
e.screenX和e.screenY	鼠标在屏幕中的位置（当前页面，包含地址栏和标签栏）
e.target	返回触发事件的对象
e.srcElement	也是返回触发事件的对象
e.type	返回事件的类型
e.returnValue	阻止默认事件的属性，比如不让链接跳转
e.preventDefault()	阻止默认事件的方法，比如不让链接跳转（比较万能）

补充阻止默认动作的方法：

（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();
        }

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

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

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

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

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

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

onkeypress	按下（使用率较低，功能键（ctrl alt shift）不识别，区分大小写）
onkeydown	按下（不区分大小写）
onkeyup	松开（不区分大小写）