JS事件委托（事件代理）与事件⼴播
作为⼀个前端⼯程师，事件委托应该是必须掌握的基本知识，⼤家在⾯试中⼏乎都会被问到此问题，由此可见，事件委托的重要性。
在js中，添加到页⾯上的事件处理程序的数量会直接关系到整个页⾯的运⾏性能，曾经我就在开发中因为事件绑定太多造成页⾯卡死、崩溃的情况，由于每个函数都是⼀个对象 ，都会占⽤内存，⽽内存占⽤越多，性能也就会越差。在可以使⽤事件委托的地⽅我们尽量使⽤事件委托，以提⾼性能。事件委托利⽤了事件冒泡的的原理。
事件注销
若将⼀个绑定事件的div设为空，那么其上绑定的事件处理程序可能还存在内存中（IE浏览器解析问题），最好的⽅法时⼿动移除这个事件处理程序（将其设为null）
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script>
var btn= document.querySelector("#myBtn")
document.querySelector("#myDiv").innnerHTML= ""
}
</script>
通过addEventListener()添加的事件处理程序只能使⽤removeEventListener()来移除；移除时传⼊的参数与添加处理程序时使⽤的参数相同。
如果页⾯在两个页⾯间来回切换，也可以是单击了“刷新“按钮，内存中滞留的对象数⽬会越来越多，因为事件处理程序占⽤的内存并没有释放。（某些浏览器会存在这些问题，特别是IE8及之前版本），所以可以在页⾯的onunload事件中移除这些事件，但是使⽤了onunload事件处理程序意味着页⾯不会被缓存在bfcache中。
事件⼴播（事件派发，即⾃定义DOM事件，模拟事件）
//创建⼀个包含initEventName()⽅法的事件对象
var event= ateEvent("EventName")
// 初始化事件对象，接收⼋个参数
event.initEventName(type,bubbles,cancelable,relatedNode,preValue,newValue,attrName,attrChange)
event.initEventName("focus",true,true)
// 派发事件(可以是dom，也可以是某个⽗级元素)
document.dispatchEvent(event)
// 接收与绑定事件
el.addEventListener("EventName"，function（）{},false)
事件模型（我们常⽤的事件底层是如何实现的）
js实现事件模型bind与trigger
function Emitter() {
this._listener = [];//_listener[⾃定义的事件名] = [所⽤执⾏的匿名函数1, 所⽤执⾏的匿名函数2]
}
//注册事件
Emitter.prototype.bind =function(eventName, callback) {
var listener =this._listener[eventName] || [];//this._listener[eventName]没有值则将listener定义为[](数组)。
listener.push(callback);
this._listener[eventName] = listener;
}
//触发事件
igger =function(eventName) {
var args = Array.prototype.slice.apply(arguments).slice(1);//args为获得除了eventName后⾯的参数(注册事件的参数)          var listener =this._listener[eventName];
if(!Array.isArray(listener))  return;//⾃定义事件名不存在
listener.forEach(function(callback) {
try{
js argumentscallback.apply(this, args);
}catch(e) {
<(e);
}
})
}
//实例
var emitter =new Emitter();
emitter.bind("myevent",function(arg1, arg2) {
console.log(arg1, arg2);
});
emitter.bind("myevent",function(arg1, arg2) {
console.log(arg2, arg1);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。