DOM事件
Posted 别Null.了
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM事件相关的知识,希望对你有一定的参考价值。
目录
事件
认识事件
事件是指可以被javascript侦测到的行为,是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作,它对实现网页的交互效果起着重要的作用。
事件三要素:
- 事件源(who):触发事件的元素(谁触发了事件)
- 事件类型(what):如 click 单击事件(触发了什么事件)
- 事件处理程序(do):事件触发后要执行的代码(函数形式),也称事件处理函数(触发事件以后要做什么)
事件的操作
注册事件
在JavaScript中,注册事件(绑定事件)分为传统方式注册事件和事件监听方式注册事件。
1、传统方式
元素对象.事件 = 事件的处理程序
// 示例
oBtn.onclick = function () { }
注意:此方式具有唯一性,即同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。
2、事件监听方式(下面都是从标准浏览器来讲的)
DOM对象.addEventListener(type, callback, [capture])
//type:DOM对象绑定的事件类型,如click
//callback:事件的处理程序
//capture:默认为false,表示冒泡阶段完成事件处理,true为捕获阶段完成事件处理
注意:该方式存在浏览器兼容性问题,且注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。
删除事件
也需要考虑浏览器兼容问题。
DOM对象.onclick = null // 传统方式删除事件
DOM对象.detachEvent(type, callback) // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback) // 标准浏览器(常用)
DOM事件流
事件流是指当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播,这个过程称之为事件流。
三种方式:网景公司采用事件捕获方式;微软公司采用事件冒泡方式; W3C对两种方式进行中和和处理,规定事件发生后先实现事件捕获但不处理事件;然后到了目标阶段执行当前元素对象的事件处理程序,但它会被看成冒泡阶段的一部分;最后实现事件的冒泡,逐级对事件进行处理。
W3C对事件流的具体过程:
事件对象
认识事件对象
当一个事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是event。只有有了事件event才会存在,它是系统自动创建的,不需要传递参数。
注意:因为在事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中需要用一个形参来接收事件对象event。
事件对象的使用:
<body>
<button id="btn">获取event对象</button>
</body>
<script>
var btn = document.getElementById('btn') //通过id筛选出button按钮
btn.onclick = function(e) {
var event = e || window.event // 获取事件对象的兼容处理
console.log(event)
}
</script>
事件对象的常见属性和方法
属性 | 说明 | 浏览器 |
---|---|---|
e.target | 返回触发事件的对象 | 标准浏览器 |
e.srcElement | 返回触发事件的对象 | 非标准IE 6-IE 8使用 |
e.type | 返回事件的类型 | 所有浏览器 |
e.stopPropagation() | 阻止事件冒泡 | 标准浏览器 |
e.cancelBubble | 阻止事件冒泡 | 非标准IE 6-IE 8使用 |
e.preventDefault() | 阻止默认事件(默认行为) | 标准浏览器 |
e.returnValue | 阻止默认事件(默认行为) | 非标准IE 6-IE 8使用 |
1、e.target和this的区别
在事件处理函数中,e.target返回的是触发事件的对象,而this返回的是绑定事件的对象。
2、阻止默认行为
在实际开发中会存在有标签含有自己的默认行为,只有在确定这些行为符合要求后才能执行,因此我们可以利用事件对象的preventDefault()方法和returnValue属性,禁止所有浏览器执行元素的默认行为。需要注意的是,只有事件对象的cancelable属性设置为true,才可以使用preventDefault()方法取消其默认行为。
3、阻止事件冒泡
可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性,实现禁止所有浏览器的事件冒泡行为。
语法结构:
if (window.event) { // 早期版本的浏览器
window.event.cancelBubble = true
}else{ // 标准浏览器
e.stopPropagation()
}
4、事件委托
原理:不给每个子节点单独设置事件监听器,而是把事件监听器设置在其父节点上,让其利用事件冒泡的原理影响到每个子节点。也就是说只给父元素注册事件,让处理代码在父元素的事件中执行。(只操作一次DOM,提高了程序的性能)
鼠标事件
鼠标事件的常用方法
事件名称 | 事件触发时机 |
---|---|
onclick | 单击鼠标左键时触发 |
onfocus | 获得鼠标指针焦点触发 |
onblur | 失去鼠标指针焦点触发 |
onmouseover | 鼠标指针经过时触发 |
onmouseout | 鼠标指针离开时触发 |
onmousedown | 当按下任意鼠标按键时触发 |
onmouseup | 当释放任意鼠标按键时触发 |
onmousemove | 在元素内当鼠标指针移动时持续触发 |
1、禁止鼠标右击菜单
contextmenu主要控制应该何时显示上下文菜单,主要应用于程序员取消默认的上下文菜单。
document.addEventListener('contextmenu',function(e){
e.preventDefault()
})
2、禁止鼠标选中
selectstart事件是鼠标开始选择文字时就会触发,如果禁止鼠标选中,需要禁止该事件的默认行为。
document.addEventListener('selectstart',function(e){
e.preventDefault()
})
鼠标事件对象
鼠标事件对象MouseEvent,是跟鼠标事件相关的一系列信息的集合,可以用来获取当前鼠标的位置信息,鼠标事件位置属性如下:(部分属性存在浏览器兼容问题)
位置属性(只读) | 描述 |
---|---|
clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标) |
clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标) |
pageX | 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容 |
pageY | 鼠标指针位于文档的垂直坐标(Y轴坐标),IE 6~IE 8不兼容 |
screenX | 鼠标指针位于屏幕的水平坐标(X轴坐标) |
screenY | 鼠标指针位于屏幕的垂直坐标(Y轴坐标) |
实例:图片跟随鼠标移动
分析:使用鼠标指针移动事件mousemove,每次鼠标移动,都会获得最新的鼠标指针坐标,把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。
<html>
<style>
img{
position: absolute;
top: 2px;
}
</style>
<body>
<img src="../images/5.jpg">
<script>
var pic = document.querySelector('img')
document.addEventListener('mousemove',function(e){
var x = e.pageX
var y = e.pageY
// var x = e.clientX
// var y = e.clientY
// var x = e.screenX
// var y = e.screenY
pic.style.left = x-50 + 'px'
pic.style.top = y-50 + 'px'
})
</script>
</body>
</html>
键盘事件
键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。
键盘事件的常用方法
事件名称 | 事件触发时机 |
---|---|
keypress | 某个键盘按键被按下时触发,不识别功能键,如Ctrl、Shift、箭头等 |
keydown | 某个键盘按键被按下时触发 |
keyup | 某个键盘按键被松开时触发 |
keypress、keydown和keyup事件区别:keypress事件保存的按键值是ASCII码,keydown和keyup事件保存的按键值是虚拟键码,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写,而keypress区分字母大小写。
键盘事件对象
键盘事件对象KeyBoardEvent,是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值,进而可以判断用户按下了哪个键。
实例:检测用户是否按下s键,若按下则将光标定位到搜索框。
<html>
<body>
搜索:<input type="text">
<script>
var search = document.querySelector('input')
document.addEventListener('keyup',function(e){ //e代表键盘事件的对象KeyBoardEvent
if(e.keyCode === 83){ //如果按下s键则焦点定位到框中
search.focus()
}
})
</script>
</body>
</html>
总结
这篇文章主要讲了事件、事件对象、鼠标事件以及键盘事件等内容,这些都是DOM事件的一些常用操作,我们应熟练掌握。希望这篇文章可以带给你帮助。
以上是关于DOM事件的主要内容,如果未能解决你的问题,请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段
Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段