您的位置：首页 > Web前端 > JavaScript

javascript自定义事件

2015-07-06 12:36 841 查看

没错，自定义事件的机制如普通事件一样——监听事件，写回调操作，触发事件后执行回调。但不同的是，自定义事件完全由我们控制触发时机，这就意味着实现了一种 JavaScript 的解耦。我们可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好。

代码演示如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="div2">你好。这是一个 div 元素。</div>

<script>
var event = document.createEvent("Event"); //创建事件
event.initEvent("my",true,true); //初始化事件
var dom = document.getElementById("div2");
dom.addEventListener("my",function(){alert("ok")},false); //监听事件
dom.dispatchEvent(event); //触发事件
</script>
</body>
</html>

相关函数注释：

1.创建事件 document.createEvent(type);

type is a string that represents the type of event to be created. Possible event types include “UIEvents”, “MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section for details.

2. 初始化事件

event.initEvent(eventType,canBubble,cancelable)

参数介绍：

eventType 字符串值。事件的类型。也就是新事件的名字

canBubble 事件是否起泡。

cancelable 是否可以用 preventDefault() 方法取消事件。

3.监听事件事件

target.addEventListener('dataavailable', handler, false);

参数介绍：

dataavailable 新事件名

handler 触发的函数

false 是否是扑获事件模型

4.触发事件

target.dispatchEvent(e);

e 是已经申明的事件对象

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航