dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件
自定义事件的触发
又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器。
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化。因此,总结说来就是:
document.createEvent()
event.initEvent()
element.dispatchEvent()
举个例子:
var dom = document.querySelector('#id')
document.addEventListener('alert', function (event) {
console.log(event)
}, false);
// 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false);
// 触发, 即弹出文字
dom.dispatchEvent(evt);
例子2:
let point = document.querySelector('#id');
const e = document.createEvent('MouseEvents'); // 创建
e.initEvent('click', true, true); // 初始化,阻止冒泡,阻止原生事件
e.customId = point.id; // 设置Id
point.dispatchEvent(e); //触发
createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型,具体见下表:
| 参数 | 事件接口 | 初始化方法 |
|---|---|---|
| HTMLEvents | HTMLEvent | initEvent() |
| MouseEvents | MouseEvent | initMouseEvent() |
| UIEvents | UIEvent | initUIEvent() |
关于createEvent()方法我自己了解也不是很深入,不想滥竽充数,误人子弟,所以您有疑问我可能作答不了,希望对熟知该方法的人可以做进一步的解释说明(例如事件接口与document关系,UIEvent是什么东西等)。
initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。
支持三个参数:initEvent(eventName, canBubble, preventDefault). 分别表示事件名称,是否可以冒泡,是否阻止事件的默认操作。
dispatchEvent()就是触发执行了,dom.dispatchEvent(eventObject), 参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。
2. 对于IE浏览器,由于向下很多版本的浏览器都不支持document.createEvent()方法,因此我们需要另辟蹊径(据说IE有document.createEventObject()和event.fireEvent()方法,但是不支持自定义事件~~)。
IE浏览器有不少自给自足的东西,例如下面要说的这个"propertychange"事件,顾名思意,就是属性改变即触发的事件。例如文本框value值改变,或是元素id改变,或是绑定的事件改变等等。
我们可以利用这个IE私有的东西实现自定义事件的触发,大家可以先花几分钟想想……
// zxx: 假设几分钟已经过去了……
大家现在有思路了没?其实说穿了很简单,当我们添加自定义事件的时候,顺便给元素添加一个自定义属性即可。例如,我们添加自定义名为"alert"的自定义事件,顺便我们可以对元素做点小手脚:
dom.evtAlert = "2012-04-01";
再顺便把自定义事件fn塞到"propertychange"事件中:
dom.attachEvent("onpropertychange", function(e) {
if (e.propertyName == "evtAlert") {
fn.call(this);
}
});
这个,当我们需要触发自定义事件的时候,只要修改DOM上自定义的evtAlert属性的值即可:
dom.evtAlert = Math.random(); // 值变成随机数
此时就会触发dom上绑定的onpropertychange事件,又因为修改的属性名正好是"evtAlert", 于是自定义的fn就会被执行。这就是IE浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。
自定义事件的删除
与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListener和detachEvent。不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange事件:
dom.detachEvent("onpropertychange", evt);
dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件的更多相关文章
- echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, ...
- 我们常用的在a标签中有点击事件
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...
- js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件
问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...
- Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件
<div>1</div> <div>2</div> <div>3</div> <div>4</div> ...
- jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.
$("#diva").click(function(){ $("#divb").unbind("click").click(function ...
- Javascript和jquery事件--点击事件和触发超链接
前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- JavaFX如何制作鼠标多击事件?
JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene. ...
- C#实现模拟鼠标点击事件(点击桌面的其他程序 )
注释感觉已经很清楚了,有不懂的欢迎评论 1 using System; using System.Collections.Generic; using System.ComponentModel; u ...
- 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...
随机推荐
- 【Python】【demo实验1】【Python运行时强制刷新缓冲区,输出信息】(Python3 应不存在类似情况)
[原文] 需求:打印一颗 ”*” 休息1s 代码如下: #!/usr/bin/python #coding=utf-8 ''' 暂停1s输出 ''' import time def printStar ...
- 中国高考志愿填报与职业趋势分析 - ActiveReports 大数据分析报告
中国高考志愿填报与职业趋势分析 1977年中国高考制度恢复,重新开启了人才成长之门.40多年来,高考累积录取人数增长了27倍, 2.28亿人报名,9900万名高素质人才先后通过了中国高等教育的培养,高 ...
- 云数据库 MongoDB版
阿里云云数据库MongoDB版是一种安全可靠.可弹性伸缩的云数据库服务,目前支持ReplicaSet和Sharding两种部署架构,通过简单的几步操作即可快速部署.阿里云云数据库MongoDB版是一种 ...
- 客户端实现WebService服务接口
首先,要获得搭建好的WebService服务的WSDL,如要实现国内手机号码归属地查询WEB服务,其WSDL为:http://ws.webxml.com.cn/WebServices/MobileCo ...
- 字符串转数组(php版)
思路: 1.判断当前传来的值是否为数组 2.若不是现将传来的值转换为字符串类型 3.判断当前值是否为空 4.若不为空,采用正则进行匹配,如下图 preg_match('/^{.*?}$/', $str ...
- 5表联查yii框架权限控制
一:控制器部分 <?php namespace app\controllers; use yii\web\Controller; class PreController extends Cont ...
- python基础_面向对象进阶
@property装饰器 之前我们讨论过Python中属性和方法访问权限的问题,虽然我们不建议将属性设置为私有的,但是如果直接将属性暴露给外界也是有问题的,比如我们没有办法检查赋给属性的值是否有效.我 ...
- The minimal unique substring CodeForces - 1159D (构造)
核心观察是形如01,001,0001,...的串循环时, $n$每增长1, $k$就增长1. #include <iostream> #include <sstream> #i ...
- python网络爬虫(4)结构与基本概念
基本模型 请求与响应 import urllib.request as urllib2 request=urllib2.Request('http://www.zhihu.com') response ...
- LintCode 64---合并排序数组
public class Solution { /* * @param A: sorted integer array A which has m elements, but size of A is ...