function random(number) {
            return Math.floor(Math.random()*number);
        }

        function bgChange(){
            var rndCol= 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
            document.body.style.backgroundColor=rndCol;
        }
 
        上面使用的方法是 Inline event handler    ----      button onclick="bgChange()"
        现在不要再使用
       

        addEventListener
        链接

        var btn = document.querySelector('button');
        
        function bgChange() {
            var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
            document.body.style.backgroundColor = rndCol;
        }
        
        btn.addEventListener('click', bgChange);

        

            

                
one
            
            

                
two
            
        
        


        
        removeEventListener
        链接

        btn.removeEventListener('click', bgChange);

        


        您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：
        myElement.onclick = functionA;
        myElement.onclick = functionB;

        第二行会覆盖第一行，但是下面这种方式就会正常工作了：

        myElement.addEventListener('click', functionA);
        myElement.addEventListener('click', functionB);

        

        Change Color

        button class="changeColor"

        var btnColor= document.querySelector('.changeColor');
        function changeColor(e){
            var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
            e.target.style.backgroundColor = rndCol;
            console.log(e);
        }
        btnColor.addEventListener('click',changeColor);

        在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。 
        事件对象e.target属性始终是事件刚刚发生的元素的引用。 
        所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。