本章内容
1、理解事件流
2、使用事件处理程序
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、理解事件流
2、使用事件处理程序
一、事件流
事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1.事件冒泡
- 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
- 如:你点击按钮的同时,也点击了包含按钮的div,也同时点击了包含div的整个HTML,也同时认为点击了document
- 一级一级的往上冒泡,一直到document,这个事件就叫做事件冒泡
- 跟事件冒泡正好相反;
- 事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
- 事件捕获认为先捕获document.然后是让HTML接收,再是让div接收,最后是input接收;
- 一级一级的往下捕获,一直到input,这个事件就叫做事件捕获;
二、事件处理程序
- HTML事件处理程序
- DOM0级事件处理程序
- DOM2级事件处理程序
- IE事件处理程序
- HTML事件处理程序
- 事件是直接加载在HMTL的结构里的;
- 最大的缺点:HMTL和js代码紧密耦合在一起;
- 优点,可以添加多个事件处理程序
- 写在HTML里
<input type=”button” value=”按钮” id=”btn” οnclick=”alert(‘hello’)”>
- 封装在函数里
<script>
function showMessage(){
alert(“heollw word!”);
}
</script>
- DOM0级事件处理程序
-
传统的方式:把一个函数赋值给一个事件的处理程序属性
-
优点,用的比较多的方法,简单,跨浏览器 ,可以添加多个事件处理程序
- 事例
var bt2 = document.getElementById(“btn2”);
bt2.οnclick=function(){
alert(“这是通过DOM0级添加事件”);
}
bt2.οnclick=null /删除onclick 属性
- DOM2级事件处理程序
-
DOM2级事件定义了两个方法:
-
用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。
- 它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
-
优点,可以添加多个事件处理程序 ;缺点,IE不支持
- DOM2级添加事件
btn3.addEventListener(‘click’); //所有带on的事件,都要把on去掉;
btn3.addEventListener(‘click’,showMes,false);
-
DOM2级删除事件
btn3. removeEventListener (‘click’,showMes,false);
- IE事件处理程序
btn3.attachEvent(‘onclick’, showMes); //添加事件
btn3.datachEvent(‘onclick’, showMes); //删除事件
-
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
- 不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡
- 事件是直接加载在HMTL的结构里的;
- 最大的缺点:HMTL和js代码紧密耦合在一起;
- 优点,可以添加多个事件处理程序
- 写在HTML里
<input type=”button” value=”按钮” id=”btn” οnclick=”alert(‘hello’)”>
- 封装在函数里
<script> function showMessage(){ alert(“heollw word!”); } </script>
-
传统的方式:把一个函数赋值给一个事件的处理程序属性
-
优点,用的比较多的方法,简单,跨浏览器 ,可以添加多个事件处理程序
- 事例
var bt2 = document.getElementById(“btn2”); bt2.οnclick=function(){ alert(“这是通过DOM0级添加事件”); } bt2.οnclick=null /删除onclick 属性
-
DOM2级事件定义了两个方法:
-
用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。
- 它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
-
优点,可以添加多个事件处理程序 ;缺点,IE不支持
- DOM2级添加事件
btn3.addEventListener(‘click’); //所有带on的事件,都要把on去掉; btn3.addEventListener(‘click’,showMes,false);
-
DOM2级删除事件
btn3. removeEventListener (‘click’,showMes,false);
btn3.attachEvent(‘onclick’, showMes); //添加事件
btn3.datachEvent(‘onclick’, showMes); //删除事件
-
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
- 不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡