JavaScript自定义DOM事件

最新推荐文章于 2022-03-10 17:27:33 发布

基因改造者

最新推荐文章于 2022-03-10 17:27:33 发布

阅读量499

点赞数

分类专栏： JavaScript 文章标签： js自定义事件自定义DOM事件 detachEvent dispatchEvent createEvent

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

var event = document.createEvent(type);

我们可以通过createEvent方法创建一个指定类型的事件，createEvent方法返回的对象必须先初始化，才可被传递给element.dispatchEvent。

看个例子：

<!DOCTYPE HTML>
<html>
<body>
<div>
    <button id="button">click</button>
    <input type="text" id="inputText"/>
</div>
<script>
var input=document.getElementById("inputText");
//注册fly事件
input.addEventListener("fly",function(event){
	console.log(event.detail);   //访问detail中的信息
});

var button=document.getElementById("button");
button.onclick=function(){
//判断浏览器是否支持CustomEvents事件
	if(document.implementation.hasFeature("CustomEvents","3.0")){
	//创建CustomEvents事件
		var event=document.createEvent("CustomEvent");
		//初始化fly事件
		event.initCustomEvent("fly",true,false,input.value);
		//吧event事件分派给button按钮
		input.dispatchEvent(event);
	} 
 }
</script>
</body>
</html>

fly事件

给button按钮注册了一个fly事件，fly事件会自动获取input里面输入的内容。

注意：
input.dispatchEvent(event)，是分派一个合成事件给input，调用该方法的节点将成为事件的目标节点。

删除一个已添加的事件

//elem:要清除事件的元素．
//event_type:事件类型．
//event_name:事件名称．函数的名称
elem.detachEvent(event_type,event_name)

参考地址：
天天向上中

基因改造者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript自定义DOM事件

var event = document.createEvent(type);我们可以通过createEvent方法创建一个指定类型的事件，createEvent方法返回的对象必须先初始化，才可被传递给element.dispatchEvent。看个例子：<!DOCTYPE HTML><html><body><div> &lt...
复制链接

扫一扫

专栏目录