在什么时候才会用到fireEvent方法呢?

luweifeng1983

浏览: 1229745 次
性别:
来自: 深圳

最近访客更多访客>>

jackzou

huanggua12353719

zhutiehan

flyelf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS应用

 在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"异常。


    知道了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)"中的某些想法也不是很必要了。

分享到：

ireport 的一些技巧 | Window.ShowModalDialog使用手册

2011-10-14 17:28
浏览 1014
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

在什么时候才会用到fireEvent方法呢?

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

在什么时候才会用到fireEvent方法呢?

评论

发表评论

相关推荐

Cookie相关操作

JS回车实现Tab功能

javascript的focus函数如何定位到textarea指定地方

模式窗口window.showModalDialog()的用法

JavaScript判断浏览器类型及版本

JQuery基础

JQuery 随机生成密码

JS生成随机密码

get提交中文后乱码的问题的解决

利用javascript实现web页面刷新的方法

onkeyup,onkeydown,onkeypress

JS事件处理相关应用，srcElement

转：JQuery Ajax 仿google suggest 自动补全功能 支持中文（jsp / Servlet）

JS控制checkbox

提交和设置表单的值

Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

JS对话框的总结

JS类型转換parseInt应注意的问题

JAVASCRIPT应用篇（1）－－动态给对象添加属性

JAVASCRIPT应用篇（2）－－完整的Prototype框架学习

最近访客更多访客>>

转：JQuery Ajax 仿google suggest 自动补全功能支持中文（jsp / Servlet）