通用triggerEvent方法
假设有一个id为testA的a元素,然后有以下代码(jquery已存在):
$(document).ready(function(){ $('#testA').on('testEvent', function(e,data1,data2,data3){
console.log(e,data1,data2,data3);
}); var ba = document.getElementById('testA');
ba.addEventListener('testEvent', function(e){
console.log(e);
}); });
即,用两种方法监听一个自定义事件:testEvent,再看看如何触发testEvent事件:
document.addEventListener('click', function(e){
$('#testA').trigger('testEvent', [2,3,4]);
});
实际上只有用on监听的才能起作用,就是说用jquery的方法trigger来发事件,就只能用jquery的方法on[或者其他.click(handler)之类的]来监听事件,而用js原生的addEventListener方法是不行的。
为解决上面的问题,我们可以这样:
var evt = new Event('testEvent');
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);
如果要带上自定义数据,可以这样:
var evt = new CustomEvent('testEvent',{detail:[2,3,4],a:1,b:3});
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);
然后在事件处理函数中,可以通过event.detail来访问需要的数据,但event对象里面没有a,b属性,此处不清楚内部原因,是不是只有一个detail属性可用也不得而知。更多的说明可以看这里:https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent
上面的方法在firefox,chrome上可行,但IE8及以下版本浏览器不可行,下面来处理IE的问题。
IE8发事件函数用的是fireEvent,创建事件对象用的是document.createEventObject(),看下面的代码:
var evt = document.createEventObject();
evt.x = 100;
evt.y = 200;
evt.button = 1;
evt.z = 34;
ba.fireEvent('onclick', evt);
注意,我把testEvent换成了onclick,因为IE8不支持自定义事件。
接下来实现通用的发事件方法,如果要兼容IE8,那么就不能发送自定义事件:
function triggerEvent(element,eventType){
var e;
if(element.dispatchEvent){//正常情况
e = new Event(eventType);
element.dispatchEvent(e);
}else if(element.fireEvent){//IE
e = document.createEventObject();
e.button = 1;
element.fireEvent('on'+eventType,e);
}else if(element['on'+eventType]){
element['on'+eventType].call();
}
}
上面的方法,如果在IE8及以下版本中运行是无法发送自定义事件的。如果允许用jquery的trigger方法,还是用jquery比较方便。
通用triggerEvent方法的更多相关文章
- WebForm和WinForm取当前根目录的通用的方法[转载]
转自:WebForm和WinForm取当前根目录的通用的方法 某些环境下用 System.Web.HttpContext.Current.Server.MapPath 取不到目录. 可以用下面两个方法 ...
- Entity Framework增删改之通用精简方法
用EF用了好长一段时间了,从EF4.0的版本开始接触,感觉这个ORM不能说性能是最好的,但是我个人感觉功能实现以及和mvc的结合还是一个不错的企业级网站的解决方案,在此写个简易的通用扩展方法来方便大家 ...
- Java高效编程之二【对所有对象都通用的方法】
对于所有对象都通用的方法,即Object类的所有非final方法(equals.hashCode.toString.clone和finalize)都有明确的通用约定,都是为了要被改写(override ...
- [Effective Java]第三章 对所有对象都通用的方法
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- MVC LINQ中用封装的TSQL通用更新方法
把TSQL拿出来,做了一个封装,适用的所有表,更新有两种,普通更新和记数更新 看代码:这两个方法是写在DAL里的数据操作基类里的,只有它的子类可以用它,所以用protected做为限制 /// < ...
- 更新xcode后插件失效问题——不针对特定版本的通用解决方法
一.Xcode更新后插件失效的原理 1.每次更新Xcode后插件都会失效,其实插件都还在这个目录好好的躺着呢: ~/Library/Application Support/Developer/Shar ...
- C#导出数据到Excel通用的方法类
导出数据到Excel通用的方法类,请应对需求自行修改. 资源下载列表 using System.Data; using System.IO; namespace IM.Common.Tools { p ...
- 编写高质量代码:改善Java程序的151个建议(第一章:JAVA开发中通用的方法和准则)
编写高质量代码:改善Java程序的151个建议(第一章:JAVA开发中通用的方法和准则) 目录 建议1: 不要在常量和变量中出现易混淆的字母 建议2: 莫让常量蜕变成变量 建议3: 三元操作符的类型务 ...
- ASP.NET MVC验证框架中关于属性标记的通用扩展方法
http://www.cnblogs.com/wlb/archive/2009/12/01/1614209.html 之前写过一篇文章<ASP.NET MVC中的验证>,唯一的遗憾就是在使 ...
随机推荐
- iOS开发手记-仿QQ音乐播放器动态歌词的实现
最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...
- [转载]Apple Watch 开发详解
Apple Watch 开发详解 Apple Watch现在对于第三方开发者来说更多的还是一块额外的屏幕.暂时WatchKit没有能给出足够的接口.现在Watch App的主要运算逻辑需要依赖iPho ...
- python --商品规格--表结构设计
商品规格表结构设计 商品规格包括规格组合.规格项,规格项为规格组的成员. 规格组 |-规格项:规格值 |-规格项:规格值 规格组 |-规格项:规格值 |-规格项:规格值 同一类商品的规格相同. 方案一 ...
- SQL分别求行、列的平均值
日常工作中,会需要用SQL求平均值,分别是求某一项的平均值或求某一个对象的平均值,放到表格就是求一行中的几个字段的平均值和求一列的平均值. 第一种:[列的平均值]AVG:这个函数相信大家都不陌生的,求 ...
- [EXP]Microsoft Windows MSHTML Engine - "Edit" Remote Code Execution
# Exploit Title: Microsoft Windows (CVE-2019-0541) MSHTML Engine "Edit" Remote Code Execut ...
- 学习DDD之路--勇于纠正自己的错误
写这篇文章主要是之前三篇对DDD的介绍算是自己学习的一次试水,也希望能够有更多的人能帮我发现其中的问题.昨天继续阅读了DDD书,发现了自己之前的例子存在了一些问题,早上也和园友进行了一些讨论.最后整理 ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- mysql遇见contains nonaggregated column 'information_schema.PROFILING.SEQ'异常
报错如下:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggrega ...
- Xdebug在PHP中的安装配置
Xdebug在PHP中的安装配置涉及php.ini配置文件的修改. 1 首先需要下载Xdebug,根据安装的PHP版本,选择合适的Xdebug版本, 2 安装Xdebug将下载的php_xdebu ...
- vue里碰到 $refs 的问题
记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域 ...