1. HTML事件
?直接添加到HTML结构中
function show() { ???alert(‘hello‘);}<body> ???<button id="btn" onclick="show()">按钮</button></body>2. DOM0级事件
?把一个函数赋值给一个事件处理程序
? ? 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"}3. DOM2级事件
?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>4. IE事件处理程序（ie8及以下版本）
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>js中event事件处理
原文地址：https://www.cnblogs.com/hjson/p/10291507.html