zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    oracle 各个版本下载地址
    学习笔记(三)--->《Java 8编程官方参考教程(第9版).pdf》:第十章到十二章学习笔记
    mysql5.7安装教程图解
    myeclipse2017 安装包及破解插件的下载
    MyEclipse 2017 ci6 安装反编译插件(本人自己摸索的方法,亲测可行)
    Myeclipse10.7安装git插件并将Java项目上传到码云(github)
    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结
    IntelliJ IDEA使用教程
    IntelliJ idea 中使用Git
    IntelliJ Idea 集成svn 和使用
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1662321.html
Copyright © 2011-2022 走看看