DOM事件学习笔记

1.事件处理程序

（1）html事件处理程序

<input type="button" id="btn" value="按钮" onclick="showmessage()">

function showmessage(){

alert("hello");

}

缺点：要修改两次

（2）DOM的0级事件处理程序

var btn=document.getElementById("btn");

btn.onclick=function(){

alert("hello");

}

btn.onclick=null; //删除事件

（3）DOM的2级事件处理程序 //IE8以下不支持 （除ie和opera外）

btn.addEventListener('click',showmessage,false);

btn.addEventListener('click',function(){

alert(this.value);

},false); //另一种写法

btn.removeEventListener('click',showmessage,false); //删除事件

0级和2级两者有共同的优点，即可以添加多个事件。

（4）IE事件处理程序 //ie和opera

btn.attachEvent('onclick',showmessage); //注意这里是onclick而不是2级里的click

btn.detachEvent('onclick',showmessage);

(5)跨浏览器的事件处理程序



//element.onclick===element[onclick] 二者等价

原理：将多种事件处理程序封装起来，浏览器支持哪种事件处理方式就执行哪种。

2.DOM对象

属性：type，target

function showmessage(event){

alert(event.alert.nodeName);

event.stopPropagation(); //阻止事件冒泡

}

function stopGoto(event){

event.stopPropagation(); //阻止事件冒泡

event.stopPropagation(); //阻止事件默认行为，比如点击a跳转

}

3. IE中的事件对象

属性：type,srcElement

阻止事件冒泡：srcElement属性为true时阻止冒泡

阻止事件默认行为：returnValue属性为false时阻止默认行为





4.键盘事件

（1）keyDown 按下任意键时触发，若按住不放，将重复触发此事件；

（2）keyPress 按下字符键时触发，若按住不放，将重复触发此事件；

（3）keyUp 释放键盘上的键时触发。

每个键都有特定的键码值。