JavaScript 事件、事件流

事件：某件事件的发生包含鼠标操作、键盘操作等

理解事件中的概念：

事件流：从页面接受事件的顺序事件捕获和事件冒泡

事件捕获：不太具体的节点更早接受事件而最具体的节点最后接受到事件

事件冒泡：事件最开始由最具体的元素然后逐渐向上传播到不具体的元素

使用事件处理程序：

HTML事件
DOM 0级事件处理程序把一个函数赋值给一个事件处理程序
DOM 2级事件处理程序 addEventLister 和 removeEventLister

要处理的事件名
作为事件处理的函数
布尔值 true 在捕获阶段调用事件处理程序 false 在冒泡阶段调用事件处理程序

事件流

<!DOCTYPE html>
<html>
<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>事件流</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body id="box">
<input type="button" id="btn1" value="按钮1" onclick="click1(event)">
<input type="button" id="btn2" value="按钮2">
<input type="button" id="btn3" value="按钮3">
<section>
<div>点击</div>
</section>
<script>
// HTML事件处理程序（写在标签上触发）
function click1(ev){
console.log('11')
console.log(ev.target.nodeName)
}
// event表示事件对象
// onclick监听事件点击时触发
// click1 表示事件发生的时候执行的函数
// DOM 0级事件处理程序
var btn2 =document.getElementById('btn2')
btn2.onclick =function(){
alert('我被攻击了')
}
btn2.onclick =null
// DOM 0级删除事件
btn2.onclick = function(){
alert('1234')
}
// DOM 2 级事件处理程序
var btn3 =document.getElementById('btn3')
btn3.addEventListener('click',aa,false)
btn3.addEventListener('click',cc,true)
// addEventListener 添加事件监听者
// 第一个参数添加事件类型不能带“on”
// 第二个参数事件发生时执行的函数不带“()”
// 第三个参数指的是在冒泡阶段或是在捕获阶段
function aa(){
alert('aaaa')
}
function cc(){
alert('cccccc')
}
btn3.removeEventListener('click',aa,false)
btn3.removeEventListener('click',aa,true) //无效
btn3.removeEventListener('click',cc,true)
// 移除事件如果添加两次事件一次是捕获阶段一次是冒泡阶段
// ---捕获、冒泡过程---
var box = document.getElementById('box')
box.addEventListener('click',function(){
alert('你好')
},true)
var sec =document.querySelector('section')
var div = document.querySelector('div')
document.documentElement.addEventListener('click',function(){alert('html-捕获')},true)
document.documentElement.addEventListener('click',function(){alert('html-冒泡')},false)
document.body.addEventListener('click',function(){alert('body-捕获')},true)
document.body.addEventListener('click',function(){alert('body-冒泡')},false)
sec.addEventListener('click',function(){alert('sec-捕获')},true)
sec.addEventListener('click',function(){alert('sec-冒泡')},false)
div.addEventListener('click',function(){alert('div-捕获')},true)
div.addEventListener('click',function(){alert('div-冒泡')},false)
// 事件捕获：即从窗口开始逐步查找最终捕获的触发事件的标签元素捕获成功后开始冒泡
</script>
</body>
</html>

发送评论编辑评论

理解事件中的概念：

使用事件处理程序：

事件流

发送评论 编辑评论

推荐文章

发送评论编辑评论