javascript代码优化

Question

 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)
    })

开始我想以这种方式优化，想想 类型不对 ，但没想到这种的怎么处理，希望看到的人 并且会的人 能够指导一下
十分感谢

Answer 1

你自己不都写出来了么……

[html, body, div, ul, li].forEach(function(dom) {
    // capture
    dom.addEventListener('click', callback, true);

    // bubble
    dom.addEventListener('click', callback, false);
});

你还想咋个优化呢

Answer 2

你写的那种也是一种，还有一种比较笨的方法，获取页面所有元素，寻找 nodetype 为 1 的元素，循环绑定绑定事件。

$.each($('*'),function(i,v){
    //伪代码
    if(v.nodeType===1){
    绑定事件...
    }
})...

Answer 3

http://www.tantengvip.com/2015/08/js-optimization/ js的性能优化和规范，可以看看