DOM 事件
Posted shihaiying
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM 事件相关的知识,希望对你有一定的参考价值。
㈠事件流
?事件:是文档和浏览器窗口中发生的,特定的交互瞬间。
?事件流:描述的是从页面中接受事件的顺序
⑴DOM事件冒泡
定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档)。
具体讲解:
代码:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>
说明:点击按钮,浏览器就会认为:你点按钮的同时,也点击了包含这个按钮的这个容器(“div”),那么你点了这个div以后,它又认为你点了整个HTML了,那么你点了整个HTML,它又认为你点了整个document。也就是说:click事件在input上触发,那么它会一级一级往上冒,最后直到冒到document。
⑵DOM事件捕获
定义:不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件。
具体讲解:
代码:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>
说明:用事件捕获的思想:它认为最先把事件用document接收了,然后让HTML接收了,然后又让body接收,然后又让div接收了,最后才被input接收了。
㈡事件处理程序
⑴ HTML事件处理程序
含义:你的事件直接加在HTML结构里
具体解释:
代码:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="alert(‘hello‘)">
</div>
</body>
</html>
说明:直接将onclick事件加在input标签上,而且是在HTML结构里
注:并不是所有要执行的JS代码都应该写在这个地方,也可以把它封装在这个函数内
代码:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMessage()">
</div>
<script>
function showMessage(){
alert(‘hello world!‘);
}
</script>
</body>
</html>
HTML事件的缺点:HTML和JS代码紧密的耦合在一起
具体解释:如果要更换事件处理程序,就要修改两个地方:HTML代码和JS函数
⑵ DOM0级事件处理程序
这种方法是一种较为传统的方式:把一个函数赋值给一个事件的处理程序属性
这是用的比较多的方法,原因是简单,跨浏览器的优势
代码示例:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
</div>
<script>
function showMes(){
alert(‘hello world!‘);
}
var btn2=document.getElementById(‘btn2‘); //取得btn2按钮对象
btn2.onclick=function(){ //给btn2添加onclick属性
alert(‘这是通过DOM0级添加的事件!‘);
}
btn2.onclick=null; //删除onclick属性
</script>
</body>
</html>
优点:1)没有HTML事件的缺点
2)可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。
⑶ DOM2级事件处理程序
①DOM2级事件定义了两个方法:
用于处理指定和删除事件处理程序的操作
addEventListener() 和 removeEventListener()。
②接收三个参数:
1) 要处理的事件名
2) 作为事件处理程序的函数
3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)
③代码示例:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert(‘hello world!‘);
}
var btn2=document.getElementById(‘btn2‘);
var btn3=document.getElementById(‘btn3‘);
btn2.onclick=function(){
alert(‘这是通过DOM0级添加的事件!‘);
}
btn2.onclick=null;
//DOM2级事件
btn3.addEventListener(‘onclick‘,showMes,false); //给btn3添加一个事件监听程序 兼容各种浏览器
//删除事件
btn3.removeEventListener(‘onclick‘,showMes,false);
</script>
</body>
</html>
④优点:可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。
代码示例:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert(‘hello world!‘);
}
var btn2=document.getElementById(‘btn2‘);
var btn3=document.getElementById(‘btn3‘);
btn2.onclick=function(){
alert(‘这是通过DOM0级添加的事件!‘);
}
btn2.onclick=null;
//DOM2级事件
btn3.addEventListener(‘onclick‘,showMes,false);
btn3.addEventListener(‘onclick‘,function(){
alert(this.value);引用被触发的元素
},false);
</script>
</body>
</html>
注意:在IE浏览器中不起作用。
⑷IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
②接收相同的两个参数:
事件处理程序的名称和事件处理程序的函数
③不使用第三个参数的原因:IE8及以更早的浏览器版本只支持事件冒泡!
代码示例:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert(‘hello world!‘);
}
var btn2=document.getElementById(‘btn2‘);
var btn3=document.getElementById(‘btn3‘);
btn2.onclick=function(){
alert(‘这是通过DOM0级添加的事件!‘);
}
btn2.onclick=null;
//IE事件处理程序
btn3.attachEvent(‘onclick‘,showMes);
btn3.detachEvent(‘onclick‘,showMes);
</script>
</body>
</html>
注意:只在IE浏览器和Opera浏览器中使用
⑸跨浏览器的事件处理程序
①方法:恰当的使用能力检测
②问题:如何实现跨浏览器解决事件处理程序?
通过将增加和删除封装在一个对象里面,封装了两个方法,每个方法都进行了能力检测,你支持这个方法,就用这个方法,不支持这个方法,就用所支持的方法。
③代码示例:
<html>
<head>
<title>事件流<title>
<meta charset="utf-8"></head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
</div>
<script>
function showMes(){
alert(‘hello world!‘);
}
var btn2=document.getElementById(‘btn2‘);
var btn3=document.getElementById(‘btn3‘);
btn2.onclick=function(){
alert(‘这是通过DOM0级添加的事件!‘);
}
btn2.onclick=null;
//跨浏览器事件处理程序
vareventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=handler;
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=null;
}
}
}
eventUtil.addHandler(btn3,‘click‘,showMes);
eventUtil.removeHandler(btn3,‘click‘,showMes);
</script>
</body>
</html>
以上是关于DOM 事件的主要内容,如果未能解决你的问题,请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段
Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段