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

来源：互联网发布：turtlebot编程编辑：程序博客网时间：2024/06/06 05:41

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>

0 0