?直接添加到HTML结构中
function show() { alert(‘hello‘);}<body> <button id="btn" onclick="show()">按钮</button></body>?把一个函数赋值给一个事件处理程序
? ? a. 移除事件：event.onclick = null
? ? b. dom 0级事件只允许绑定一个事件处理函数
<button id="btn">按钮</button>var btn = document.getElementById(‘btn‘);btn.onclick = function() { alert(‘hello‘);}btn.onclick = function() { alert(‘ok‘); //覆盖上面的函数，只会显示"ok"}?dom2级事件允许给元素绑定多个事件处理函数
a. 添加事件
addEventListener("事件名"，事件处理函数，"布尔值")；
?true：事件捕获
?false：事件冒泡
b. 移除事件
removeEventListener("事件名"，事件处理函数)
案例1：DOM2级事件
btn.addEventListener(‘click‘, function() { alert(‘show‘); // arguments.callee 指向当前函数 btn.removeEventListener(‘click‘, arguments.callee); });案例2： 给同一个事件绑定多个处理函数
<button id="btn">按钮</button>var btn = document.getElementById(‘btn‘);//function()是匿名函数形式btn.addEventListener(‘click‘, function() { alert(‘ok‘);});function show() { alert(‘show‘);}//结果"ok","show"--两个事件都会处理，show引用函数名btn.addEventListener(‘click‘, show); 案例3：一次性事件
<button id="btn">按钮</button><script> var btn = document.querySelector(‘#btn‘); function show() { alert(‘show‘); //当执行一次事件后，移除事件 btn.removeEventListener(‘click‘, show); } btn.addEventListener("click",show);</script>一次性事件用this和callee方法
<button id="btn">按钮</button><script> var btn = document.querySelector(‘#btn‘); btn.addEventListener("click", function() { alert(‘show‘); //当执行一次事件后，移除事件 this.removeEventListener(‘click‘, arguments.callee); } );</script>a. attachEvent("事件名"，事件处理函数)
b. detachEvent("事件名"，事件处理函数)
事件处理函数兼容处理写法
function addEvent(elm, type, callback) { if (elm.addEventListener) { elm.addEventListener(type, callback); //DOM事件 } else if (elm.attachEvent) { elm.attachEvent(‘on‘ + type, callback);//ie事件，事件需要带on } else { elm[on + "type"] = callback; //HTML事件 }}window.onload = function() { var btn = document.getElementById(‘btn‘); addEvent(btn, ‘click‘, function() { alert(123); });}html代码：<body> <button id="btn">按钮</button></body>
