事件处理程序
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);