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

最新推荐文章于 2021-02-26 06:51:32 发布

郭晓小小

最新推荐文章于 2021-02-26 06:51:32 发布

阅读量346

点赞数

分类专栏： javascript学习文章标签： javascript

本文链接：https://blog.csdn.net/u010057430/article/details/50736895

版权

javascript学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>