當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS一个元素怎么绑定多个事件
生活随笔
收集整理的這篇文章主要介紹了
JS一个元素怎么绑定多个事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有時候一個一個元素要綁定多個事件,其實是分開寫
先看這個例子,我們預期它先執行alert1,然后是alert2,但事實上是沒有alert1,因為覆蓋了
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>綁定多個事件</title><script>window.onload = function(){document.getElementById('btn').onclick = function () {alert(1);};document.getElementById('btn').onclick = function () {alert(2);};}</script> </head> <body><button id="btn">點我</button> </body> </html>只需要使用addEventListener方法即可解決這個問題:
<script>window.onload = function(){document.getElementById('btn').addEventListener('click', function(){alert(1);}, false);document.getElementById('btn').addEventListener('click', function(){alert(2);}, false);}</script>其中addEventListener的參數值得說一下,第一個參數是事件名稱,沒有on,第二個是回調函數,其實是瀏覽器調用的,第三個是 是否捕獲階段觸發,一般設置為false,還有就是這個方法是先綁定的先執行
另外,經過測試,發現這個addEventListener在IE8及一下版本不支持,可以使用attachEvent方法開替代,當然,是兼容處理
這個用法如下:
元素.attachEvent( 'onclick', function(){...} );這個方法是先綁定的后執行,當然,如果你這么介意順序,就沒必要分開綁定了
總結
以上是生活随笔為你收集整理的JS一个元素怎么绑定多个事件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Python黑科技】tkinter库实
- 下一篇: 异常,Map,File