1.IE 不支持事件的捕获。
2.事件捕获阶段不触发事件。
3.冒泡阶段触发事件。
4.html中处理事件
(1)<input type="button" onclick="alert('test')">
(2)function show(){
alert('test');
}
<input type="button" onclick="show()">
5.DOM0级事件处理
var b3 = document.getElementById('b3');
b3.onclick = function(){
alert(this.id); //b3,注意此处this为button对象
}
<input type="button" id = "b3" value="button3"/>
6.DOM2级事件处理(注意IE不支持)
(1)添加事件 addEventListener 参数为处理的事件名,处理函数,第三个参数如果是true,则事件在捕获阶段调用,false则在冒泡阶段调用。(一般为false)
var b4 = document.getElementById('b4');
b4.addEventListener('click',function(){ //注意第一个参数为'click'
alert(this.id); //b4,注意此处this为button对象
},false);
<input type="button" id = "b4" value="button4"/>
(2)移除事件 removeEventListener 参数为处理的事件名,处理函数(此处的函数必须与添加到事件的函数一致,所以匿名函数无法删除)
var b4 = document.getElementById('b4');
b4.addEventListener('click',handler,false); //添加事件
function handler(){
alert(this.id);
}
setTimeout(function(){ //3秒后把事件移除
b4.removeEventListener('click',handler);
},3000);
<input type="button" id = "b4" value="button4"/>
也可以通过以下方式移除事件
var b4 = document.getElementById('b4');
b4.addEventListener('click',function(){
alert(this.id);
this.removeEventListener('click',arguments.callee); //通过arguments.callee移除函数本身
},false);
<input type="button" id = "b4" value="button4"/>
7. IE的事件处理
(1)添加事件 attachEvent
var b5 = document.getElementById('b5');
b5.attachEvent('onclick',function(){ //注意第一个参数为'onlick'
alert(this.id); //undifined,注意此处this为全局变量
});
<input type="button" id = "b5" value="button5"/>
(2)移除事件 detachEvent(与removeEventListener相似)
var b5 = document.getElementById('b5');
b5.attachEvent('onclick',function(){
alert(this.id);
b5.detachEvent('onclick',arguments.callee)
});
<input type="button" id = "b5" value="button5"/>
8.html 中的Event
通过Html指定的事件处理程序时,变量event保存着event对象。
<input type="button" onclick="alert(event.type);"> //click
9.DOM中的event ( 注意:IE不支持)
兼容DOM的浏览器会将一个event 对象传入事件处理程序中(DOM0级或DOM2级)
var b6 = document.getElementById('b6');
b6.onclick = function(event){
alert(event.type);
}
b6.addEventListener('click',function(event){
alert(event.type);
})
注意,在事件处理程序内部,对象this始终等于event.currentTarget,指的是当前事件发生所在载体的HTML对象,而event.target则指的是触发事件发生的HTML对象,
参考以下程序:
//点击Id为b的button
var d = document.getElementById('d');
d.onclick = function(event){
alert(this); //Id为d的div html对象
alert(event.currentTarget); //Id为d的div html对象
alert(event.target); //Id为b的button html对象
}
<div id = 'd' >
<input type = "button" id="b" value = "button"/>
</div>
可以通过preventDefault阻止事件默认行为。(只有cancleable为true,才可以)
var link = document.getElementById('link');
link.onclick = function(event){
event.preventDefault();
}
<a id = "link" href="">百度</a>
注意:只有在事件处理程序执行期间,event对象才会存在,一旦执行完,event对象就会被销毁。
10.IE中的事件对象
(1)使用DOM0级添加事件处理程序时,event作为window的一个属性。
var b7 = document.getElementById('b7');
b7.onclick = function(){
var event = window.event;
alert(event.type); //click
}
<input type = "button" id = "b7" value = "button7"/>
(2)通过attachEvent添加事件时,则直接传入event对象。(也可以通过window.event访问)
var b8 = document.getElementById('b8');
b8.attachEvent('onclick',function(event){
alert(event.type); //click
},false)
<input type = "button" id = "b8" value = "button8"/>
可以通过event.returnValue来阻止事件默认行为。
var link = document.getElementById('link');
link.onclick = function(){
var event = window.event;
event.returnValue = false;
}
<a id="link" href="">百度</a>