原生js事件监听和一次事件

jQuery中绑定事件非常简单，写法上和绑定一次事件也只有方法名的差别，其对应的原生js写法也不难理解。本文作为剖析jQuery代码的一部分，更重要的是提醒在使用js进行事件绑定时一次事件的重要性，适当的使用一次事件进行绑定不仅是一种非常优雅的书写习惯，同时性能上也是最佳实践。

jQuery

绑定监听事件

新版本jQuery已经逐渐摒弃 “bind”，“delegate” 等绑定事件写法，这里推荐使用 “on”

1
2
3

$('#container').on('click',function(){
	console.log('触发了container的监听事件');
});

绑定一次事件

1
2
3

$('#container').one('click',function(){
	console.log('container的监听事件只会触发一次');
});

原生js

由于IE8及以下使用 attachEvent/detachEvent 监听/移除事件，此处未考虑兼容性，只使用现代浏览器均具有的 addEventListener/removeEventListener 说明。

绑定监听事件

1
2
3
4
5

document.getElementById('contaiener').addEventListener('click',function(event) {
	//event.target => 事件点击的element
	//event.currentTarget => 绑定的对象，即 container 
	console.log('触发了container的监听事件');
});

通过 event.target 可以针对不同的触发对象，进行不同的操作。

绑定一次事件

1
2
3
4
5
6
7

document.getElementById('container').addEventListener('click',function(event) {
	//移除事件
   event.target.removeEventListener(event.type,arguments.callee);
	// 回调函数
	// TO DO
	//return callback(event);
});

参考资料：
如何在JavaScript中创建一次事件

• ← Previous Post
• Next Post →