事件处理
注册事件
传统的注册方式:
如写在行内样式里οnclick=" 函数名() ",或者用 元素.οnclick=function(){}.来注册,
特点是注册事件的唯一性,
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面的
方法监听的方式:
addEventListener()它是一个方法,同一个元素同一个事件可以注册多个处理函数,按照注册顺序依次执行 ,下面是代码书写的三种方式
//书写方式1.
元素.addEventListener('事件类型字符串',function(){ //事件类型字符串如'click'
事件处理函数
},可选参数默认是false)
//书写方式2.函数写在外面再调用
元素.addEventListener('事件类型字符串',fn)//这里的fn不用加()括号
function fn(){
事件处理函数
}
//书写方式3.
元素.addEventListener('事件类型字符串',e=>{//e是触发事件对象
事件处理函数
})解绑事件
有些按钮只让用户点击一次后就不再可以点击,需要解绑事件
元素.onclike=function(){
事件处理函数
//传统方式删除
元素.onclike=null;
}
//方法监听解绑的方式
元素.addEventListener('事件类型字符串',fn)//这里的fn不用加()括号
function fn(){
事件处理函数
元素.removeEventListener('事件类型字符串',fn)
}DOM事件流(事件绑定处理的逻辑)
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
比如我们注册了一个div事件:
事件阶段
1.捕获阶段:
先是Document接收到点击事件,发现没有绑定,不会做处理函数,然后往下传播到html再到body依次传播到div发现事件绑定,然后执行事件处理函数.
2.事件执行阶段
3.冒泡阶段:又是一级级的返回去
捕获和冒泡代码中执行方式,和阻止事件的继续捕获和冒泡的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.son {
height: 200px;
width: 200px;
background-color: aqua;
}
.father {
height: 400px;
width: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//dom事件流三个阶段
//1.S代码中只能执行捕获或者冒泡其中的一个阶段。
//2.onclick和attachEvent(ie)只能得到冒泡阶段。
//3.捕获阶段如果addEventListener第三个参数是true那么则处于捕获阶段,
var son = document.querySelector('.son');
var father = document.querySelector('.father');
//现在处理捕获阶段,先执行father再执行son
son.addEventListener('click', function () {
alert('son');
}, true);
father.addEventListener('click', function () {
alert('father');
/* 阻止事件继续捕获或者冒泡,只执行到father就停止继续捕获,冒泡也是同理 */
e.stopPropagation();
}, true);
//如果参数为false那么处于冒泡阶段(false是默认值,可以省略)
//先执行son再执行father
</script>
</body>
</html>事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: aqua;
}
</style>
</head>
<body>
<div>---</div>
<script>
var div = document.querySelector('div');
/* 1.e为一个事件对象,写到小括号里当形参来看,可以自己命名
2.事件对象只有注册了事件才会存在,系统自动帮我们创建,不需要传递参数
3.事件对象是我们事件的一系列相关数据集合,里面有鼠标点击的位置绑定的是什么操作等
4.注册点击对象才会有事件对象,写在行内样式里的点击事件没有事件对象 */
// 传统方式
div.onclick = function (e) {
console.log(e);
}
//方法监听方式
div.addEventListener('click', function (event) {
console.log(event);
})
div.addEventListener('click', e => {
console.log(e);
})
</script>
</body>
</html>常见的属性和方法(其余方法可以控制台打印事件对象出来找)
| 事件对象的常见属性和方法 | 说明 |
| e.target | 返回触发事件的对象 |
| e.type | 返回事件的类型,比如鼠标点击或者离开(需要先注册鼠标点击或者离开事件) |
| e.preventDefault() | 阻止默认事件(默认行为),比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 |
e.traget和this的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<style type="text/css">
li,
div {
width: 100px;
height: 100px;
background-color: pink
}
</style>
</head>
<body>
<div></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var div = document.querySelector('div');
var ul = document.querySelector('ul');
div.addEventListener('click', function (e) {
console.log(e.target);
console.log(this);
})//结果返回的都是<div></div>
ul.addEventListener('click', function (e) {
//e.target返回的是触发事件的元素
console.log(e.target);//点击到<li></li>所以返回的是<li></li>
console.log(this);//绑定的是<ul></ul>所以返回的是<ul></ul>
})
</script>
</body>
</html>阻止事件默认行为.比如点击a标签超链接会自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<a href="https://www.bilibili.com/video/BV1k4411w7sV?p=65">JS</a>
<script type="text/javascript">
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();//阻止a超链接默认跳转功能,传统方式注册事件同样可以调用这个方法
})
</script>
</body>
</html>事件委托(利用事件冒泡原理)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script type="text/javascript">
//利用事件冒泡原理,只需要绑定父元素ul,当点击子元素li的时候开始冒泡到父元素,然后执行绑定事件的函数.
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
//e.target返回的是触发事件的元素,所以可以知道鼠标点击了哪个li
e.target.style.backgroundColor = 'pink';//点击谁谁就变色
});
</script>
</body>
</html>
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
