IE浏览器中fireEvent与DOM.onclick()的行为差异解析

IE fireEvent方法概述

IE浏览器内置了fireEvent方法，其核心功能是触发指定元素的事件。起初我误以为它的行为与直接调用onclick()相同，直到近期编写JavaScript入门演示文稿时才意识到这种认知的偏差。这反映出我对JavaScript底层细节的掌握仍有不足。

基于实际测试，现对fireEvent的具体用法进行详细记录。该方法由IE提供，相关官方文档可参考MSDN链接：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

DOM.onclick()的行为限制

首先分析onclick()的行为，参考以下示例代码：

<ul onclick='alert(event.srcElement.innerHTML);'> <li id='id1'>i am one;</li> <li id='id2'>i am two;</li> <li id='id3'>i am three;</li> </ul> <button onclick='document.getElementById("id1").onclick();'>click me!</button>

在上述代码中，id为id1的li元素并未显式绑定onclick事件。当点击按钮时，脚本尝试调用document.getElementById("id1").onclick()，系统会报错提示“对象不支持此属性或方法”。这证明DOM对象的onclick属性仅在显式绑定事件后才能被调用。

若对上述代码进行如下修改：

<ul onclick='alert(event.srcElement.innerHTML);'> <li id='id1' onclick='alert(1);'>i am one;</li> <li id='id2'>i am two;</li> <li id='id3'>i am three;</li> </ul> <button onclick='document.getElementById("id1").onclick();'>click me!</button>

此时点击按钮，仅会触发id1元素自身的onclick事件，而父级ul的onclick事件并未被触发。这一现象表明，直接调用DOM.onclick()不会引发事件冒泡。

fireEvent()的冒泡特性

接下来考察fireEvent()，对比其与onclick()在触发机制上的异同，参考以下代码：

<ul onclick='alert(event.srcElement.innerHTML);'> <li id='id1'>i am one;</li> <li id='id2'>i am two;</li> <li id='id3'>i am three;</li> </ul> <button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>

点击按钮后，系统成功触发了ul的onclick事件。这说明fireEvent()会引发事件冒泡。此外，即使id1元素未绑定任何onclick事件，调用fireEvent("onclick")也不会报错。由此可见，IE中的fireEvent方法旨在模拟用户的真实鼠标点击行为，而非单纯执行绑定的onclick处理函数。

fireEvent与onclick的核心区别

总结fireEvent与onclick的主要区别：通过上述示例可以归纳出DOM的fireEvent与onclick（作为事件触发的代表）存在以下差异：

1. onclick属性要求DOM必须显式添加过onclick事件处理程序，否则调用时会抛出“对象不支持此属性或方法”的错误。2. onclick的直接调用不会触发IE的事件冒泡流程，而fireEvent()会触发冒泡，因此fireEvent更贴近用户真实的交互行为。3. 基于第二点，即使DOM元素没有绑定click事件，调用fireEvent()也不会报错，这进一步印证了其模拟真实用户行为的特性。最后可通过以下代码进行对比测试：

<ul onclick='alert(event.srcElement.innerHTML);'> <li id='id1' onclick='alert(1);'>i am one;</li> <li id='id2'>i am two;</li> <li id='id3'>i am three;</li> </ul> <button onclick='document.getElementById("id1").onclick();'>click me!</button> <button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>