一、HTML事件处理程序
1.DOM0级事件处理程序
<html>
<body>
<form method="post">
<input type="text" name="username" />
<input id="myBtn" type="button" value="点我" />
</form>
</body>
</html>
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function () {
console.log(this);
console.log(this.value);
alert(this.form.username.value);
}
</script>
实际上可以在事件处理程序中通过this访问元素的任何属性和方法。
也可以删除通过DOM0级方法指定的事件处理程序
btn.onclick = null; // 删除事件处理程序
DOM0级只支持一个回调函数
2.DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含
这两个方法，并且它们都接受3个参数：要处理的事件名、事件处理函数和一个布尔值。布尔值为true表示在捕获阶段调用事件处理程序，反之在
冒泡阶段调用事件处理程序。
<html>
<body>
<form method="post">
<!-- <input type="text" name="username" /> -->
<input id="myBtn" type="button" value="点我" />
</form>
</body>
</html>
<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(this.id);
});
btn.addEventListener("click",function(){
alert("Hello World");
});
</script>
使用DOM2级处理方法添加事件的主要好处是可以添加多个事件处理程序，如上所示。
这两个事件处理程序会按照添加他们的顺序触发，因此先显示元素id，然后显示 Hello Wolrd。
通过addEventListener()添加的事件只能通过removeEventListener()来移除，移除时添加的参数与添加处理程序时使用的参数相同。
这也意味着通过addEventListener()添加的匿名函数将无法移除。
var btn = document.getElementById("myBtn"); var handler = function(){ alert(this.id); } btn.addEventListener("click",handler,false); btn.removeEventListener("click",handler,false); btn.addEventListener("click",function(){ alert("Hello World"); });
只会弹出Hello World
IE实现了DOM中类似的两个方法:attachEvent()和detachEvent()。都会被添加到冒泡阶段
3.跨浏览器事件处理
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); // IE的事件处理,为了兼容IE8之前的浏览器，事件加上on前缀 } else { element["on" + type] = handler; // 都无效则采用DOM0级的事件处理 } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); // IE的事件处理 } else { element["on" + type] = null; // 都无效则采用DOM0级的事件处理 } } }
EventUtil增强：
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); // IE的事件处理,为了兼容IE8之前的浏览器，事件加上on前缀 } else { element["on" + type] = handler; // 都无效则采用DOM0级的事件处理 } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); // IE的事件处理 } else { element["on" + type] = null; // 都无效则采用DOM0级的事件处理 } }, getTarget: function (event) { return event.target || event.srcElement; }, getEvent: function (event) { // 兼容IE，在IE中没有event对象，只有通过window.event return event || window.event; }, preventDefault:function(event){ // 取消事件的默认行为，比如a连接点击的默认行为是跳转，取消后不会再跳转 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ // 组织事件的冒泡传播，非IE浏览器还会阻止事件捕获 if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }
4.焦点事件
焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，
可以知晓用户在页面上的行踪。
-
-
- blur:在元素失去焦点时触发，这个事件不会冒泡；所有浏览器都支持它。
- focus:在元素获得焦点时触发，这个事件不会冒泡；所有浏览器都支持它。
- focusin:在元素获得焦点时触发，这个事件与focus事件等价，但是它冒泡。
- focusout:在元素失去焦点时触发，这个事件与blur事件等价，但是它冒泡。
-
docuement.documentElement （标准模式） document.body（混杂模式）
5.键盘与文本事件
keydown:当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件。
keypress:当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件。按下ESC键也会触发该事件。
keyup:当用户释放键盘上的键时触发。
6.事件委托优化
通过把事件处理程序指定给较高层次的元素，同样能够处理该区域中的事件
var body = document.body; EventUtil.addHandler(body, "click", function () { let target = event.target || event.srcElement; switch (target.id) { case 'myBtn1': body.style.backgroundColor = "red"; break; case 'myBtn2': body.style.cssText = "background-color:green"; break; } })