12，前端-事件流-单击-双击-单向数据流-事件对象-位置信息
前端-事件流-单击-双击-单向数据流-事件对象-位置信息
事件流的概念(重点)
事件的概念
HTML中与javascript交互是通过事件驱动来实现的，例如⿏标点击事件、页⾯的滚动事件onscroll等等，可以向⽂档或者⽂档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进⾏调⽤的，就需要了解⼀下“事件流”的概念。
什么是事件流
事件流描述的是从页⾯中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
①事件捕获阶段；
②处于⽬标阶段；
③事件冒泡阶段
js中还有另外⼀种绑定事件的⽅式，下⾯代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
var oBtn = ElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
绑定事件的代码
看控制台的输出:
1、addEventListener
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个⽅法接收3个参数：要处理的事件名、作为事件处理程序的函数和⼀个布尔值。最后这个布尔值参数如果是true，表⽰在捕获阶段调⽤事件处理程序；如果是false，表⽰在冒泡阶段调⽤事件处理程序。
2、document、documentElement和document.body三者之间的关系：
document代表的是整个html页⾯；
document.documentElement代表的是<html>标签；
document.body代表的是<body>标签；
接着我们就来聊聊上⾯的例⼦中输出的结果为什么是这样：
在标准的“DOM2级事件”中规定，事件流⾸先是经过事件捕获阶段，接着是处于⽬标阶段，最后是事件冒泡阶段。这⾥可以画个图⽰意⼀下:
⾸先在事件捕获过程中，document对象⾸先接收到click事件，然后事件沿着DOM树依次向下，⼀直传播到事件的实际⽬标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
需要注意的点：由于⽼版本的浏览器不⽀持事件捕获，因此在实际开发中需要使⽤事件冒泡，在由特殊需要时再使⽤事件捕获
补充知识了解即可：
1、IE中的事件流只⽀持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进⾏相应的操作。
2、在DOM事件流中，实际的⽬标在“捕获阶段”不会接收到事件。⽽是在“处于⽬标阶段”被触发，并在事件处理中被看成“冒泡阶段”的⼀部分。然后，“冒泡阶段”发⽣，事件⼜传播回⽂档。
Jquery的常⽤事件,
⿏标移动事件
mouse:⿏标移动事件
⽰例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class='box'></div>
<script src="jquery.js"></script>
<script>
$(function(){
// ⿏标移动事件
$('.box').mousemove(function(event) {
// ⿏标在移动的时候就会输出1
console.log(1);
// 输出的event是⼀个对象，后⾯跟点⽅法，可以进⾏取值
console.log(event);
console.log(event.pageX);
});
})
</script>
</body>
</html>
⿏标移动事件
⿏标移⼊移出触发事件
mouseover()/out():⿏标指针穿过/离开被选元素或者当前元素的⼦元素，会触发事件
⽰例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.
box{
width: 200px;
height: 200px;
background-color: red;
}
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<script src="jquery.js"></script>
<script>
$(function(){
$('.box').mouseover(function(event) {
console.log('⿏标悬浮了');
});
$('.box').mouseout(function(event) {
console.log('⿏标移出了');
});
})
</script>
</body>
</html>
注意区分在没有⼦元素时的效果
当⼦元素与⽗元素之间以有缝隙的时候，会导致⼦元素可能出不来的效果,⽰例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
display: none;
top:100px;
/*注意这有缝隙的时候,⼦元素已经隐藏了，就出不来了,*/
top:102px;
position: absolute;
}
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<script src="jquery.js"></script>
<script>
$(function(){
$('.box').mouseover(function(event) {
console.log('⿏标悬浮了');
$(this).children('.child').css('display','block');
});
$('.box').mouseout(function(event) {
console.log('⿏标移出了');
$(this).children('.child').css('display','none');
});
})
</script>
</body>
</html>
mouseover/out
⿏标进⼊/离开触发事件
mouseenter()/leave():⿏标指针在只在穿过/离开被选元素触发事件.
⽰例代码：注意区分跟mouseover/out的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
display: none;
top:100px;
position: absolute;
}
</style>
</head>
<body>
<div class='box'>
</div>
<script src="jquery.js"></script>
<script>
$(function(){
$('.box').mouseenter(function(event) {
console.log('⿏标进⼊');
$(this).children('.child').css('display','block');
});
$('.box').mouseleave(function(event) {
console.log('⿏标离开');
$(this).children('.child').css('display','none');
});
})
</script>
</body>
</html>
mouseenter/leave事件
⿏标聚焦/失去焦点触发事件(不⽀持冒泡)
focus/blur:⿏标聚焦和失去焦点触发事件
⽰例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
display: none;
top:100px;
position: absolute;
}
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<input type="text">
<script src="jquery.js"></script>
<script>
$(function(){
$('input').focus(function(event) {
console.log('⿏标聚焦了')
});
$('input').blur(function(event) {
console.log('⿏标失焦了')
});
})
</script>
</body>
</html>
focus/blur
点输⼊框⾥⾯就是聚焦了，点外⾯就是失焦了.
键盘按键按下/弹起触发事件(不⽀持冒泡) keydown()/up()
⽰例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
display: none;
top:100px;
position: absolute;
}
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<input type="text">
<input type="button">
<script src="jquery.js"></script>
$(function(){
// 定义⼀个函数，根据按键对应的which的值，进⾏相应的操作
function submitHanlder(){
//把数据提交到后端,⽤ajax技术
}
$('input').keydown(function(event) {
// 输出的event对象⾥⾯有which的⽅法
console.log(event);
// which会显⽰对应按键的数值，根据按键的值进⾏相应的操作
console.log(event.which);
switch (event.which) {
case 13:
// 13是回车键按键的值，进⾏相应操作
// 函数调⽤
submitHanlder()
break;
default:
// statements_def
break;
}
});
})
</script>
</body>
</html>
keydown/up
表单事件
表单元素发⽣改变时触发事件
change：表单内容发⽣改变，然后选择点击外⾯空⽩区域，触发事件,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
blur事件
<title>练习</title>
<style>
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<input type="text" value="123">
<input type="button">
<script src="jquery.js"></script>
<script>
$(function(){
$('input').change(function(){
console.log(123);
})
})
</script>
</body>
</html>
change
⽂本元素发⽣改变时触发事件
select
表单元素发⽣改变时触发事件
submit:form表单有默认的submit⾏为，当对input type=submit按钮点击的时候会触发form的默认action⾏为,
此时可以调⽤jquery的submit⽅法通过e.preventDefault()来阻⽌默认事件，这样我们就能动态的跟服务器端来发送数据了,⽰例代码：注意看代码⾏⾥的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
</style>
</head>
<body>
<div class='box'>
<div class="child"></div>
</div>
<!-- form表单不能接收数据，默认提交，不写action都提交 -->
<form action="">
<input type="text" value="123">
<input type="submit">
</form>
<script src="jquery.js"></script>
<script>
$(function(){
$('input').select(function(){
console.log(123);
});
$('form').submit(function(event) {
// 阻⽌form表单的默认提交(数据)，或者把form标签换位别的标签,⽐如div
event.preventDefault();
});
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。