triggerEvent_研究儿童通用的方法

triggerEvent_研究儿童通用的方法假设有一个id为testA的a元素,然后有以下代码(jquery已存在):$(document).ready(function(){ $(‘#testA’).on(‘testEvent’,function(e,data1,data2,data3){ console.log(e,data1,data2,data3); }); varba=documen…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

假设有一个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);
	});

});

Jetbrains全家桶1年46,售后保障稳定

即,用两种方法监听一个自定义事件: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比较方便。

 

转载于:https://www.cnblogs.com/ywxgod/p/4467814.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234785.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • C语言贪吃蛇代码_c语言贪吃蛇游戏

    C语言贪吃蛇代码_c语言贪吃蛇游戏一、C语言贪吃蛇代码实现前言设计贪吃蛇游戏的主要目的是让大家夯实C语言基础,训练编程思维,培养解决问题的思路,领略多姿多彩的C语言。贪吃蛇是非常经典的一款游戏,本次我们模拟在控制台实现贪吃蛇游戏,也就是实现贪吃蛇的基本功能,比如在地图中,用“↑↓←→”控制移动蛇的方向,吃掉食物之后,蛇身体会变长等等。。。。首先我们得分析,游戏中我们会碰见的一些情况。①蛇的部分,蛇的身子是一节一节的,此时最容易联想到的数据结构就是顺序表,链表,如果把蛇比做顺序表或者链表,在之后吃到食物的时候,身子肯定会变长,

  • resnet34\resnet101网络结构图「建议收藏」

    resnet34\resnet101网络结构图「建议收藏」注释:7x7conv,3->64,/2表示7×7大小的卷积核,3、64表示输入输出通道,/2表示输出为原来的1/2。x2表示类似的结构还有两个。

  • python最长回文子串动态规划_最长回文子串问题

    python最长回文子串动态规划_最长回文子串问题问题描述回文串是指aba、abba、cccbccc、aaaa这种左右对称的字符串。输入一个字符串Str,输出Str里最长回文子串的长度。方法一:暴力求解遍历每一个子串,再判断这个子串是不是回文串,最后判断这个串是不是最长的回文子串。遍历子串的复杂度是O(n^2),判断是不是回文串的复杂度是O(n),所以这个算法的复杂度是O(n^3)。方法二:动态规划法用一个二维的数组ai来表示从第i位到第j位的子…

  • idea激活码 在线(注册激活)[通俗易懂]

    (idea激活码 在线)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • oracle函数的创建

    oracle函数的创建函数和存储过程有一定的相似之处,函数用于返回特定的数据,当建立函数时,在函数头部就会包含return字句,而在函数体内必须包含return语句返回的数据,可以使用createfunction来创建函数。案例1输入雇员的姓名,返回雇员的年薪。创建函数:createorreplacefunctionc_hs1(srnamevarchar2)returnnumber …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号