Dom Api之事件

最新推荐文章于 2023-03-08 13:52:19 发布

WLY_Unity_Unreal

最新推荐文章于 2023-03-08 13:52:19 发布

阅读量146

点赞数

分类专栏： web前端文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/Wenliuyong/article/details/107401179

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.绑定事件

比较常用的绑定事件由两种方式,以点击事件为例来看一下,界面搭建:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>event</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="content-box">
        <button>button</button>
        <div class="num">
            0
        </div>
    </div>
</body>

</html>

//获取button
let button = document.querySelector('button');
//获取num盒子
let numDiv = document.querySelector('.num');
//声明点击时要执行的函数
let onClickBtn = function() {
    let num = Number(numDiv.innerText);
    numDiv.innerText = ++num;
}
//绑定点击事件
button.onclick = onClickBtn;

第一种方式,直接通过 element.on事件名 = 事件函数的方式来绑定事件.

第2种方式,使用element.addEventListener(事件名, 事件函数) 来绑定:

//获取button
let button = document.querySelector('button');
//获取num盒子
let numDiv = document.querySelector('.num');
//声明点击时要执行的函数
let onClickBtn = function() {
    let num = Number(numDiv.innerText);
    numDiv.innerText = ++num;
}
//绑定点击事件
button.addEventListener('click', onClickBtn);

不同的是,通过onclick赋值绑定的话只能绑定一个点击事件,而通过addEventListener可以绑定多个点击事件:

//获取button
let button = document.querySelector('button');
//获取num盒子
let numDiv = document.querySelector('.num');
//声明点击时要执行的函数
let onClickBtn = function() {
    let num = Number(numDiv.innerText);
    numDiv.innerText = ++num;
}
//绑定点击事件
button.addEventListener('click', onClickBtn);

let onClickBtn2 = function() {
    console.log(233);
}
//绑定第二个事件
button.addEventListener('click', onClickBtn2);

2.解绑事件

通过onclick绑定的事件,解绑时给onclick赋值null即可:

//获取button
let button = document.querySelector('button');
//获取num盒子
let numDiv = document.querySelector('.num');
//声明点击时要执行的函数
let onClickBtn = function() {
   let num = Number(numDiv.innerText);
   numDiv.innerText = ++num;
   if (num == 5) {
       button.onclick = null;
   }
}
//绑定点击事件
button.onclick = onClickBtn;

同样,与addEventListener对应的是removeEventListener:

//获取button
let button = document.querySelector('button');
//获取num盒子
let numDiv = document.querySelector('.num');
//声明点击时要执行的函数
let onClickBtn = function() {
   let num = Number(numDiv.innerText);
   numDiv.innerText = ++num;
   if (num == 6) {
       button.removeEventListener('click', onClickBtn);
    }
}
//绑定点击事件
button.addEventListener('click', onClickBtn);

3.事件流

Dom事件触发分为3个阶段:1.捕获阶段 2.当前阶段 3.冒泡阶段.通过代码来了解一下这几个阶段:

<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
	<style type="text/css">
		.father {
			width: 600px;
			height: 600px;
			background-color: pink;
			margin: 0 auto;
			overflow: hidden;
		}
		.son {
			width: 400px;
			height: 400px;
			background-color: #ccc;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

<script type="text/javascript">
	let fDiv = document.querySelector ('.father');
	let sDiv = document.querySelector ('.son');

	fDiv.onclick = function () {
		console.log ('father click');
	}
	sDiv.onclick = function () {
		console.log ('son click');
	}
</script>

</html>

我们通过onclick分别为父盒子和子盒子添加绑定事件,然后点击子盒子,看一下打印面板:

这时会先执行子盒子的点击事件,这种由里到外的执行顺序,就是冒泡阶段,通过onclick绑定的事件会在冒泡阶段执行.下面看一下addEventListener:

let fDiv = document.querySelector ('.father');
let sDiv = document.querySelector ('.son');

fDiv.addEventListener ('click', function () {
	console.log ('father click');
});
sDiv.addEventListener ('click', function () {
	console.log ('son click');
});

let fDiv = document.querySelector ('.father');
let sDiv = document.querySelector ('.son');

fDiv.addEventListener ('click', function () {
	console.log ('father click');
}, false);
sDiv.addEventListener ('click', function () {
	console.log ('son click');
}, false);

addEventListener可以传递第三个参数,bool类型,省略的话默认为false,从上面可以看到,为false的时候为冒泡阶段执行.

let fDiv = document.querySelector ('.father');
let sDiv = document.querySelector ('.son');

fDiv.addEventListener ('click', function () {
	console.log ('father click');
}, true);
sDiv.addEventListener ('click', function () {
	console.log ('son click');
}, true);

当第三个参数为true时,为捕获阶段执行.

4.事件对象

当我们绑定事件时,dom会给我们的绑定事件传递一个参数,里面包含了事件的一些信息:

<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
	<style type="text/css">
		.father {
			width: 600px;
			height: 600px;
			background-color: pink;
			margin: 0 auto;
			overflow: hidden;
		}
		.son {
			width: 400px;
			height: 400px;
			background-color: #ccc;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

<script type="text/javascript">
	let fDiv = document.querySelector ('.father');

	fDiv.addEventListener ('click', function (e) {
		console.log (e);
	});
</script>

</html>

看一下里面的几个常用属性:

(1)target和currentTarget

target会保存触发事件的对象,currentTarget会保存绑定当前事件的对象,比如我点击一下子盒子:

let fDiv = document.querySelector ('.father');

fDiv.addEventListener ('click', function (e) {
	console.log (e.target);
	console.log (e.currentTarget);
});

由于点击了子盒子,所以这里target为.son的div;而绑定当前点击事件的是父盒子,所以currentTarget为.father的div

(2)type

type会保存当前的事件类型:

let fDiv = document.querySelector ('.father');

fDiv.addEventListener ('click', function (e) {
	console.log (e.type);
});

(3)阻止默认行为

有一些标签自带一些默认行为,比如a标签的跳转功能,有些时候我们不需要他们执行默认行为,下面看一下阻止默认行为的方法:

<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
</head>
<body>
	<a href="https://www.baidu.com/">百度</a>
</body>

<script type="text/javascript">
	let a = document.querySelector ('a');

	a.addEventListener ('click', function (e) {
		e.preventDefault();
	});
</script>

</html>

通过e.preventDefault()可以阻止默认事件,这时点击a链接不会跳转:

(4)阻止冒泡

有时候我们可能不需要冒泡来触发父标签的事件,可以通过下面的方法:

<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
	<style type="text/css">
		.father {
			width: 600px;
			height: 600px;
			background-color: pink;
			margin: 0 auto;
			overflow: hidden;
		}
		.son {
			width: 400px;
			height: 400px;
			background-color: #ccc;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

<script type="text/javascript">
	let fDiv = document.querySelector ('.father');
	let sDiv = document.querySelector ('.son');

	fDiv.addEventListener ('click', function (e) {
		console.log ('father click');
	});
	sDiv.addEventListener ('click', function (e) {
		console.log ('son click');
		e.stopPropagation ();
	});
</script>

</html>

通过在子标签事件中调用事件参数的stopPropagetion()方法,可以阻止事件继续往上冒泡:

所以,这里点击子盒子,父盒子的点击事件不会触发.

WLY_Unity_Unreal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom Api之事件

1.绑定事件比较常用的绑定事件由两种方式,以点击事件为例来看一下,界面搭建:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
复制链接

扫一扫