博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在什么时候才会用到fireEvent方法呢?
阅读量:6296 次
发布时间:2019-06-22

本文共 2097 字,大约阅读时间需要 6 分钟。

在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" οnmοuseοver="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" οnclick="alert(event.srcElement.innerText);">
    <tr>
        <td id="abc">abc</td>
        <td id="def">def</td>
    </tr>
</table>
<button οnclick="abc.fireEvent('onclick')">
    abc</button>
<button οnclick="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)"中的某些想法也不是很必要了。

转载地址:http://orlta.baihongyu.com/

你可能感兴趣的文章
写给0-3岁产品经理的12封信(第08篇)——产品运营能力
查看>>
ArcGIS Engine 符号自动化配置工具实现
查看>>
小程序 · 跳转带参数写法,兼容url的出错
查看>>
flutter error
查看>>
Flask框架从入门到精通之模型数据库配置(十一)
查看>>
10年重新出发
查看>>
2019年-年终总结
查看>>
聊聊elasticsearch的RoutingService
查看>>
让人抓头的Java并发(一) 轻松认识多线程
查看>>
从源码剖析useState的执行过程
查看>>
地包天如何矫正?
查看>>
中间件
查看>>
Android SharedPreferences
查看>>
css面试题
查看>>
Vue组建通信
查看>>
用CSS画一个带阴影的三角形
查看>>
前端Vue:函数式组件
查看>>
程鑫峰:1.26特朗.普力挺美元力挽狂澜,伦敦金行情分析
查看>>
safari下video标签无法播放视频的问题
查看>>
01 iOS中UISearchBar 如何更改背景颜色,如何去掉两条黑线
查看>>