事件流(含冒泡, 捕获,事件委托等)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34763438/article/details/77857541

什么是事件流

事件流是页面触发事件的执行的顺序.

事件流的分类

1. 冒泡型事件
   冒泡型事件是由具体的元素到不具体的元素,他是有IE创造的,现在所有浏览器都支持冒泡型事件.如一个页面中有一个div,那么,他的顺序就是div—> body—> html—> document
2. 捕获型事件
   捕获型事件是由不具体的元素到具体的元素,他是yo由网景创建的,由于老的浏览器不支持捕获型事件,所以推荐使用冒泡型事件.如一个页面中有一个div,那么,他的顺序就是 document—> html—> body—> div

我们使用addEventListener(事件,处理函数,false)来执行冒泡事件,
使用addEventListener(事件,处理函数,true)来执行冒泡事件.

如何阻止事件流

IE使用: obj.canceBubble = true
非IE使用: obj.stopPropagation();
那么为了兼容所有浏览器,我们就封装他,

function stopEvent(obj){
    if(obj.stopPropagation){
        obj.stopPropagation
    }else{
        obj.cancelBubble = true;
    }
}

执行顺序

当元素即绑定捕获型事件,又绑定冒泡型事件,则执行顺序是 : 捕获阶段 , 目标阶段, 冒泡阶段.

阻止浏览器默认右击菜单显示

document.oncontextmenu = function(){
    //your code
    return false;//关键句
}

阻止浏览器默认行为

非IE使用 : event.preventDefault();
IE使用 : event.returnValue = false;

为了更好兼容所有浏览器,这里要对其封装

function preventDefaultAction(){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

事件委托

什么是事件委托, 事件委托就是利用冒泡机制,将子元素事件委托给父元素执行

obj.addEventListener("click",function(ev){
    var e = ev || window.event;
    var target = e.target || e.srcElement;
    var className = target.className;//这里可以换成别的,只要target上有的
    //如果所有的点击事件是根据不同的className来操作的,那么可以向下面使用switch语句,若是根据各种属性来操作,那么只能使用if语句,或者对每一个属性写一个switch语句
    switch(className){
        case '':
            //you code
            break;
        case '':
            //you code
            break;
            ...
        default:
            //you code
            break;
    }
    //写多个if语句
    //if(target.className === "a1"){

    //}
    //if(target.nodeName === "A"){

    //}

    //写多个switch语句
    //var nodeName = target.nodeName;
    //switch(nodeName){
    //  case 'A':
            //you code
    //      break;
    //  case 'LI':
            //you code
    //      break;
            ...
    //  default:
            //you code
    //      break;
    //}
});