事件处理程序

HTML事件处理程序：

在节点元素中直接添加事件，比如说：

<div οnclick="alert('hello')"></div>

或者<div οnclick="show()"></div>

<script>

function show(){

alert("hello");

}

</script>

 

DOM0级事件处理程序：

较传统的方式：把一个函数赋值给一个事件的处理程序属性用的比较多的方法

简单 跨浏览器的优势 比如说：

<div id="btn"></div>

<script>

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

btn.οnclick=function(){ //给btn添加onclick属性

alert('这是通过DOM0级添加的事件！');

}

 

btn.οnclick=null; 删除onclick属性

</script >

 

DOM2级事件处理程序：

DOM2级事件方定义了两个方法：

用于处理指定和删除事件处理程序的操作

addEventListener()和removeEventListner()。

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true为事件捕获，false为事件冒泡） 比如说：

<div id="btn3"></div>

<script>

var btn3=document.getElementById('btn3');

 

//DOM2级事件

btn3.addEventListener('click',showMes,false);

//删除事件

btn3.removeEventListener('click',showMes,false);

</script>

 

 

DOM0和DOM2可以给元素添加多个事件，按顺序执行

 

IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡!

比如说:

<div id="btn3"></div>

<script>

var btn3=document.getElementById('btn3');

 

btn3.attachEvent('click',showMes,false);

 

btn3.detachEvent()('click',showMes,false);

</script>

 

跨浏览器的事件处理程序

封装需要的函数

 

DOM中的事件对象

事件对象event

1、DOM中的事件对象

（1）、type属性用于获取事件类型

（2）、target属性用于获取事件目标

（3）、stopPropagation()方法用于阻止事件冒泡

（4）、preventDefault()方法阻止事件的默认行为

2、IE中的事件 对象

（1）、type属性用于获取事件类型

（2）、srcElement 属性用于获取事件目标

（3）、cancelBubble属性用于阻止事件冒泡

（4）、returnValue属性用于阻止事件的默认行为