注冊事件的幾種方式 · JavaScript

## 第一種無法給同一個對象的同一個事件注冊多個事件處理函數.所有瀏覽器都支持. ``` btn.onclick = function(){ } ``` ## 第二種可以給同一個對象的同一個事件注冊多個處理函數,但是它有瀏覽器的兼容性問題. ``` btn.addEventListener('click',function () { alert('1'); }); ``` ## 兼容性處理 ``` <body> <input type="button" id="btn" value="點擊"> <script> var btn = document.getElementById('btn'); //eventName 不帶on function addEventListener(element, eventName, fn) { if (element.addEventListener) { element.addEventListener(eventName, fn); } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { element['on' + eventName] = fn; } } addEventListener(btn,'click',function () { alert('hello'); }) addEventListener(btn,'click',function () { alert('world'); }) </script> ``` ## 第三種在IE11之前可以使用attachEvent來代替,該特性是非標準的,不要在生產環境使用.chrome不支持此方法. ``` <body> <input type="button" id="btn" value="點擊"> <script> var btn = document.getElementById('btn'); btn.attachEvent('onclick',function () { alert('1') }) </script> ```