第十五章 事件流
2021-05-24 本文已影响0人
扶光_
什么是事件流?
事件流描述的就是页面中接收事件的顺序。
坦白的说也就是事件在页面中的传播顺序
事件流分为两种1.是事件冒泡 2.事件捕获
一，事件冒泡(0级和二级都可以)
addEventListener(事件名称,事件函数,true/false)
true:在捕获阶段执行
false:在冒泡阶段执行
像泡泡一样逐层往上触发
特点必须是同类型的事件进行传播
事件冒泡
如
<div>
<p>
<img src="./img/1.jpg" alt="" >
</p>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var op = document.getElementsByTagName("P")[0];
var oimg = document.getElementsByTagName("img")[0];
//绑定事件
div.addEventListener("click",function(){
alert("div")
},false)
op.addEventListener("click",function(){
alert("p")
},false)
oimg.addEventListener("click",function(){
alert("img")
},false)
</script>
冒泡排序
当我们点击图片的时候,他弹窗弹出的顺序依次是img>p>div
二,事件捕获
自上而下执行代码
把addEventListener里面参数设置为true
事件捕获
<div>
<p>
<img src="./img/1.jpg" alt="" >
</p>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var op = document.getElementsByTagName("P")[0];
var oimg = document.getElementsByTagName("img")[0];
//绑定事件
div.addEventListener("click",function(){
alert("div")
},true)
op.addEventListener("click",function(){
alert("p")
},true)
oimg.addEventListener("click",function(){
alert("img")
},true)
</script>
执行顺序是:div>p>img
三,如果在事件传播中,同时出现冒泡和捕获 ,那么执行顺序是什么呢
如 我们把中间的p标签设置为捕获 其他两个为冒泡 然后控制台输出一下
<div>
<p>
<img src="./img/1.jpg" alt="" >
</p>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var op = document.getElementsByTagName("P")[0];
var oimg = document.getElementsByTagName("img")[0];
//绑定事件
div.addEventListener("click",function(){
console.log("div");
},false) //事件冒泡
op.addEventListener("click",function(){
console.log("p");
},true) //事件捕获
oimg.addEventListener("click",function(){
console.log("img");
},fasle) //事件冒泡
</script>
同时出现
因为事件冒泡和时间捕获同时出现的执行顺序是
**捕获>事件源>冒泡 **
一, event事件对象
指的是与特定事件先关且包含事件详细信息的对象
坦白的说:就是将event当成一个事件处理程序的参数,调用事件时,传入进去,使用 它的方法
写法:
btn[0].addEventListener("click",function(event){ //将event事件当做参数传入
event=event||window.event//兼容写法
alert("第一个点击事件")
},false)
然后下面来写几种event事件的一些方法及需要注意的兼容性问题
1.阻止事件冒泡 stopPropagation()
兼容:cancelBubble代替stopPropagation()
if(event.stopPropagation()){
event.stopPropagation()
}else{
event.cancelBubble = true;
}
2.preventDefault() 取消默认操作 如a标签的跳转页面
兼容:returnValue值为false
if(event.preventDefault()){
event.preventDefault()
}else{
event.returnValue=false
}
3. stopImmeditaePropagation() 停止当前进程 也是阻止事件
和第一个不同点是: 还可以把这个元素绑定的同类型事件也进行阻止
二,event事件属性
属性和方法怎么取分呢 在于是否有()
1. event.type属性 获取事件发生的类型
<script>
document.addEventListener("click",function(event){
event = event || window.event //IE兼容写法
console.log(event.type)
},false)
</script>
event.type
这个属性会获取事件的类型
2. event.target属性 返回事件的目标节点(谁来触发的)
target的兼容:
target = event.target || event.srcElement
如我们给图片绑定一个点击事件 然后返回target是怎么样
<body>
<img src="./img/1.jpg" width="100px" height="100px" alt="">
<script>
var img = document.getElementsByTagName("img")[0];
img.addEventListener("click",function(event){
event = event || window.event
target = event.target || event.srcElement
console.log(target);
},false)
</script>
</body>
event.target
三,event鼠标事件属性
- 1.event.screenX
参考对象是屏幕
- 2.event.clientX
参考对象浏览器窗口
- 3.event.pageX
参考对象基于文档
<script>
document.addEventListener("click",function(){
event = event || window.event
//参考对象是屏幕
console.log(event.screenX);// Y
//参考对象浏览器窗口
console.log(event.clientX);//Y
//参考对象基于文档
console.log(event.pageX);//Y
},false)
当我们个文档一个点击事件 ,当点击文档任意位置出现的值
鼠标事件
注意:现在所呈现的值是一样的 但page是基于内容多少来进行的 和client是不一样的
四,event键盘事件
- keyCode 获取键码值
<script>
document.addEventListener("keydown",function(){
event = event || window.event
console.log(event.keyCode);
},false)
</script>
当我们摁下enter键看看log出来的是什么
keyCode
会输出对应的键码值
如Enter的键码值是13,空格的键码值是32
