iT邦幫忙

0

JavaScript基礎知識-事件(2)

前面講到三種事件綁定的方法,撇除掉第一種較危險的方式之外,來談談第二種跟第三種的差異性

以點擊事件為例:

<input type="button" class="btn" value="點擊">
<script>
    var el = document.querySelector('.btn');
    el.onclick = function(){
        alert('Hello');
    }
</script>
<script>
    var el = document.querySelector('.btn');
    el.addEventListener('click',function(){
        alert('Hello');
    })
</script>

究竟這兩個方法差異性在哪裡?假設我們今天同一個元素要綁定多個事件時:當採用第一種方法

<script>
    var el = document.querySelector('.btn');
    el.onclick = function(){
        alert('Hello1');
    }
    el.onclick = function(){
        alert('Hello2');
    }
</script>

這時候只會彈跳 Hello2 出來,第一個 click 事件被蓋掉了,而使用另外一種方法時:

<script>
    var el = document.querySelector('.btn');
    el.addEventListener('click',function(){
            alert('Hello1');
        }
    })
    el.addEventListener('click',function(){
            alert('Hello2');
        }
    })  
</script>

這時候會發現,會依序彈跳 Hello1 Hello2,事件會依序出來,並不會被蓋掉
上述就是其差異性,所以為了避免這種狀況,我們可以試著改採用 .addEventListener()


尚未有邦友留言

立即登入留言