javascript给元素定义自定义事件(非html原生事件)

最新推荐文章于 2025-01-20 10:15:00 发布

原创最新推荐文章于 2025-01-20 10:15:00 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #html

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用纯HTML和JavaScript实现自定义事件(myevent)的示例代码。该示例展示了如何创建、初始化及触发自定义事件，并通过更新DOM元素来显示事件触发的时间。

废话不多说，直接上代码。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" >
var el = null;
var evt = null;
window.onload = function(){
	el  = document.getElementById("log");
 	el.addEventListener("myevent", function(){
 		document.getElementById("log").innerHTML = new Date();
 	}, false);
	// 创建
	evt = document.createEvent("HTMLEvents");
	// 初始化
	evt.initEvent("myevent", false, false);
}
function trigger(){
	// 触发事件，显示当前事件
	el.dispatchEvent(evt);
}
</script>

</head>
<body>
<div id='log' style='z-index: 1000; width: 300px; height: 60px; top: 200px; left: margin: auto; border: 1px red solid;'></div>
<input type="button" value="点我触发DIV自定义myevent事件" onclick="trigger()">
</body>
</html>

运行效果如下：