注册事件的几种方式 · 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> ```