JavaScript Basic Learning Events
Registration issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
// 使用传统方法注册事件 后面的事件会覆盖前面的事件
var btn = document.querySelectorAll('button');
btn[0].onclick = function() {
alert('hi~');
}
btn[0].onclick = function() {
alert('hello~');
}
// 使方法监听注册事件 addEventListener()
// 里面的事件类型是字符串 需要加引号，而且不带on
// 同一个元素 同一个事件可以添加多个监听器(事件处理程序)
btn[1].addEventListener('click', function() {
alert(22);
})
btn[1].addEventListener('click', function() {
alert(33);
})
</script>
</body>
</html>
delete event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(1111);
// 传统方法移除事件
divs[0].onclick = null;
}
divs[1].addEventListener('click', fn);
function fn() {
alert(2222);
// removeEventListener 删除事件
divs[1].removeEventListener('click', fn);
}
</script>
</body>
</html>
event object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<script>
var div = document.querySelector('div');
// div.onclick = function(event) {
// console.log(event);
// }
//官方解释: event对象代表事件的状态,比如键盘按键的状态鼠标的位置、鼠标按钮的状态。
// 事件发生后, 跟事件相关的一系列信息数据的集合都放到这个对象里面, 这个对象就是事件对象 event, 它有很多属性和方法。
div.addEventListener('click', function(e) {
console.log(e);
});
</script>
</body>
</html>
The difference between e.target and this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
123
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// e.target 返回的是触发事件的对象 this返回的是绑定事件的对象
// e.target 点击哪个就返回哪个 this 哪个元素绑定了事件就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target); //<div> 123</div>
console.log(this); //<div> 123</div>
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
console.log(e.target); //<li></li>
console.log(this); //<ul></ul>
})
</script>
</body>
</html>
Block default behavior (event)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>123</div>
<a href="https://www.baidu.com/">百度</a>
<script>
// e.type返回事件的类型
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.type);
})
div.addEventListener('mouseover', function(e) {
console.log(e.type);
})
div.addEventListener('mouseout', function(e) {
console.log(e.type);
})
// e.preventDefault(); 阻止默认事件(例如下图的跳转事件) 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault();
})
</script>
</body>
</html>
prevent events from bubbling
<!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 {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
// 这里有停止冒泡的方法，就不会弹出father和document的对话框
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
</html>
event delegation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>JavaScript学习中</li>
<li>JavaScript学习中</li>
<li>JavaScript学习中</li>
<li>JavaScript学习中</li>
<li>JavaScript学习中</li>
</ul>
<script>
// 之前学习如果想要完成点击每个li都能进行弹出对话框，是需要for循环给每个li绑定事件
// 但我们通过事件委托给父节点就可以完成要求的功能
//事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert(2233);
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
</html>