DOM 基础事件（鼠标、键盘）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM 基础事件（鼠标、键盘）相关的知识，希望对你有一定的参考价值。
参考技术A javascript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。也就是触发——响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件。
1、事件源 事件触发对象
2、事件类型 触发方式
3、事件处理程序 通过一个函数赋值方式完成
mouseover鼠标经过自身盒子会触发事件，经过子盒子也会触发，mouseenter只在经过自身盒子时候触发事件，因为mouseenter不会冒泡。
JavaScript的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。
（1）element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
（2）element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。
（1）innerText不识别html标签，里面的标签会显示出来（无法加粗换行等）
（2）innerHTML识别html标签，W3C推荐使用
（3）innerText与innerHTML可以获取标签内容，但是innerText会将空格和换行去掉，内容在一行显示
获取元素对象之后，直接调用属性进行赋值即可。比如 img.src=''
利用DOM可以操作的表单元素的属性：type、value、checked、selected、disabled（禁用）
（1）JS里面的样式采取驼峰命名法，比如：fontSize、backgroundColor
（2）JS修改style样式操作，产生的是行内样式，权重高，所以才会产生变化
（1）提前写好样式
（2）通过事件添加样式相同的类名
附：（1）适合样式较多或者功能复杂的情况（2） className会直接覆盖原有的class，所以书写时候可以使用多类名，element.className = "原类名 新类名"
一组按钮，点击其中一个，其他的要取消事件效果——使用for循环
（1）所有元素全部清除样式
（2）给当前元素设置样式
（1）element.属性 获取元素内置的属性值
（2）element.getAttribute('属性')； 可以获取自定义属性
（1）element.属性='新属性值' 只能设置元素内置的属性值
（2）element.setAttribute('属性','新属性值')；可以设置自定义属性
（3）element.removeAttribute('属性')； 移除属性
（4）H5新增获取自定义属性的方法，element.dataset.属性名 获取的是所有以data-开头的自定义属性
为了避免自定义属性与内置属性名字相同产生歧义，H5规定自定义属性以“data-”开头。
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 基础事件（鼠标、键盘）的主要内容，如果未能解决你的问题，请参考以下文章