onclick和addEventListener 的区别

onclick

• 使用onclick 来绑定事件，在同一个时间只能指向唯一的对象
• 重复绑定事件只会是最后绑定的事件响应

    oBtn.οnclick=function a(){alert('a');}
    oBtn.οnclick=function b(){alert('b');}
    oBtn.οnclick=function c(){alert('c');}
<input id="button1"type="button" value="按钮"/>
<script>
    oBtn = document.getElementById('button1');// 获取的按钮元素
    oBtn.οnclick=function a(){alert('a');}
    oBtn.οnclick=function b(){alert('b');}
    oBtn.οnclick=function c(){alert('c');}
    //当点击的时候执行c这个函数	abc(){alert('abc');}
 </script>

addEventListener

• addEventListener给一个事件注多个listener时，会从上到下依次响应
• addEventListener的参数
  • 第一个是参数事件类型
  • 第二个是绑定的具体事件
  • 第三个是冒泡和捕获，false是冒泡，true是捕获，默认false
  • 阻止冒泡和捕获用: e.stopPropagation(),event.cancelBubble
  • 阻止默认事件用e.preventDefaule(), e.returnValue

<input  id="inputBtn" type="button" value="click"/>
<script>
    var inputBtn = document.getElementById('inputBtn');
    inputBtn.addEventListener('click',showMsg,false);//鼠标单击的时候调用showMes这个函数
    function showMsg() {
        alert("事件监听");
    }
</script>