DOM事件学习笔记
2016-09-23 23:45
225 查看
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事件触发的函数
addHan
4000
der: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;
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事件触发的函数
addHan
4000
der: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;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DOM事件学习笔记
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
- JavaScript学习笔记之DOM事件句柄
- SilverLight学习笔记--Silverligh之在Silverlight中捕获和处理DOM事件
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- DOM事件模型学习笔记
- JS学习笔记（一）DOM事件和监听
- 前端学习笔记--JavaScript--DOM事件探秘
- DOM事件学习笔记
- jQuery学习笔记之DOM操作、事件绑定（2）
- [知了堂学习笔记]_JavaScript之DOM事件（许愿墙）
- jQuery学习笔记之DOM操作、事件绑定（2）
- DOM事件学习笔记
- DOM事件学习笔记
- JavaScript高级程序设计学习笔记--事件（二）(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- DOM的事件处理---学习笔记
- iOS学习笔记（2）— UIView用户事件响应
- 个人学习笔记之-DOM解析XML文件
- 【学习笔记】锋利的jQuery（二）DOM操作
- 【Java学习笔记】48：盒内组件的支撑和ActionEvent事件处理