现在的位置: 首页 > 综合 > 正文

JavaScript高级程序设计 DOM事件处理 读书笔记

2014年08月29日 ⁄ 综合 ⁄ 共 3056字 ⁄ 字号 评论关闭

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>

抱歉!评论已关闭.