理解javascript中的DOM事件

首先，本文不讨论繁琐的细节，但考虑到读者的精神感受，并以积极的态度，这里将举例说明。

为了理解DOM事件，让我们以一个简单的点击事件为例。希望大家能从这个例子中学习。我们最初点击页面，就像下面简单的操作一样。首先定义一个div id='weiyuzhou '微宇宙/div这样的块，然后在script type=' text/JavaScript '/script中实现id为weiyuzhou的click事件，如下代码所示：

var wyz=document . getelementbyid(' weiyuzhou ')；Wyz。onclick=function(){ confirm(arguments . length)}只有以上步骤都做好了，我们才能继续往下走，然后我们会在IE浏览器(低版本)看到一个弹出的0，准确的说是IE8(包括IE8)下面一个弹出的0，否则一个弹出的1。然后我在火狐浏览器中看到了pop 1。也就是说IE8以下事件的触发不在函数的范围内，也就是说IE8以下事件的触发发生在全局范围内，这里有一个悬念。但是，可以肯定的是，IE8以下事件的方法没有这个事件参数，这意味着参数的长度为0，如下图5所示：

因此，我们看到火狐浏览器窗口弹出1，表示该事件存在于函数内部，再次证明该方法的内部数组参数长度为1，是一个可枚举变量，也可以说是可写的，如下图所示。

如果还是不明白原理，那就看看《web前端开发修炼之道》书的第169页，再回头看看这里的文章总结，可能会让你对书的内容有更深的理解。

接下来，我们该怎么办？我们当然不能让IE和火狐返回的事件输出不一样，那么如何让IE和火狐下的弹出内容一样呢？

链接上一段，在下面的click函数里面设置一个参数，参数名为E，然后在IE和火狐浏览器下同时触发click事件。我们可以看到E是火狐下的[objectMouseEvent]，IE8报告了一个错误，弹出的错误消息是未定义的。这个时候，你要问我错在哪里。回到刚才那句话，‘这里留个悬念’，分析一下IE8以下的浏览器事件是否发生在全局范围内。如图5-02所示，有一个全局全局对象，所以我们可以搜索全局。global的继承方法有一个event event事件，发现IE8的独占事件方法窗口继承了该事件。因此，我们将此参数e设置为window.event进行调试。目前我们看到IE8下返回了一个事件[objectevent]，如图所示。

你一定注意到了IE8和firefox下对话框的事件返回值是不同的。IE8的对话框是【objectevent】，火狐的对话框是【objectMouseEvent】。如何才能让IE8和firefox下的返回值相同？

看到这，你心里有点郁闷。挖了这么久的坑，怎么还没看到水流出来了？别急，话题才刚刚开始。我们不聊了，继续围绕话题分析。通过刚才的返回值，我们继续用断点法寻找可以实现IE和火狐返回值的共同点。

通过上面的分析，我们发现firefox下的event有我们需要调用的方法名，当然我们发现IE8下的srcElement也有我们需要调用的方法名，所以，呵呵！看到这里，你的心是不是有点激动？一步一步来，不难发现。回到主题，现在我们声明一个变量vare _ child=e . srcelement | | e . target；然后，我们看到IE8和firefox浏览器上的对话框信息是[objecthtml dividelement]，如图所示。

现在我们解决了不同浏览器返回值不同的问题，也就是说解决了兼容性的问题，这只是冰山一角。

接下来，我们将解决实现窗口的容器触发事件，这主要是基于对上述结构的分析。

有了上面的基础，下面的内容就比上面简单一点了。

或者以上一页的区块为例。现在我继续向区块divid=' weiyuzhou '微宇宙/div添加一个子容器。这个子容器是内联元素spand=' coz ' koringz/span，id名为coz。然后，我还向这个元素添加了一个点击事件代码。

当我分别点击IE8和firefox下的容器内容时，出现了一个奇怪的情况。当我点击火狐浏览器的窗口时，我点击了中文文本内容，弹出了一个名为“微宇宙”的对话框。当我再次点击koringz的时候，发现弹出的是二级对话框，弹出的内容都是‘koringz’，这是因为我点击子容器的时候，触发了上层的点击行为。如何解决点击koringz弹出二级对话框的问题？

所以firefox能够清除冒泡事件的是event下的stopPropagation，所以我们在第二个click event函数的代码块后添加了一行代码e . stopperpagation()；然后点击koringz，发现“koringz”弹出一次。如图所示。

接下来我们在IE8下进行了测试，发现在IE8的浏览器中点击时会弹出两次。IE8中停止冒泡的解决方案是cacelBubble，我们只需要将cacelBubble设置为true。因为IE8下的global中包含的事件属性cacelBubble不是一个方法，而是一个输出布尔值的对象，这与firefox不同，只是firefox将这个事件封装为一个方法。好了，现在我们在第二次点击事件代码块后，添加一行代码e.cancelBubble=true然后在IE8浏览器下测试，然后点击koringz发现又弹出来了。如图所示。

注意以上停止冒泡事件的代码可以根据不同的浏览器分别编写，以及如何分别编写。当我们在IE8浏览器下查看文档时，我们发现有一个对象all，但是firefox中没有这样的属性all，这意味着document.all是IE8版本下唯一的属性。通过它，我们可以区分浏览器冒泡事件。

到目前为止，我们已经解决了窗口冒泡事件。接下来，我们要解决一个事件由多人定义，并且覆盖了原有功能的问题。也可能是某公司前员工添加了这个事件，然后新员工接手项目后添加修改了这个事件，涵盖了原事件执行带来的问题。也就是说，将这种事件多次添加到当前id中不会覆盖该事件的原始函数执行。

firefox下的窗口包含addeventlistener的方法(type，listener，use capture)，然后我们在script type=' text/JavaScript '/script中定义这个监控事件dome element . addevent listener(' click '，function (e) {confirm (e' e')}，false)；然后在火狐浏览器中点击内容弹出两次，最后一次弹出的是[objectMouseEvent]e，后面是一个e，我特意加上来区分的。如图所示。

然后在IE8下测试后发现addEventListener是错误的，但是我们看到window下有这样的方法(原来IE9以上可以支持这样的方法)，IE8也有一个attachEvent(event，pdisp)，所以我们设置了监听事件wyz.attachEvent('onclick '，Function(e){ confirm(e ' e ' })，注意：事件是' onclick '，然后在IE8下点击发现可以弹出两次，最后一次[对象鼠标事件] e .此时，on('

综上所述，我们解决了DOM事件的兼容性、冒泡性和重用性。