事件处理程序

HTML事件处理程序

<input type="button" value="Click Me" onclick="alert('Clicked')" />

或者

<script type="text/javascript"> function showMessage(){ alert("Hello world!"); } </script>
<input type="button" value="Click Me" onclick="showMessage()" />

缺点：HTML和JS紧密耦合。

DOM0级事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function(){ 
    alert("Clicked");
    alert(this.id);    //"myBtn"
};
btn.onclick = null; // 删除事件处理程序

DOM2级事件处理程序

addEventListener() & removeEventListener()

这两个函数都接受3个参数：
要处理的事件名，作为事件处理程序的函数，一个布尔值（true表示在捕获阶段处理事件，false表示在冒泡阶段调用事件处理程序）。

var bin = document.getElementById("myBtn");
btn.addEventListener('click', function(){ 
    alert(this.id);
}, false);

使用DOM2的好处是可以添加多个事件处理程序。

通过removeEventListener可以移除事件处理函数，这也就意味着，像上文那样添加的匿名函数将无法移除。

IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){ 
    alert("Clicked");
});

注意：在attachEvent方法中，this等于window。

事件对象

事件对象的属性／方法一览
这里写图片描述

这里写图片描述

只有在事件处理程序执行期间，event对象才会存在。

模拟事件

事件经常由用户操作或者通过其他浏览器功能来出发，但是其实也可以使用JS在任意时刻来出发特定的事件。

DOM中的事件模拟

可以在document对象上使用createEvent方法创建event对象，这个方法接收一个参数：即表示要创建的事件类型的字符串。这个字符串可以是：
UIEvents：一般化的UI事件
MouseEvents：一般化的鼠标事件
MutationEvents：一般化的DOM变动事件
HTMLEvents：一般化的HTML事件

模拟事件的最后一步就是触发事件，使用方法：dispatchEvent。调用该方法时，需要传入一个参数，即表示要触发事件的event对象。

模拟鼠标事件

var btn = document.getElementById("myBtn");
// 创建事件对象
var event = document.createEvent("MouseEvents");
// 初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
// 触发事件
btn.dispatchEvent(event);

模拟其他事件

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

自定义DOM事件

自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。

var div = document.getElementById("myDiv"),event;
EventUtil.addHandler(div, "myevent", function(event){
    alert("DIV: " + event.detail);
});
EventUtil.addHandler(document, "myevent", function(event){
    alert("DOCUMENT: " + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", "3.0")){         
    event = document.createEvent("CustomEvent"); 
    event.initCustomEvent("myevent", true, false, "Hello world!"); 
    div.dispatchEvent(event);
}

IE事件模拟

var textbox = document.getElementById("myTextbox");
var event = document.createEventObject();
event.altKey = false; 
event.ctrlKey = false; 
event.shiftKey = false; 
event.keyCode = 65;
textbox.fireEvent("onkeypress", event);