var html = document.documentElement;
var body = document.body;
var div = body.querySelector('div');
var ul = body.querySelector('ul');
var li = body.querySelector('li');
var pause = 300;
// Capture
html.addEventListener('click', callback, true);
body.addEventListener('click', callback, true);
div.addEventListener('click', callback, true);
ul.addEventListener('click', callback, true);
li.addEventListener('click', callback, true);
// Bubble
html.addEventListener('click', callback, false);
body.addEventListener('click', callback, false);
div.addEventListener('click', callback, false);
ul.addEventListener('click', callback, false);
li.addEventListener('click', callback, false);
function callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
setTimeout(function() {
target.classList.toggle('highlight')
//target.classList.add('highlight');
setTimeout(function() {
target.classList.remove('highlight');
}, pause);
},ms);
}
今天看到一个例子 ,感觉上面的例子上有很多代码重复的 不知道如何优化,希望解答,我想通过
['html','body','div','ul','li'].forEach(function(value,index,arr){
console.log(typeof value)
value.addEventListener('click',callback,false)
})
开始我想以这种方式优化,想想 类型不对 ,但没想到这种的怎么处理,希望看到的人 并且会的人 能够指导一下
十分感谢
你自己不都写出来了么……
[html, body, div, ul, li].forEach(function(dom) {
// capture
dom.addEventListener('click', callback, true);
// bubble
dom.addEventListener('click', callback, false);
});
你还想咋个优化呢
http://www.tantengvip.com/2015/08/js-optimization/ js的性能优化和规范,可以看看
你写的那种也是一种,还有一种比较笨的方法,获取页面所有元素,寻找 nodetype
为 1
的元素,循环绑定绑定事件。
$.each($('*'),function(i,v){
//伪代码
if(v.nodeType===1){
绑定事件...
}
})...