javascript事件绑定与监听的区别

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件绑定与监听的区别</title>
    </head>

    <body>
        <button >按钮A</button>
        <button >按钮B</button>
        <script type="text/javascript">
            var btnA = document.getElementById("btnA");
            var btnB = document.getElementById("btnB");
            btnA.onclick = function() {
                alert("你点了一下");
            }
            btnA.onclick = function() {
                alert("你又点了一下");
            }

            btnB.addEventListener("click",function(event){
                alert("你点了一下");
            },false);

            btnB.addEventListener("click",function(event){
                alert("你又点了一下");
            },false);
        </script>
    </body>

</html>

使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件,也就是最后一个绑定的事件会生效;

使用addEventListener绑定事件则不会覆盖,可同时在一个元素上绑定多个相同的事件。