浏览器事件分析

JavaScript、浏览器和事件的关系JavaScript程序采用异步事件驱动编程（Event-drivenprogramming）模型，维基百科解释为：事件驱动编程（Event-drivenprogramming））是一种计算机编程模型。该模型的程序运行过程是由用户动作（如鼠标按键、键盘按键动作）或来自其他程序的消息决定的。与批处理编程（batchprogramming）相比，程序运行的过程是由程序员决定的。批处理编程是初级编程教学课程中的一种方式。然而，事件驱动编程的设计模型是在交互式程序的情况下诞生的。进入。因为用户的行为是不确定的。这种场景是传统的同步编程模型无法解决的，因为你不能等到用户完成操作之后再执行下面的代码。所以javascript中使用了异步事件，也就是说：js中的事件是异步执行的。事件驱动程序模型的基本实现原理基本上都是使用事件循环（EventLoop），涉及到浏览器事件模型和回调原理。在JavaScriptDOM和BOM模型中，setTimeout和XMLHTTPRequest等API也是异步的，不是JavaScript语言本身的原生API。事件绑定的方法事件绑定有3种方法：直接在DOM元素上内联绑定，通过设置on+eventType来绑定事件处理器。例如：clickme这种方法有两个缺点：事件处理程序和HTML结构混合在一起，不符合到MVX规范。为了将内容、表现和行为分开，我们应该避免这种写作风格。这样写的代码被判断为全局作用域，可能会引起命名冲突，导致不可预见的严重后果。直接在DOM元素上重写事件回调函数在DOM元素API上使用on+eventType属性varel=getElementById('button');//button是一个元素el.onclick=function(){alert('buttonclicked.')};el.onclick=function(){alert('ButtonClicked.')};//实际弹出-upof'ButtonClicked.',functionisoverwritten这种方法也有一个缺点：绑定后的函数会覆盖之前的函数。比如我们注册一个window.onload事件，它可能会覆盖某个库中已有的事件函数。当然这个可以有解决办法：functionaddEvent(element,EventName,fun){//EventName='on'+eventTypevaroldFun=element[EventName];if(typeofoldFun!=='function'){element[EventName]=fun;}else{element[EventName]=function(){oldFun();乐趣（）;};}}addEvent(window,"onload",function(){alert('onload1')});addEvent(window,"onload",function(){alert('onload2')});当然，一般情况下，使用DOMReady就足够了，因为JavaScript可以在加载DOM后执行标准的绑定方法，绑定方法有两个，addEventListener和attachEvent。前者是标准浏览器支持的API，后者是IE8以下浏览器支持的API//比如给一个按钮注册一个点击事件varel=getElementById('button');//button是一个元素if(el.addEventLister){el.addEventListener("click",function(e){alert("buttonclicked.");},false);}if(el.attachEvent){el.attachEvent("onclick",function(e){alert("buttonclicked.");});}需要注意的是：addEventLister的第一个参数事件类型不带on前缀，而attachEvent需要Add在前缀上。addEventLister中事件回调函数中的this指向事件元素target本身，attachEvent中事件回调函数中的this指向window。addEventLister有第三个参数，true表示事件在捕获阶段工作，false在冒泡阶段（默认值：false）。而attachEvent只能在冒泡阶段起作用。在chrome中运行以下代码：clickme点击后弹窗顺序为：3->4->5->1这里，第四个这行代码覆盖了内联的Onclick定义，如果注释掉这一行，则输入顺序为：2->4->5->1，addEventListeners之间不会发生覆盖。解绑事件对于上面的前两种方法，解绑事件只需要将对应的事件函数设置为null即可：varel=document.getElementById('button');el.onclick=null;对于上面的第三种方法，使用removeListen()方法。在IE8中，相应地使用detachEvent()。注意，它们与上述注册方式一一对应，不能混用。//这是错误码，无法实现事件移除//创建事件varel=document.getElementById('button');//按钮是一个<按钮>元素if(el.addEventLister){el.addEventListener("click",function(e){alert("buttonclicked.");},false);}if(el.attachEvent){el.attachEvent("onclick",function(e){alert("buttonclicked.");});}//尝试移除这个事件if(el.removeEventLister){el.addEventListener("click",function(e){alert("点击按钮。");},false);}if(el.detachEvent){el.datachEvent("onclick",function(e){alert("点击按钮。");});}//移除失败上面的错误是当事件函数这样定义的时候，虽然看起来一模一样，但是在内存中的地址不同。这样计算机就不会认为unbound和bound函数是同一个函数，自然也就不会正确撤销。应该这样写：//Createaneventvarel=document.getElementById('button');//button是一个元素varhandler=function(e){alert("buttonclicked.");};if(el.addEventLister){el.addEventListener("click",handler,false);}if(el.attachEvent){el.attachEvent("onclick",handler);}//尝试移除这个事件if(el.removeEventLister){el.addEventListener("click",handler,false);}if(el.detachEvent){el.datachEvent("onclick",handler);}//在说addEventListener之前去掉成功事件的捕获和冒泡addEventListener函数的第三个参数是捕获和冒泡的意思，这点很重要！我自己这样描述它们的定义：冒泡：在某个元素上触发的事件会从内到外依次触发该元素的父元素上的事件，直到window元素。捕获：当某个元素触发事件时，会在该元素每一层的所有子元素上触发该事件，并逐层向内，直到所有元素都不再有子元素。如下图（注：图片来自百度搜索）事件返回函数参数是一个事件对象，包含了很多事件属性和方法。例如，我们可以通过以下方式来防止冒泡和默认事件：//本例只写处理函数functionhandler(event){event=event||窗口事件；//防止冒泡if(event.stopPropagation){event.stopPropagation();//标准方法}else{event.cancelBubble=true;//IE8}//组织默认事件if(event.perventDefault){event.perventDefault();//标准方法}else{event.returnValue=false;//IE8}}其次，普通注册事件只能防止默认事件，不能防止冒泡element=document.getElemenById("submit");element.onclick=function(e){/*...*/returnfalse;//通过返回false，防止冒泡}事件对象事件函数有一个参数是事件对象，它包含了事件发生的所有信息。比如键盘时间会包括点击什么按钮，包括什么组合键等等，鼠标事件会包括一系列屏幕中的各种坐标和点击类型，甚至是拖放等等。当然，它还会包含很多DOM信息，比如点击了什么元素，拖进了什么元素，事件的当前状态等等。这里需要强调一下事件兼容性：document.addEventListener('click',function(event){event=event||window.event;//对象注册到windowconsole.log(event);//可以输出事件对象看看，有很多很多属性vartarget=event.target||event.srcElement;//前者是标准的事件目标，后者是IE的事件目标},false);关于鼠标事件坐标，可以看另一篇博客：元素的距离属性事件触发和鼠标事件除了用户操作，我们也可以写代码主动触发事件。以ele元素的点击事件为例：ele.click();//触发ele元素上的Click事件代理有时候我们需要给一个不存在的DOM元素绑定一个事件，比如用户动态添加的元素，或者Ajax请求完成后渲染的DOM节点。一般绑定事件的逻辑会在渲染之前执行，但是绑定的时候找不到元素，所以无法成功。为了解决这个问题，我们通常使用事件代理/委托（EventDelegate）。而且一般来说，使用事件代理的性能会比单独绑定事件高很多。让我们看一个例子。传统注册事件方式在内容较多时效率低下，不支持动态添加元素

item-1

item-2

item-3

item-4

item-5

事件委托注册方式，无论内容多少，只注册一次，支持动态添加元素：

item-1

item-2

li>

item-3

item-4

item-5

事件封装很明显，处理浏览器兼容性太麻烦了，所以这里我们把事件注册相关函数封装在js中作为排序//都使用冒泡事件模型varmyEventUtil={//添加事件函数addEvent:function(ele,event,func){vartarget=event.target||事件源元素；如果（ele.addEventListener）{ele.addEventListener（事件，函数，假）；}elseif(ele.attachEvent){ele.attachEvent('on'+event,func);//thisinfunciswindow}else{ele['on'+event]=func;//覆盖会发生}},//删除事件函数delEvent:function(ele,event,func){if(ele.removeEventListener){ele.removeEventListener(event,func,false);}elseif(ele.detachEvent){ele.detachEvent('on'+event,func);}else{ele['on'+event]=null;}},//获取触发事件的源DOM元素getSrcElement:function(event){returnevent.target||事件源元素；},//获取事件类型getType:function(event){returnevent.type;},//获取事件getEvent:function(event){返回事件||窗口事件；},//防止事件冒泡stopPropagation:function(event){if(event.stopPropagation){event.stopPropagation();}else{event.cancelBuble=false;}},//禁用默认行为preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}};jQuery中的事件需要注意的是：jQuery中的事件都是工作在冒泡阶段的，只有在冒泡阶段才能工作，注册和取消事件。方法一：//不会被覆盖，但是不利于取消，并且不能动态操作事件这里$("#button").click(function(){//注册一个点击事件，当然你也可以用其他事件名的函数注册其他事件console.log("clicked");});方法2//不会发生覆盖，有利于释放，不是动态操作事件这里//注册一个事件$("#button").bind("click",function(){//注册一个点击事件，当然你可以用其他事件名的函数注册其他事件console.log("clicked");});//当然也可以这样写这，为事件指定命名空间$(document).bind('click.handler1',function(){console.log(1);})$(document).bind('click.handler2',function(){console.log(2);})//释放一个事件$("#button").unbind(".handler1");//释放元素上handler1命名空间中的事件$("#button").unbind('click.handler2');//释放元素上的click.handler2事件$("#button").unbind('click');//释放元素上的所有点击事件$("#button").unbind()//释放元素上的所有事件//bind()方法也接受3个参数Form，这里不再赘述，如果有兴趣的可以自己查相关资料方法3://不会覆盖，但不利于释放，可以动态操作事件，靠事件冒泡//注册事件$(document).delegate(".item","click",function(){控制台.log(this.innerHTML);});//第一个是选择器，第二个是事件类型，第三个是事件函数//移除事件$(document).undelegate(".item","click",handler);//移除元素上的指定事件$(document).undelegate(".item","click");//移除元素上的所有点击事件$(document).undelegate(".item");//移除元素上的所有事件方法4：//不会被覆盖，但不利于释放，可以动态操作事件，不依赖于事件冒泡//注册事件#(".item")。live("click",function(){console.log(this.innerHTML);})//第一个参数为事件类型，第二个参数为事件函数//移除事件$(".item").die（“点击”，处理程序）；//移除元素上的指定点击事件$(".item").die("click");//去除元素上的所有点击事件两种简化方法//hover方法$("#button").hover(function(){//鼠标移入时的动作，不冒泡},function(){//鼠标移出时的动作，不冒泡});//切换方法$("#button").toggle(function(){//第一次点击时的动作},function(){//第二次点击时的动作},.../*可以放置多个函数,依次响应*/);eventtrigger//不能触发addEventListener和attachEvent//主动触发一个事件$("#button").trigger("click");//触发所有点击事件$("#button").trigger("click.handler1");//触发所有click.handler1事件$("#button".trigger(".handler1");//触发handler1命名空间中的所有事件$("#button").trigger("click!");//触发所有没有命名空间的点击事件$("#button").trigger(event);//触发与该元素上的event事件相同的事件$("#button").trigger({type:"click",sync:true});//触发点击事件,同步