一、事件是什么？
事件是用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件，浏览器会找到相应js代码并执行，我们要做的就是按照规则编写js代码放在指定位置即可。
二、怎么使用事件功能？
两种方式使用事件功能：1、增加元素的事件属性；2、调用内置对象的方法addEventListener。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random color example — event handler attribute</title>
<style>
button {
margin: 10px
}
</style>
</head>
<body>
<button onclick="bgChange()">Change color</button>
<button id="test">click</button>
<script>
// 法一：增加事件
function random(number) {
return Math.floor(Math.random() * number);
}
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
// 法二：增加事件
document.querySelector("#test").addEventListener("click", () => alert("click"));
</script>
</body>
</html>
三、核心概念
1、事件冒泡
当元素发生了某个事件，不仅会执行本元素的事件处理程序，还会一直向上寻找所有父元素对应的事件处理程序并执行。
2、事件委托
让父元素监听执行子元素的某个事件，原理：子元素没有注册事件处理程序，事件会冒泡向上寻找相应执行程序。
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
// 父元素增加 click 监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target 是被点击元素
if(e.target && e.target.nodeName == "LI") {
console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
四、Event
事件都是继承于 Event 对象。
1、event.preventDefault()
功能：不执行默认操作，但是事件还是会继续冒泡。
实例：在表单提交中，通常会做一些数据校验，如果数据不符合格式，可以用preventDefault() 方法来阻止数据发送到服务器的默认操作。更多...
form.onsubmit = function(e) {
if (fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!';
}
}
2、event.stopPropagation
功能：让事件响应到此结束，不再向上冒泡。更多...
video.onclick = function(e) {
e.stopPropagation();
video.play();
};
五、EventTarget
EventTarget 是一个 DOM 接口，可以监听、接收、移除事件。
1、EventTarget.addEventListener
功能：将 回调函数 和 元素事件 进行绑定，当事件发生时，回调函数会被执行。更多...
function clickTest(event) {
if (event.type == click) {
} else {
}
}
// 添加事件监听器
var el = document.getElementById("btnTest");
el.addEventListener("click", clickTest);
2、EventTarget.removeEventListener
删除用 EventTarget.addEventListener 注册的事件处理程序。更多...
var body = document.querySelector('body'),
clickTarget = document.getElementById('click-target'),
mouseOverTarget = document.getElementById('mouse-over-target'),
toggle = false;
function makeBackgroundYellow() {
'use strict';
if (toggle) {
body.style.backgroundColor = 'white';
} else {
body.style.backgroundColor = 'yellow';
}
toggle = !toggle;
}
clickTarget.addEventListener('click',
makeBackgroundYellow,
false
);
mouseOverTarget.addEventListener('mouseover', function () {
'use strict';
clickTarget.removeEventListener('click',
makeBackgroundYellow,
false
);
});
3、EventTarget.dispatchEvent
功能：代码中直接触发事件。更多...
实例：编程方式生成单击事件。自定义事件
function simulateClick() {
const event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
const cb = document.getElementById('checkbox');
const cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
}
六、查看所有可用事件
- 所有可用事件这里 查看>>>
