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

13.5.2.javascript内存与性能与13.6事件模拟

2016-02-25 14:46 627 查看

1.对于onclick等处理事件，可以将其封装成为1个函数，用时间的目标target进行区分，如target.id，将其绑定到document中。

2.移除事件程序，再删除某个节点之前移除事件处理程序，“空事件处理程序的问题”

事件模拟

<!doctype>
<html>
<head>
<meta charset="UTF8">
<title>事件模拟</title>
</head>
<body>
<button id="mybtn">点我</button>
<button id="mybtn1">自定义点击事件</button>
</body>
<script type="text/javascript">
window.onload = function(){
// 1.鼠标事件模拟
var btn = document.getElementById("mybtn");
btn.onclick = function(event){
console.log("click me!");
}
//初始化事件对象
var event = document.createEvent("MouseEvents");
// 参数设置
event.initMouseEvent("click",true,true,document.defalutView,0,0,0,0,0,false,false,false,false,false,0,null);
// 触发事件
btn.dispatchEvent(event);//输出click me

// 2.模拟键盘事件，DOM3级事件才支持，createEvent("KeyboardEvent")
// 3.模拟DOM变动事件等(MutationEvents),模拟HTML事件(HTMLEevents)
// 4.模拟自定义事件，(CustomEvent)
var btn1 = document.getElementById("mybtn1");
btn1.addEventListener("myevent",function(event){
console.log("myevent running! "+event.detail);
})

if(document.implementation.hasFeature("CustomEvents","3.0")){
event = document.createEvent('CustomEvent');
event.initCustomEvent("myevent",true,false,"hello world");
btn1.dispatchEvent(event);
}
else{
console.log("不支持模拟自定义事件");
}

// IE中的事件模拟

}
</script>
</html>

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

标签： javascript

相关文章推荐

新的分享

章节导航