JavaScript 自定义事件 - 会coding的HAM

<body>
<div></div>
<script>
// 创建自定义事件
var customEvent =document.createEvent('CustomEvent')
// 初始化自定义事件
customEvent.initCustomEvent('自定义事件',true,true,{a:'123',b:'456'})
// initCustomEvent 四个参数：
// 1：事件类型名称
// 2：是否可以冒泡
// 3：是否可以取消默认事件
// 4：自定义数据
// 事件对象event.detail获取自定义数据
var div =document.querySelector('div')
div.addEventListener('自定义事件',function(e){
alert('观察到了一个自定义事件'+ '-' + e.detail.b)
})
div.dispatchEvent(customEvent)
// 派发事件
// 自定义事件的使用过程：
// 1、创建一个自定义事件对象
// 2、初始化该事件对象
// 3、监听自定义事件
// 4、派发该事件
document.body.addEventListener('discoverNumber',function(e){
alert('得到一个数：' + e.detail.num + '|' + e.detail.description)
})
window.addEventListener('discoverNumber',function(e){
alert('第二个监听者：' + e.detail.num)
})
for(var i = 0;i<=100;i++){
if(i%3 == 0){
// 创建一个数据对象
var detaila = new Object()
detaila.num = 1
detaila.description = '被三整除的数'
// 事件数据
var data = {}
data.detail = detaila
data.bubble =true
data.cancelable = true
// 自定义事件new Event 和 new CustomEvent
var e = new CustomEvent('discoverNumber',data)
// 创建新的自定义事件
document.body.dispatchEvent(e)
// 派发事件
}
}
// 总结
// 自定义事件类型名称可以是任意名称可以写成中文
// 自定义事件可以挖洞（捕获过程）事件的传播是正常的
// 自定义事件可以设置不冒泡可以控制是否能够取消
// 自定义事件可以携带数据这个数据可以是一个复杂的数据对象也可以是一个简单数字或者字符串
// 参考资料： http://www.jianshu.com/p/418e9e35d5a1
</script>
</body>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论