JavaScript DOM事件流，阻止事件冒泡，事件委托

事件流

事件流描述的是从页面中接受事件的顺序

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

DOM事件流分为三个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收。然后逐级向下传播到DOM最顶层节点的过程

• 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收过程

注意：

1.JS代码中只能执行捕获或者冒泡其中一个阶段

2.onclick和attachEvent只能得到冒泡阶段

3.addEventListener（type，listener[，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序

4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡

5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

事件对象

什么是事件对象

eventTarget.onclick = function(event) {}

eventTarget.addEventListener（‘click’，function（event）{}）

这个event就是事件对象，我们还喜欢的写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单解释：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

        var div = document.querySelector('div');
        div.onclick = function(e) {
            console.log(e);
        }
        div.addEventListener('click',function(e){
            console.log(e);
        })

1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看

2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键

4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e

5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

事件对象的常见属性和方法

e.target和this的区别

1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）

区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

 

        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 
                //谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
            })

兼容性解决办法

            //了解兼容性
            div.onclick = function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                console.log(target);

        }

跟 this 有个非常相似的属性 currentTarget  ie678不认识阻止默认行为

返回事件类型

        var div = document.querySelector('div');
        div.addEventListener('click',fn);
        div.addEventListener('mouseover',fn);
        div.addEventListener('mouseout',fn);
        function fn(e) {
            console.log(e.type);
        }

阻止默认行为(事件)让链接不跳转 或者让提交按钮不提交

        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();//dom标准
        })

传统注册方式

低版本ie678 returnValue 属性

e.returnValue;

我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点：return后面的代码不执行了，

而且只限于传统的注册方式

        a.onclick = function(e) {
            // 低版本ie678 returnValue 属性
            e.returnValue;
            return false;
            alert(11);//不再执行

阻止事件冒泡

阻止冒泡  dom 推荐的标准 stopPropagation()

    var son = document.querySelector('.son');
    son.addEventListener('click',function(e) {
        alert('son');
        e.stopPropagation();//stop 停止 Porpagation传播
        e.cancelBubble = ture;//非标准cancel 取消 bubble 泡泡
    },false);

事件委托

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置的每个子节点

事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点

        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })

禁止选中文字

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

禁止右键菜单

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