var html = document.documentElement;
    var body = document.body;
    var p = body.querySelector('p');
    var ul = body.querySelector('ul');
    var li = body.querySelector('li');
    var pause = 300;
    // Capture
    html.addEventListener('click', callback, true);
    body.addEventListener('click', callback, true);
    p.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);
    p.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','p','ul','li'].forEach(function(value,index,arr){
        console.log(typeof value)
        value.addEventListener('click',callback,false)
    })

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