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

什么是事件流

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

事件流的分类

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;    //}});