Ruby's Louvre

每天学习一点点算法

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

fireEvent2

在jQuery中有一个trigger的方法,用于主动式激发事件。这与我们给一个元素绑定了事件后然后触发事件有很大区别。假如我们的事件系统是基于代理的,所有事件都是存于缓存体中,点击某一个元素,然后通过冒泡把此元素的信息传递到全局变量,我们可以通过其target获取事件源(也就是我们刚才的点击的元素),为了放便,我们也应该预先为每一个元素设定一个uuid。在添加事件时,我们把元素的uuid,事件类型,绑定函数一并放进缓存体中。这时我们就可以通过元素的uuid与事件类型找回绑定函数,执行绑定函数。但这不是fireEvent。fireEvent,我们执行一函数,让它调用页面上某个元素的某某事件。

我们先看一下火狐下的fireEvent吧。

createEvent的相关说明,见火狐官网

在Prototype.js淘到如下一段代码:

function fireEvent(element,event){
       if (document.createEventObject){
         // dispatch for IE
         var evt = document.createEventObject();
         return element.fireEvent('on'+event,evt)
       }
       else{
         // dispatch for firefox + others
         var evt = document.createEvent("HTMLEvents");
         evt.initEvent(event, true, true ); // event type,bubbling,cancelable
         return !element.dispatchEvent(evt);
       }
     }

不过它还是要求事件绑定在元素上,好像对我的事件系统没有什么帮助……

相关链接:链接一链接二

<!DOCTYPE HTML>
<html>
    <head>
        <title>IE fireEvent</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function log(s){
                window.console && console.log(s)
            }
            window.onload = function(){
                var a = document.getElementById("span");
                var div  = document.getElementById("div2");
                div.onclick = function(e){
                    log("div2")
                    if(e){
                        e.stopPropagation()
                    }else{
                        window.event.cancelBubble = true;
                    }
                }
                a.click();
            }
 
        </script>
    </head>
    <body onclick="log('body')">
        <div id="div2">
            <div onclick="log('div');" >
                <span  onclick="log('span')" id="span">span</span>
            </div>
        </div>
    </body>
</html>

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(1340)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示