注册事件

前面学习到注册事件方法如下

• <button onclick="alert("hi")">注册事件</button>
• btn.onclick=fuction(){}

但是这样注册事件有一个缺点，同一个元素不能注册两个事件，前面的事件会被后面的事件覆盖掉。

监听注册事件 addEventListener

evenTarget.addEventListener(type,listener[,useCapture])

• type :事件类型的字符串 'click'， 'mouseover' ,注意不带 on
• listener 事件处理函数
• useCapture,可选值 默认为false

实例:

        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('监听注册事件');
        });

使用这个方法，一个元素就可以加入不同事件了。IE9之前不支持。

删除事件 removeEventListener

如果我们采用btn.onclick=fuction(){}的方法，那么我们想要删除，其实只需要，btn.onclick=null就好了。

如果采用后面的方法

target.removeEventListener(type, listener[, options]);

• type，一个字符串，表示需要移除的事件类型，如 "click"。
• listener： 需要移除的函数名

当然如果前面你写的是匿名函数，就无法通过这个方法解绑了。

        var btn=document.querySelector('button');
        btn.addEventListener('click',fn);
		function fn(){
            alert('监听注册事件');
            //移除事件
		btn.removeEventListener('click',fn)
        }
		

dom 事件流

事件流就是 从页面接受事件的顺序；

事件发生时会在元素节点之间,按照特定的顺序传播，这个传播的过程就叫做事件流

如上图我们给div注册了个事件，当事件触发的时候并不是div直接执行事件函数的，而是经历如上图流程。

1. 捕获阶段：事件由页面元素接收，逐级向下，到具体的元素
2. 目标阶段： 目标元素执行阶段
3. 冒泡阶段：跟捕获相反，具体元素本身，逐级向上，到页面元素

比如div注册了个click事件，先从 document一步步捕获，找到谁是click的目标，看到document没有click事件就去找他的子元素html，发现html也没有，在一步一步找到div。这就好像事件click在被传播，所以才叫事件流。

另外，如果捕获，冒泡，同时存在，如图那么先走捕获，在走冒泡

开始论证

evenTarget.addEventListener(type,listener[,useCapture])，我前面对这个 第三个参数没有过多的介绍，其实放在这里才能说的清楚。

useCapture,可选值 默认为false

• 如果true，表示在走捕获阶段调用处理事件函数
• 默认，false，那么就表示冒泡了。

捕获阶段

根据前面粗略的讲解，我们可以大胆猜测，捕获阶段，父元素如果和子元素有相同的条件触发，那么父元素会比子元素先执行。

        var  son=document.querySelector('.son');
        var father= son.parentNode;
        son.addEventListener('click',function(){
            alert('子元素后执行');
        },true);
        father.addEventListener('click', function () {
                alert('父元素元素先执行');
            }, true);

事实的确如此。

冒泡阶段

那么就和前面的相反即可。父元素如果和子元素有相同的条件触发，那么子元素会比父元素先执行。

捕获冒泡同时存在

同时存在的话，那么先捕获后冒泡。

        var  son=document.querySelector('.son');
        var father= son.parentNode;
        son.addEventListener('click',function(){
            alert('子元素 ');
        },true);
        
        father.addEventListener('click', function () {
                alert('父元素 冒泡');
            }, false);
        father.addEventListener('click', function () {
                alert('父元素 捕获');
            }, true);

事件对象 event

我们的事件处理函数，也是有参数的,

btn.onclick=fuction(event){}，我们可以从event获取很多关于事件的信息，鼠标的坐标，按键的asc码等等。

当然只要事件处理函数，有了参数，我们就可以从中获取信息，不一定要event才可以，写作 e也可以。

万恶的ie 6 7 8版本是通过 只能写window.event，为了兼容性我们可以这样写

btn.onclick=fuction(e){ e=e||window.event;}通过逻辑短路来处理。

e.target

返回触发事件对象。

我们在这里要分开，this和target

this返回的是绑定事件的对象。

target 返回的触发对象。

比如如下情况

    <div>target
        <span>this</span>
    </div>
    <script>
        var div =document.querySelector('div');
        div.addEventListener('click',fn);
        function fn(e){
            console.log(e.target);
            console.log(this);
        }
    </script>

span是 div的子元素，当我们点击，span里的target 文字,

e.target返回的是span, this返回的是 div。

e.type

返回事件类型

比如 click,mouseover; 不带on!

preventDefault()

阻止默认的行为

我们可以通过这个方法，实现让链接不跳转

<a href="https://yingwiki.top">点我不会跳转</a>
var a=document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })

if(e&&e.stopPropagation)
    {
        e.stopPropagation();
    }else{
        //ie支持这样子的
        window.event.cancelBubble=true;
    }

    <ul>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
    </ul>

        var ul=document.querySelector('ul');
        ul.addEventListener('click',function(e){
            for(var i=0;i< ul.children.length;i++)
            {
                //还原其他li的背景颜色
                ul.children[i].style.backgroundColor='#fff';
            }
            e.target.style.backgroundColor='#999';
        });

document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        });

document.addEventListener('selectstart', function (e) {
                e.preventDefault();
            });