JavaScript事件系统

事件JavaScript事件以流的形式存在，多个元素会同时响应一个事件。有时候这不是我们想要的，我们只需要一个特定的元素来响应我们的绑定事件。分类捕获事件(非IE)和气泡事件(所有浏览器都支持)。捕捉事件是从上到下，而气泡事件是从下到上。我就用一张图片直观的展示一下：。

泡泡事件在我们的工作中可能会经常遇到，但是如何实现捕捉事件呢？如果我们想在非IE浏览器中创建捕获事件，我们只需要将addEventListener的第三个参数设置为true。示例如下：link 。

ID为div1和div2的两个元素与捕获阶段的事件处理功能绑定在一起，所以：点击#div1(蓝色区域)时，“div1”要警惕；当单击#div2(黄色区域)时，“div1”应该首先被警告，然后“div2”应该被警告，因为在事件捕获阶段，事件从根元素#向下传播。泡泡事件示例：的复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/title冒泡事件/title脚本类型=' text/JavaScript ' var I=1；添加(stext，obj text){ document . getelementbyid(' console ')。innerhtml=stext '执行顺序：“I”br/“HR/”；I=I 1；//window . event . cancelubble=true；}/script/head body onclick=' Add '(' body事件触发器br /'，' body ')' div onclick=' Add '(' div事件触发器br/'，' div ')' p onclick=' Add '(' p事件触发器br/'，' p ')style=' background。单击/p/div div id=' console ' style=' border 3360 solid 1 px # ee0；背景# ffc/div/body/html从这个例子中，我们可以清楚地看到冒泡事件从目标元素p上升到body元素。以下功能与IE和其他浏览器兼容，防止事件冒泡。复制代码如下：函数stopBubble(e) {//如果提供一个事件对象，则是一个非IE浏览器If(e . stopperpagation)//因此支持W3C的stopPropagation()方法e . stopperpagation()；Else //否则，我们需要使用IE来取消事件冒泡窗口. window.event.cancelBubble=true} IE中没有stopPropagation方法，但我们可以使用window . event . cancel ubble来防止事件冒泡。除了以上四个函数之外，监听函数IE : attachEvent、disconnectevent都不是ie3360addeventlistener，removeEventListener也有一个比较常见的方法，就是document.getElmentById(元素Id)。onclick=function(){}事件对象。触发事件时，如何在监听函数的执行函数中获取事件对象？在IE中使用window.event.srcElement，在非IE浏览器中使用e.currentTarget:复制代码如下： BTN . onclick=ctdclickeevent；函数ctdclickeevent(e){ if(！--(1，])//IE { var readOnly=' readOnly '；var obj=window . event . srcelelement；}else{ //非IE var readonly=' readonlyvar obj=e.currentTarget} var id=obj.id.replace('btn_ '，' ')；如果(obj.value=='此项目更改为无续费'){ 0.} else {.}总价()；}