DOM事件学习笔记

来源：互联网发布：淘宝开店类目如何选择编辑：程序博客网时间：2024/05/22 08:16

1.事件流
1）事件冒泡：深->浅，例如：
<body>
<div>
<input type="button" value="按钮" id="btn" />
</div>
</body>
点击按钮后，相当于点击了<input>元素，同时也点了<div>元素，也点了<body>元素。因此如果来<input>元素上加上事件后，事件触发的效果会一直向上层蔓延：<input> ---> <div> ---> <body>
2）事件捕获：浅->深

2.事件处理程序
1）HTML事件处理程序
事件直接加载在HTML里面
<input type="button" value="按钮" id="btn" onclick="alert('hello')">
//【onclick="alert('hello')"】就是在HTML里面的事件处理代码
缺点：HTML和JS代码紧密地耦合在一起，如果要修改事件处理程序代码的话，需要同时修改HTML和JS代码，这样就不方便了

2）DOM 0级事件处理程序（较为常用的方法，简单，跨浏览器）
把一个函数赋值给一个事件处理程序的属性
语法：ojb.event = function

HTML部分：
<input type="button" value="按钮2" id="btn2" >
JS部分：
<script>
var btn2 = document.getElementById('btn2');
//给元素btn2创建一个新属性onclick，并把一个匿名函数的功能赋值给它
btn2.onclick = function(){
alert("这是通过DOM0级添加的事件");
}
btn2.onclick = null; //删除onclick属性
</script>

(没有HTML事件处理方法的缺点)

3）DOM 2级事件处理程序
DOM 2级事件处理程序通过【事件监听】来实现事件处理
语法：(a表示事件名，b表示函数，c是布尔值)
obj.addEventListener(a,b,c)//添加事件监听
obj.removeEventListener(a,b,c)//删除事件监听
都接收3个参数：要处理的事件名、作为事件处理程序的函数、布尔值（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

<input type="button" value="按钮3" id="btn3" >

<script>
function showMes(){
alert();
}
var btn3 = getElementById('btn3');
//添加事件监听,可以添加多个
btn3.addEventListener("click", showMes, false); //注意第一个参数【事件名】要把“on”去掉，例如onclick->click， onmouseover->mouseover
btn3.addEventListener("click", function(){alert(this.value)}, false);

//删除事件监听
btn3.removeEventListener("click", showMes, false); //参数要和上面相同
btn3.removeEventListener("click", function(){alert(this.value)}, false);
</script>

//【this】这里的作用是：引用被触发的元素，这里被触发的元素是btn3，所以this指的是btn3，因此this.value指的就是btn3的value属性，所以this.value == "按钮3"

//IE不支持DOM 2级事件处理程序，IE有自己的IE事件处理程序

4）IE事件处理程序(现在基本不需要了)
语法：（表示事件名，b表示函数）
obj.attachEvent(a,b)//添加事件
obj.detachEvent(a,b)//删除事件

都接受2个参数：事件名称，函数
（为什么没有了布尔值：因为IE8以及更早的版本只支持事件冒泡）

btn3.attachEvent('onclick', showMes); //添加事件, 这里的事件名要加上“on”
btn3.detachEvent('onclick', showMes); //删除事件

//IE事件处理程序只支持IE和Opera浏览器

5）跨浏览器的事件处理程序
var eventUtil={
//添加事件
//参数：element元素，type事件名，hander事件触发的函数
addHander:function(element, type, hander){
if (element.addEventListener)//DOM2级
{
element.addEventListener(type, hander, false)
}
else if (element.attachEvent)//IE
{
element.attachEvent('on'+tpye, hander)
}
else //DOM0级
{
element['on'+tpye] = hander;
//element.onclick===element['onclick']
}
}

//删除句柄
removeHander:function(element, type, hander){
if (element.addEventListener)//DOM2级
{
element.removeEventListener(type, hander, false)
}
else if (element.attachEvent)//IE
{
element.detachEvent('on'+tpye, hander)
}
else //DOM0级
{
element['on'+tpye] = null;
}
}
}

...
...

//调用
eventUtil.addHander(btn3, 'click', showMes);
eventUtil.removeHander(btn3, 'click', showMes);

3.事件对象
在触发DOM上的事件时都会产生一个对象，这个对象成为【事件对象】一般叫【在非IE中关键字是event，IE8之前是window.event】。

function showMes(e){
e = event || windows.event;
...
}

（1）DOM中的事件对象
常用属性和方法
属性1：type属性，用于获取事件类型【event.type】
属性2：target属性，用于获取事件目标【event.target】
方法1：stopPropagation()，用于阻止事件冒泡【event.stopPropagation();】
方法2：preventDefault()，用于阻止事件默认行为【event.preventDefault();】
【默认行为】的意思是例如<a href="#">超链接</a>标签的默认行为就是【跳转】到另一页面

（2）IE中的事件对象
常用属性和方法
属性1：type属性，用于获取事件类型【window.event.type】
属性2：srcElement属性，用于获取事件目标【window.event.srcElement】
属性3：cancelBubble，用于阻止事件冒泡【window.event.cancelBubble=true;】
设置为true表示阻止冒泡，设置为false表示不阻止冒泡
属性4：returnValue属性，用于阻止事件的默认行为【window.event.returnValue=false;】
设置为false表示阻止事件的默认行为

4.事件类型
（1）鼠标事件
onclick 例如:element.onclick = func;
onmousedown
onmouseup
onmouseover

（2）键盘事件
onkeydown 当用户按下键盘上的【任意键】时触发，而且如果按住不放的话，会重复触发此事件
onkeypress 当用户按下键盘上的【字符键】时触发，而且如果按住不放的话，会重复触发此事件
onkeyup 当用户释放键盘上的键时触发
例如: document.onkeyup = func;

0 0