事件传播机制、阻止传播、取消默认事件、事件代理

1、事件传播机制

事件流描述的是从页面中接收事件的顺序,比如有一个嵌套的div,我们点击了内层div,这时这个click事件是内层先触发还是外层先触发呢,目前事件的传播机制主要有三种:
1、冒泡事件: 事件开始时,是由目标元素最先触发,然后逐级像上传播,直到根节点
2、捕获事件:捕获事件和冒泡事件相反,由根节点先触发事件,然后逐级向内传播,直到目标元素
3、DOM事件:DOM2事件规定事件流分为三个阶段:首先为捕获阶段,为截取事件提供机会。然后是实际目标接受阶段,最后是冒泡阶段

举个栗子:操作一下可以更直观的理解


 
container
box
target
冒泡事件:
function $(selector){
     return document.querySelector(selector)
}

 $(".container").addEventListener('click', function(e){
            console.log('container....冒泡阶段')
        },false)

        $('.box').addEventListener('click',function(e){
            console.log('box....冒泡阶段')
        },false)

        $('.target').addEventListener('click',function(e){
            console.log('target....冒泡阶段')
        },false)
冒泡阶段.jpg
— 通过例子可以看出冒泡阶段是由内部目标元素先触发事件,然后逐级像外传播的,直到根元素
捕获事件:
$(".container").addEventListener('click', function(e){
            console.log('container....捕获阶段')
        },true)

        $('.box').addEventListener('click',function(e){
            console.log('box....捕获阶段')
        },true)

        $('.target').addEventListener('click',function(e){
            console.log('target....捕获阶段')
        },true)
捕获阶段.jpg
— 捕获阶段是外部根元素先触发事件,然后像内逐级传播,最后到达目标元素

2、阻止传播

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作:
1、addEventListener
2、removeEventListener

所有的DOM节点都包含这两个方法,并且它们都接受三个参数:
1、事件类型
2、事件处理方法
3、布尔参数,如果是true表示在捕获阶段调用事件处理程序,如果是false,则是在事件冒泡阶段处理

3、取消默认事件

冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

阻止事件冒泡与捕获:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true。stopPropagation作为事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候,由于事件冒泡,body的click事件也会触发,但是调用这句后,事件会停止传播

取消默认事件的方法:w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;
要阻止事件的默认行为,可以使用preventDefault()方法,比如我们可以阻止链接导航这一默认行为

document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

4、事件代理

事件代理又称为“事件委托”。意思是把原本需要绑定在子元素上的事件委托给父元素,让父元素负责监听的职务,委托代理的原理是DOM元素的事件冒泡。

假如有这样一个HTML片段

    
box1
box2
box3

点击每个class为box的元素,都会在控制台打印出他们的内容。
点击id为add的按钮,可以增加一个class=box的div元素。同样点击他们可以打印出他们的内容
我们常常会这样写

       function $(selector){
            return document.querySelector(selector)
        }
        function $$(selector){
            return document.querySelectorAll(selector)
        }

        $$('.box').forEach(function(val){
            val.addEventListener('click',function(){
                console.log(this.innerText)
            })
        })

        var i= 4
        $('#add').onclick=function(){
            var box=document.createElement('div')
            box.innerText='box' + (i++)
            box.classList.add('box')
            $('.container').appendChild(box)
        }

打印结果:


例图.jpg

会发现只有box1,box2,box3可以在控制台打印出来,新建的box4,box5却不行。因为最开始页面上只有3个class为box的元素,所以js只为这三个元素绑定了click事件,后面我们add新的div需要重新添加click事件才会有效果,这就很头疼了。这个时候我们就需要事件委托了:

        function $(selector){
            return document.querySelector(selector)
        }
        function $$(selector){
            return document.querySelectorAll(selector)
        }

        var i= 4
        $('#add').onclick=function(){
            var box=document.createElement('div')
            box.innerText='box' + (i++)
            box.classList.add('box')
            $('.container').appendChild(box)
        }

        $('.container').onclick=function(e){
            if(e.target.classList.contains('box')){
                console.log(e.target.innerText)
            }
        }

打印结果:


委托代理.jpg

这样就再也不用担心新建元素内容出不来喽~~~

你可能感兴趣的:(事件传播机制、阻止传播、取消默认事件、事件代理)