JavaScript -- 事件

事件处理程序

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);