createEventObject 与 createEvent EDIT WATCH
时间:2022-06-14
本文章向大家介绍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);
}
- 大前端神器安利之 Puppeteer
- 传统数据库也能实现区块链存储
- golang(Go语言) byte/[]byte 与 二进制形式字符串 互转
- Sublime Text 最新注册码分享
- Lua table之弱引用
- 看吧,这就是现代化 PHP 该有的样子
- 从web图片裁剪出发:了解H5中的Blob
- Android子线程更新UI主线程方法之Handler
- Drawable.Bitmap.Canvas.Paint.Matrix
- 关于JSON.stringify和Unicode编码,需要注意的几点
- 用 PHP 的方式实现的各类算法合集
- Nginx 反向代理解决前后端联调跨域问题
- JavaScript对象length
- Go1.8.4和Go1.9.1版本发布
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 至少有K个重复字符的最长子串
- django这些查询技巧你会了吗?
- 手把手教你配置vim,小白也可以
- 【NPM库】- 0x02
- 最长有效括号
- 统计全为1的子矩形
- Android Camera1中的人脸检测
- Executors功能如此强大,ThreadPoolExecutor功不可没(一)
- dotNET:怎样处理程序中的异常(实战篇)?
- 二维背包问题
- 小程序系列之禁用视频快进
- springBoot整合Mq报错:JmsMessagingTemplate that could not be found
- TCP:测试小工具TCPing
- 对象实例化内存布局与访问定位 Krains 2020-08-14
- 基于Docker Compose部署分布式MinIO集群