一直都在按照慕课网中的学习路径学习前端,今天学习到《DOM事件探秘》,地址在这里,这篇文章的内容都是从该视频中摘出来的
在此记录一些概念笔记:
事件:是文档或浏览器窗口中发生的,特定的交互瞬间。
一、理解事件流
事件流:描述的是从页面中接受事件的顺序
IE提出的是“事件冒泡流”
Netscape提出的是“事件捕获流”
事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。
For example:
<html>
<head>
<tltle>事件流</title>
<meta charset="UTF-8" >
</head>
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>
用户点击按钮,浏览器就会认为你点击按钮的同时也点击了div,认为你点击了div就会认为你也点击了body,一直往
上,会认为你点击了document。也就是说你点击了按钮,浏览器会一级一级往上冒,认为你点击了整个document。
事件捕获流:与冒泡流截然相反,它的定义是最不具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、使用事件处理程序
①HTML事件处理程序----事件直接加在HTML结构里的---(不常使用)
缺点:HTML代码与js紧密的耦合在一起
②DOM0级事件处理程序---先将元素取出来,再对元素属性进行赋值进行事件处理
较传统的一个方式:把一个函数赋值给一个事件的处理程序属性 用的比较多的一个方式!!
优点:简单 跨浏览器
③DOM2级事件处理程序--元素.addEventListener()/元素.removeEventListener()
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener();和removeEventListener();
都需要三个参数:要处理的事件名(事件不加on,比如之前的onclick,在这里只需要写click,再比如onmouseover,在这里只需要写mouseover)、作为事件处理程序的函数(不需要加括号)和布尔值(true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序)
④IE事件处理程序--支持的浏览器(IE和OPERA)
attachEvent():添加事件
detachEvent():删除事件
都需要两个参数:事件处理程序的名称(事件加on)和事件处理程序的函数(不需要加括号)
⑤跨浏览器事件处理程序
var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){ // DOM2级
element.addEventListener(type,handler,false);
}else if(element.attachEvent){ // IE浏览器
element.attachEvent('on'+type,handler);
}else{ // DOM0级
element['on'+type]=handler;
}
},
// 删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){ <span style="font-family: Arial, Helvetica, sans-serif;">/ / DOM2级</span>
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){ <span style="font-family: Arial, Helvetica, sans-serif;">// IE浏览器</span>
element.detachEvent('on'+type,handler);
}else{ <span style="font-family: Arial, Helvetica, sans-serif;">// DOM0级</span>
element['on'+type]=null;
}
}<span style="font-family: Arial, Helvetica, sans-serif;">}</span>
事件对象event :(IE的获取是window.event 其他浏览器直接获得即可:event 所以在使用的时候这样定义:event=event || window.event)
<html>
<head>
<tltle>事件流</title>
<meta charset="UTF-8" >
</head>
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
<script>
function showMes(event) {
alert(event.type);
}
document.getElementById("btn").οnclick=function() {
showMes(this);
}
</script>
</body>
</html>
1.DOM中的事件对象
(1)type属性:用于获取事件类型 (event.type)
(2)target属性:用于获取事件目标 (event.target / event.target.nodeName)
(3)stopPropagation():用于阻止事件冒泡
(4)preventDefault():阻止事件的默认行为
2.IE中的事件对象
(1)type属性:用于获取事件类型 (event.type)
(2)srcElement属性:用于获取事件的目标
(3)cancelBubble属性:用于阻止事件冒泡(设置为true表示阻止冒泡 设置false表示不阻止冒泡)
(4)returnValue属性:用于阻止事件的默认行为(设置为false表示阻止事件默认行为)
三、不同事件类型
鼠标事件:
鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
onmousedown(用户按下任何鼠标按钮时触发)
onmousemove(当鼠标指针在元素内部移动时重复的触发)
onmouseup(当用户释放鼠标按钮时触发)
键盘事件:
keyDown(当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件)
keyPress(当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件)
keyUp(当用户释放键盘上的键时触发)
event对象的keyCode属性用于得到键盘对应键的键码值