一、事件处理
1. 基本概念
（1）事件：JavaScript可以侦测到的行为（用户在页面上进行的某种操作）
页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点、键盘
（2）事件处理程序：用户进行了某种操作后，所运行的JavaScript程序段
（3）事件驱动式：当事件发生后才去执行相应的程序
（4）事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。
（5）在web中对事件流的解决方案
1）事件捕获：网景公司(Netscape)。事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。
2）事件冒泡：微软公司(Microsoft)。事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="box">hhhhhhhhhh</div>
<script>
window.onclick = function () {
alert('window')
}
document.onclick = function () {
alert('document')
}
document.documentElement.onclick = function () {
alert('html')
}
document.body.onclick = function () {
alert('body')
}
document.getElementById('box').onclick = function (e) {//参数event表示事件对象：只要有事件发生都会生成event对象
alert('div')
// if (window.event) {
// window.event.cancelBubble = true//早期浏览器（IE6~IE8）采用的方法
// } else {
// e.stopPropagation()//标准浏览器采用的方法
// }
}
</script>
</body>冒泡的前提是，父级也定义了相应的事件。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发——冒泡机制
3）w3c的事件流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理阶段采用冒泡
（6）事件捕获的实现
addEventListener（事件名，事件处理程序，事件处理方式）
参数1：事件名（click、change、load、mousedown…..）
参数2：事件处理程序
参数3：事件处理方式（true—表示采用事件捕获方式，false—-采用事件冒泡方式） //默认为false
<style>
#parent {
width: 300px;
height: 300px;
background-color: red;
}
#child {
width: 150px;
height: 150px;
background-color: blue;
}
</style>
<body>
<div id="parent">
<div id="child"></div>
</div>
<script>
document.getElementById('parent').addEventListener('click', function () {
alert('parent')
}, true)
document.getElementById('child').addEventListener('click', function () {
alert('child')
//if (window.event) {
// window.event.cancelBubble = true
//} else {
// e.stopPropagation()
//}
}, true)
</script>
</body> 2. 事件的绑定方式
（1）行内绑定式
<标签名 事件名=“事件处理程序”></标签名>
（2）动态绑定式
DOM对象名.事件名 = 事件处理程序
不同点：
1） “行内绑定式”中事件名作为标签的属性，”动态绑定式”中事件名作为DOM对象的属性
2）”行内绑定式”的事件处理程序中的this代表的是window对象，”动态绑定式”的事件处理程序中的this代表的是触发事件的DOM对象
相同点：
一个DOM对象的同一个事件只能有一个事件处理程序
（3）事件监听式：可以给DOM对象的同一个事件绑定多个事件处理程序
DOM对象.attachEvent(type, callback); //早期IE浏览器
DOM对象.addEventListener(type, callback, [capture]); //标准浏览器
3. 删除事件绑定
DOM对象.removeEventListener(type, callback);
<body>
<button id="but">我是添加按钮</button>
<button id="cancel">我是删除按钮</button>
<script>
let but = document.getElementById('but')
function f1(){
alert('1')
}
but.addEventListener('click',f1)
but.addEventListener('click',function(){
alert('2')
})
but.addEventListener('click',function(){
alert('3')
})
let cancel = document.getElementById('cancel')
cancel.addEventListener('click',function(){
but.removeEventListener('click',f1)//删除click事件上绑定的f1函数
})
</script>
</body>二、事件对象
1. 来源：当事件发生时，都会产生一个事件对象（event对象）
2. 作用：通过事件对象可以了解与事件相关的信息（DOM对象、事件的类型……）
3. 获取事件对象：
（1）早期的IE浏览器：window.event
（2）标准浏览器：将一个event对象直接传入事件处理程序中
4. 常用属性：
（1）type：代表当前事件的类型
（2）target：返回触发此事件的元素（事件的目标节点）
（3）currentTarget：返回其事件监听器触发该事件的元素
（4）bubbles：表示事件是否是冒泡事件类型
<body>
<button id="btn">我是测试按钮</button>
<br><br>
<a href="http:www.baidu.com" id="href">我是链接</a>
<div id="box" style="width:200px;height:200px;background-color:blue"></div>
<script>
document.getElementById('btn').addEventListener('click',function(e){//e表示事件对象
console.log('事件对象是：',e)//鼠标左键1，滚轮2，右键3
})
document.getElementById('btn').addEventListener('click',function(e){
console.log('事件类型是：',e.type)//click
})
document.getElementById('btn').addEventListener('mousemove',function(e){
console.log('事件类型是：',e.type)//mousemove
})
document.getElementById('btn').addEventListener('click',function(e){
console.log('事件元素是：',e.target)//<button id="btn">我是测试按钮</button>
})
document.getElementById('btn').addEventListener('click',function(e){
console.log('事件元素是：',e.currentTarget)//<button id="btn">我是测试按钮</button>
})
document.getElementById('btn').addEventListener('click',function(e){
console.log('事件流处理类型是否是冒泡：',e.bubbles)//true
})
document.getElementById('href').addEventListener('click',function(e){
e.preventDefault()//阻止默认行为
})
</script>
</body> 5. 常用函数：
（1）stopPropagation()：阻止事件冒泡
（2）preventDefault()：阻止默认行为
<body>
<button id="btn_test">测试事件对象</button>
<br><br>
<div id="div1" style="width: 100px;height:100px;background-color: red;"></div>
<br><br>
<a href="https://www.bilibili.com" id="click_a"百度</a>
<script>
document.getElementById('click_a',function(e){
e.preventDefault()
})
</script>
</body>三、事件的分类
（1）load：页面加载事件。用于body内所有标签都加载完成后才触发
（2）unload：用于页面关闭时触发，经常用于清除变量，避免内存的泄露
（1）focus：当获得焦点时触发
（2）blur：失去焦点时触发
课堂练习：表单验证（验证用户名和密码的合法性）
<div>
用户名：<input type="text" id="userName"><span id="nameInfo"></span>
<br><br>
密码：<input type="password" id="pwd"><span id="pwdInfo"></span>
</div>
<script>
let name = document.querySelector('#userName')
name.addEventListener('blur',function(){ //失去焦点
let span = document.querySelector('#nameInfo')
if(this.value === 'abc'){ //表示用户名正确
span.classList.remove('fail') //删除原有的fail
span.innerHTML = '用户名正确'
span.classList.add('ok')
}else{
span.classList.remove('ok')//删除原有的ok
span.innerHTML = '用户名错误'
span.classList.add('fail')
}
})
</script>3. 鼠标事件
（1）click：鼠标单击
（2）dblclick：鼠标双击
（3）mouseover：鼠标进入
（4）mouseout：鼠标离开
（5）change：当内容发生改变时触发—- input、select
<div id="app" style="width: 300px;height:300px;background-color:red"></div>
<script>
document.getElementById('app').addEventListener('mouseover',function(){
this.style.backgroundColor = 'blue'
})
document.getElementById('app').addEventListener('mouseout',function(){
this.style.backgroundColor = 'red'
})
</script>示例：通过select改变页面背景色
<select id="changeColor">
<option value="%">请选择</option>
<option value="blue">蓝色妖姬</option>
<option value="red">血腥玛丽</option>
<option value="green">青青草原</option>
</select>
<script>
let select = document.querySelector('#changeColor')
select.addEventListener('change',function(){
document.body.style.backgroundColor = this.value //this代表select
})
</script>（6）mousedown：当按下任意鼠标按键时触发
（7）mouseup：当释放任意鼠标按键时触发
（8）mousemove：在元素内当鼠标移动时持续触发
（1）clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）
（2）clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）
（3）pageX：鼠标指针位于文档的水平坐标（X轴坐标）
（4）pageY：鼠标指针位于文档的垂直坐标（Y轴坐标）
（5）screenX：鼠标指针位于屏幕的水平坐标（X轴坐标）
（6）screenY：鼠标指针位于屏幕的垂直坐标（Y轴坐标）
课堂练习：当鼠标在浏览器窗口中移动时，在鼠标指针旁边显示指针的坐标
<style>
#pos{
width: 30px;
height: 15px;
line-height: 15px;
text-align: center;
position: absolute; /*绝对定位*/
color:red
}
</style>
<body>
<div id="pos"></div>
<script>
window.onload = function(){
//1.获取div
let div = document.querySelector('#pos')
//2.给document绑定mousemove事件
document.onmousemove = function(e){
//2.1 获取鼠标指针在浏览器可视窗口中的坐标
let my_left = e.clientX
let my_top = e.clientY
//2.2 修改div的坐标
div.style.left = (my_left + 10)+'px'
div.style.top = my_top + 'px'
//2.3 设置div的内容
div.innerHTML = `(${my_left},${my_top})`
}
}
</script>
</body>强调：事件对象的兼容性处理
（一） 早期IE浏览器版本获取事件对象的方法：window.event
标准浏览器获取事件对象的方法：event
DOM对象.addEventListener(‘事件名称’，function(e){
let my_event = e || window.event
})
（二）早期IE浏览器对事件对象的pageX和pageY的兼容性处理：
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度
练习：当鼠标在浏览器窗口中移动时，在鼠标指针旁边显示指针的坐标
<style>
#pos {
width: 30px;
height: 15px;
line-height: 15px;
text-align: center;
position: absolute;
/*绝对定位*/
color: red
}
</style>
<body>
<!-- //当鼠标在浏览器窗口中移动时，在鼠标指针旁边显示指针的坐标 -->
<div id="pos"></div>
<script>
window.onload = function () {
let div = document.getElementById('pos')
document.onmousemove = function(e){
let my_left = e.clientX
let my_top = e.clientY
div.style.left = (my_left + 10) + 'px'
div.style.top = my_top + 'px'
div.innerHTML = `(${my_left},${my_top})`
}
}
</script>
</body> （1）keypress：键盘上按键按下时触发，不包含非字符按键。保存是按键的ASCII码值
（2）keydown：键盘上按键按下时触发
（3）keyup：键盘按键弹起时触发
keydown和keyup保存的是按键的虚拟键码
document.addEventListener('keydown',function(e){
console.log('keydown：',e.keyCode)
if(e.altKey){
alert('Alt')
}
if(e.ctrlKey){}
if(e.shiftKey){}
console.log(e)
console.log(e.code)
console.log(e.key)
})
document.addEventListener('keyup',function (e) {
console.log('keyup:',e.key)//key保存的是小写字母
console.log('keyCode:',e.keyCode)//keyCode保存的是ASCII值
})6. 表单事件：操作表单时触发
（1）submit：当表单提交时触发
（2）reset：当表单重置时触发
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79780.html
