专栏首页游戏杂谈createEventObject 与 createEvent EDIT WATCH

createEventObject 与 createEvent EDIT WATCH

jQuery中有很好用的trigger来触发事件,但总不能写什么都去引入jQuery吧

一个简单的需求,实现类似IE下的fireEvent效果<要兼容其它主流浏览器>

关于这二个方法,没记得起来,然后就google了一把:

IE下:

createEventObject Method

语法:

oNewEvent = object.createEventObject( [oExistingEvent])
创建的事件对象,也可以取消冒泡、阻止默认事件。(cancelBubble、returnValue)

例子:

<html>
<body>
<script>
function OuterClick() {
    if(event.expando == "from_inner")
    {
        alert("Event actually fired by clicking on inner DIV!")
    }
    else
    {
        alert("Event fired by clicking on outer DIV!")
    }
}
function InnerClick() {
    var eventObj = document.createEventObject();
    // Set an expando property on the event object. This will be used by the 
    // event handler to determine what element was clicked on.
    eventObj.expando = "from_inner";
    parent.document.all.Outer.fireEvent("onclick",eventObj);
    event.cancelBubble = true;
}
</script>
<div id="Outer" onclick="OuterClick()" style="height:200;width:200;padding:50;background-color:mistyrose">
<div id="Inner" onclick="InnerClick()" style="height:100;width:100;padding:25;background-color:lavender"></div>
</div>
</body>
</html>

msdn地址:http://msdn.microsoft.com/en-us/library/ms536390(VS.85).aspx

FF遵循并实现了W3C对DOM 2、DOM 3的事件定义:

语法:

var event = document.createEvent(type);

例子:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

选创建事件对象,然后派发此事件对象,派发的返回值可以检测事件处理句柄是否阻止也默认事件(返回false则被阻止)

访问MDC关于createEvent的说明:https://developer.mozilla.org/en/DOM/document.createEvent

回到最初的起点,如果只是想实现类似fireEvent的方法:

var elem = xxx;

if (document.createEventObject && elem.fireEvent) {
	elem.fireEvent('onclick');
} else if (document.createEvent){
	var evt = document.createEvent('MouseEvents');
	evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	elem.dispatchEvent(evt);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript的类型错误:Illegal invocation

    昨一看好像也没什么问题,在IE6~8下运行也没有任何的问题,可是在其它浏览器下就报错了,报了这样一个错:

    meteoric
  • Flex + XML的图片轮显

    逻辑部分与JavaScript有些类似,在解析XML时,单独写了一个as类来处理,btn的外观使用了CSS进行控制,资源全部放在名为assets文件夹目录下,工...

    meteoric
  • 函数声明与函数表达式

    函数声明:直接声明一个函数 function fnName() {};function声明必须有方法名,而出现在表达式里的方法名都会被忽略。

    meteoric
  • javascript入门

    周小董
  • Unity 基于Cinemachine计算透视摄像机在地图中的移动范围

    https://www.cnblogs.com/koshio0219/p/11820654.html

    汐夜koshio
  • JavaScript 判断输入的值为数字

    使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :

    Devops海洋的渔夫
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! debounce 当监听一些scroll,resize事...

    IMWeb前端团队
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下!

    IMWeb前端团队
  • PHP 面向对象类的理解

    ZY_FlyWay
  • [JavaScript]自执行函数

    最近在接触mui的时候,遇到了一段代码: 1 (function($, doc) { 2 $.init({ 3 ...

    CN_Simo

扫码关注云+社区

领取腾讯云代金券