`
flare
  • 浏览: 124709 次
  • 性别: Icon_minigender_1
  • 来自: 天尽头
社区版块
存档分类
最新评论

fireEvent用来干嘛呢

阅读更多
在DHTML开发中,微软在其DOM中为每个元素实现了一个fireEvent方法。我们知道HTML的事件onXXX可以由系统(IE环境)来管理和触发,也可以直接执行事件的handler,比如onclick,如果被赋予事件处理函数,我们可以用element.onclick()来执行事件处理函数。那么fireEvent用来干嘛呢?

在MSDN中fireEvent的描述很简单:Fires a specified event on the object.
bFired = object.fireEvent(sEvent [, oEventObject])

并且MSDN给出了一个使用fireEvent的示例:
<HTML>
<HEAD>
<SCRIPT>
function fnFireEvents()
{
div.innerText = "The cursor has moved over me!";
btn.fireEvent("onclick");
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Using the fireEvent method</h1>
By moving the cursor over the DIV below, the button is clicked.
<DIV ID="div" onmouseover="fnFireEvents();">
Mouse over this!
</DIV>
<BUTTON ID="btn" ONCLICK="this.innerText='I have been clicked!'">Button</BUTTON>
</BODY>
</HTML>

这个示例非常的简单,也完全说明了fireEvent的用法。不过这个示例有一点误导我们,从而让我们不容易发现frieEvent更有价值的使用方法。由于button的onclick事件被赋予语句:this.innerText = 'I have been clicked!',这里很容易误导我们,fireEvent产生的是执行了btn.onclick()的效果。嗯,确实是这个效果,但是意义却完全不同, btn.onclick()只是一个函数调用,它的执行必须依赖于用户对其赋值,否则btn.onclick为null,是不能执行 btn.onclick()的。而fireEvent('onclick')的效果,"等同于"鼠标在button元素上进行了点击。

由于IE的事件处理是bubble up方式,fireEvent(sEvent)就显得更加的有意义了,如果我们在一个table元素<table>中监听事件,比如 onclick,当点击不同的td做出不同的响应时。如果使用程序来模拟,只能使用fireEvent这种方式,示例如下:
<table border="1" onclick="alert(event.srcElement.innerText);">
<tr>
<td id="abc">abc</td>
<td id="def">def</td>
</tr>
</table>
<button onclick="abc.fireEvent('onclick')">
abc</button>
<button onclick="def.fireEvent('onclick')">
def</button>

使用abc.onclick()和def.onclick()将得到"Object doesn't support this property or method"异常。


abc def

abc def

知道了fireEvent的用法,那么我们用它来做什么呢?在开发具有复杂事件处理动作组件时。有时我们需要从程序中去触发一个本身因该鼠标或键盘触发的事件,比如在TreeView控件中,我们一般是使用鼠标点击来Expand&Collapse一个结点,如果我们要用程序代码来实现这个操作怎么办呢?当然直接执行事件处理函数是可以的,不过如果事件处理函数依赖于event变量中的状态值,那么就必须使用fireEvent方法。

原来我曾经说过,因该把事件处理的函数封装起来,便于直接调用。比如上面说到的TreeView节点的Expand和Collapse,我在TreeView控件中都是把它们封装成两个函数Expand和Collapse,在节点被点击时,执行:
OpIcon.onclick = function()
{
var objNode = this.Object;
if ( objNode.m_IsExpanded )
objNode.Collapse();
else
objNode.Expaned();
}

这样一来,在程序中控制Expand和Collapse也就是分别执行函数而已。不过后来发现既然DOM中有fireEvent方法,似乎我在"动态载入数据的无刷新TreeView控件(4)"中的某些想法也不是很必要了。

 

分享到:
评论

相关推荐

    IE的fireEvent方法概述及应用

    在示例代码中,当使用`fireEvent("onclick")`时,即使`id1`的`li`元素没有`onclick`事件,点击按钮依然能够触发`ul`的`onclick`事件,说明`fireEvent`会引发事件冒泡,即事件会从元素本身逐级向上层元素传播,直到...

    JavaScript之IE的fireEvent方法详细解析

    JavaScript中的`fireEvent`方法是Internet Explorer浏览器特有的一个事件触发函数,它允许开发者模拟用户对DOM元素的操作,比如点击、提交等。与标准的事件处理方式不同,`fireEvent`在某些情况下能触发事件冒泡,...

    vc2005开发ActiveX event步骤

    这里`FireEvent`函数用于实际触发事件,`eventidOnValueChanged`是上一步定义的事件ID,`EVENT_PARAM(VTS_NONE)`表示该事件没有参数传递。 ##### 4. 在控件实现文件中注册事件映射 最后,在控件实现文件(例如`XX...

    让Firefox支持event对象实现代码

    在IE中,`window.event`是一个全局变量,可以用来获取当前事件的信息,如事件类型、目标元素等。然而,Firefox并不支持`window.event`,而是将事件对象作为事件处理函数的第一个参数传递。 为了在Firefox中获取事件...

    兼容IE和FireFox的event(事件)的对象获得

    兼容IE和FireFox的event(事件)的对象获得,直接下载引用即可

    Firefox不支持click方法的解决

    else if(element.fireEvent) element.fireEvent('onclick'); else if(document.createEvent){ var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); element.dispatchEvent...

    Ray Fire:专门用来制作破碎效果的插件

    Ray Fire:专门用来制作破碎效果的插件

    jQuery源码分析之Event事件分析

    对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法。一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题。第三个问题就是如何得到domReady的状态。 6.1 event的包裹 浏览器的...

    event兼容调用(IE,Firefox,Chrome)

    ### event兼容调用详解——IE,Firefox,Chrome 在跨浏览器开发中,处理事件(event)的兼容性问题是一项常见的挑战。不同的浏览器对事件模型的支持程度不同,这导致了开发者在编写JavaScript代码时需要考虑多种...

    WCF发布-订阅(Pub/Sub)服务

    简单的WCF发布-订阅(Pub/Sub)服务的例子

    js触发onchange事件的方法说明

    js中onchange事件是在客户端改变输入控件的值,比如一...object.fireEvent()方法,使用方法如 object.fireEvent(‘onchange’),即可触发控件的onchange事件。 同理,js中使用fireEvent方法还可以触发其他的空间事件。

    ie与firefox下的event使用说明与详细区别

    在获取鼠标当前位置方面,IE浏览器使用`event.x`和`event.y`,而Firefox则使用`event.pageX`和`event.pageY`。为了确保兼容性,开发者通常会使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用...

    js 触发select onchange事件代码

    select 或text的onchange事件...直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的语句 document.getElementById(“province”).fireEvent(‘onchange’) 来实现,

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

    整理的比较全的event对像在ie与firefox浏览器中的区别

    在鼠标坐标方面,IE使用`event.x`和`event.y`来表示鼠标在当前元素内的位置,而Firefox提供了`event.pageX`和`event.pageY`,这两个属性包含鼠标相对于整个文档左上角的位置。通用的方法是使用`event.clientX`和`...

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异

    firefox组件fire_bug

    fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件fire_bug组件

    firefox 6.0 中文版

    firefox firefox firefox firefox firefox firefox firefox firefox firefox

Global site tag (gtag.js) - Google Analytics