事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
var oBtn = document.getElementById('btn');
// oBtn.onclick = function(){
// alert(1);
// };
// addEventListener(操作，fn，false) 默认为false（表示没有捕获阶段） true表示有捕获
oBtn.addEventListener('click',function(){
console.log('按钮 处于捕获阶段');
alert(1);
},true);
document.body.addEventListener('click',function(){
console.log('body 处于捕获阶段');
},true);
document.documentElement.addEventListener('click',function(){
console.log('html 处于捕获阶段');
},true);
document.addEventListener('click',function(){
console.log('文档 处于捕获阶段');
},true);
//
oBtn.addEventListener('click',function(){
console.log('按钮 处于冒泡阶段');
},false);
document.body.addEventListener('click',function(){
console.log('body 处于冒泡阶段');
},false);
document.documentElement.addEventListener('click',function(){
console.log('html 处于冒泡阶段');
},false);
document.addEventListener('click',function(){
console.log('文档 处于冒泡阶段');
},false);
</script>
</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事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。
冒泡事件的处理
<script>
$(function(){
$('.btn').click(function(event){
// 在所有的事件回调函数中 都会有默认的事件对象
// event原声js的事件对象
console.log(event);
console.log($(this).text());
alert($(this).text());
// 阻止事件冒泡
event.stopPropagation();
});
$('.father').click(function(event){
alert('father');
// event.stopPropagation();
console.log('2333333');
// return fasle 即阻止了默认事件 有阻止了冒泡
return false;
});
$('a').click(function(e){
// 阻止默认事件（跳转）
e.preventDefault();
alert('a a a');
});
$('body').click(function(){
alert('body');
});
});
</script>
评论简易抽屉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.commentBtn{
font-size: 30px;
color: aliceblue;
cursor: pointer;
}
.box{
300px;
background-color: #666666;
line-height: 100px;
text-align: center;
}
.comment{
position: relative;
300px;
height: 500px;
background-color: darkgrey;
}
.comment span.close{
position: absolute;
top: 0;
right: 3px;
color: #000000;
cursor: pointer;
font-size: 20px;
line-height: 26px;
}
.comment button.hide{
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<span class="commentBtn">评论</span>
<div class="comment" style="display:none;">
<span class="close active">X</span>
<button class="hide active">收起</button>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 点击评论 展开评论列表
$('.commentBtn').click(function(e){
e.stopPropagation();
$('.comment').delay(70).slideDown(200);
});
// 收起
$('.comment span.active,.comment button.active').click(function(e){
e.stopPropagation();
$('.comment').stop().slideUp(100);
});
$('.box').click(function(e){
e.stopPropagation();
// $('.comment').stop().slideUp(100);
});
$('body').click(function(e){
// e.stopPropagation();
$('.comment').stop().slideUp(100);
});
});
</script>
</body>
</html>
事件对象
<script>
$(function(){
$('button').click(function(e){
// currentTarget 当前事件的目标对象 == $('button')
console.log(e.currentTarget);
// target 是事件的触发对象 是js对象 == 'button'
console.log(e.target);
console.log(e.target.innerText);
console.log($(this).text());
// e.currentTarget == this e.target == this
console.log(this == e.currentTarget);
console.log(this == e.target);
// 在用事件时 99%都需要阻止冒泡
e.stopPropagation();
});
$('body').click(function(e){
// console.log(e.currentTarget);
console.log(e.target);
});
$('html').click(function(e){
// console.log(e.currentTarget);
console.log(e.target);
});
// jquery中没有监听输入内容的方法
// $('input').input(function(e){
// console.log(e.target.value);
// });
// 原生js 监听input内容 双向数据绑定
$('.content').text($('input').val());
$('input')[0].oninput = function(e){
console.log(e.target.value);
$('.content').text(e.target.value);
};
});
</script>
jquery的常用事件
双击/单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 双击调用了两次单击
// 两次单击之间的的事件差是300ms，如果小于300ms 表示双击
var timmer = null;
$('button').click(function(e){
// 如果是双击事件 要阻止 两次单击事件的调用
clearTimeout(timmer);
timmer = setTimeout(function(){
console.log('单击了');
},300);
});
$('button').dblclick(function(e){
clearTimeout(timmer);
console.log('双击了');
});
});
</script>
</body>
</html>
鼠标移入移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
200px;
height: 200px;
background-color: #666666;
}
.child{
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<p class="child">
q1ang
</p>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 鼠标穿过被选元素和被选子元素 会触发此事件
// $('.father').mouseover(function(e){
// console.log('移入')
// });
// $('.father').mouseout(function(e){
// console.log('移出')
// });
// 鼠标只穿过被选元素 会触发此事件
$('.father').mouseenter(function(e){
console.log('进入')
});
$('.father').mouseleave(function(e){
console.log('离开')
});
});
</script>
</body>
</html>
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.shopCart{
100%;
background-color: #666666;
}
.shopCart>div{
position: relative;
100px;
background-color: hsl(0, 3%, 23%);
}
.shopCart span{
font-size: 18px;
line-height: 40px;
cursor: pointer;
color: aliceblue;
}
.content{
position: absolute;
top: 40px;
left: 0;
300px;
height: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div class="shopCart">
<div>
<span>购物车</span>
<div class="content" style="display:none"></div>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 合成事件 mouseleave mouseenter
$('.shopCart>div').hover(function(){
$('.content').stop().slideDown(300);
},function(){
$('.content').stop().slideUp(300);
});
});
</script>
</body>
</html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="getS">
<input type="text" name="wd">
<input type="submit" value="搜索">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 文本选中的时候
$('input[type=text]').select(function(){
console.log('选中');
});
$('form').submit(function(e){
e.preventDefault();
// 未来 自己发请求
console.log('submit');
});
});
</script>
</body>
</html>
聚焦失焦，键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" name="user" id="">
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// 获取焦点
$('input[type=text]').focus();
// 失焦
setTimeout(function(){
$('input[type=text]').blur();
},2000);
$('input[type=text]').focus(function(){
console.log('获取焦点');
});
$('input[type=text]').blur(function(){
console.log('失焦');
});
// 键盘事件
$('input').keydown(function(e){
// console.log('键盘按下',e.keyCode);
// 获取键码 e.keyCode
switch (e.keyCode) {
case 13:
console.log('回车',$(this).val());
break;
default:
break;
}
});
$('input').keyup(function(){
console.log('键盘弹起');
});
});
</script>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>q1ang</li>
<li>q2ang</li>
</ul>
<button>添加</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
// $('li').click(function(){
// alert($(this).text());
// });
$('ul').on('click','li',function(e) {
alert($(this).text());
});
// 未来 动态的往ul追加li标签 自己完成不了click()事件 -> 事件委托
$('button').click(function(){
$('ul').append('<li>...</li>');
});
});
</script>
</body>
</html>