JavaScript 事件
一、关于事件
1、什么是事件
事件就是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。事件通常和函数结合使用。
事件的作用：
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）
二、事件的使用（重点）
1、HTML事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
语法：on+事件=‘函数();……‘
实例
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button><p id="demo"></p>
以上实例中，JavaScript 代码将修改 id=”demo” 元素的内容。
2、事件类型
（1）鼠标事件
| 属性 | 描述 | DOM |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |
（2）键盘事件
| 属性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某个键盘按键被按下。 | 2 |
| onkeypress | 某个键盘按键被按下并松开。 | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
（3）表单事件
| 属性 | 描述 | DOM |
|---|---|---|
| onblur | 元素失去焦点时触发 | 2 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| onfocus | 元素获取焦点时触发 | 2 |
| onfocusin | 元素即将获取焦点时触发 | 2 |
| onfocusout | 元素即将失去焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) | |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
| onsubmit | 表单提交时触发 | 2 |
（4）剪贴板事件
| 属性 | 描述 | DOM |
|---|---|---|
| oncopy | 该事件在用户拷贝元素内容时触发 | |
| oncut | 该事件在用户剪切元素内容时触发 | |
| onpaste | 该事件在用户粘贴元素内容时触发 |
3、event: 事件对象(获取事件对象和事件源(触发事件的元素)
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
- 什么时候会产生Event 对象呢?
- 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
- 事件通常与函数结合使用，函数不会在事件发生前被执行！
<!-- event: 事件对象 --><button onclick="show(event)">click</button><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>function show(ev) {// ev中有二个特别重要的属性// 1. 事件绑定者(主体)console.log(ev.currentTarget);// 2.事件触发者(目标)console.log(ev.target);console.log(ev.target === ev.currentTarget);}</script>
4、事件冒泡
子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件
<body><!-- event: 事件对象 --><button onclick="show(event)">click</button><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>const lis = document.querySelectorAll("li");// 循环给每一个li添加点击事件lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));// onclick这种通过事件属性的添加的事件,是冒泡事件document.querySelector("ul").onclick = ev => console.log(ev.currentTarget);document.querySelector("body").onclick = ev => console.log(ev.currentTarget);document.documentElement.onclick = ev => console.log(ev.currentTarget);</script></body>
5、阻止事件冒泡
在js中通过stopPropagation方法阻止事件继续传递。
lis.forEach(li => (li.onclick = ev =>{ev.stopPropagation();//IE以外console.log(ev.currentTarget)}));
5、事件委托
事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡，如果事件冒泡到ul之前被禁用的话，那以下代码就无法工作了。
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul><script>document.querySelector("ul").onclick = ev => {// 1.事件绑定者// console.log(ev.currentTarget);// 2. 事件触发者// console.log(ev.target);console.log(ev.target.textContent);// console.log(ev.target === ev.currentTarget);};</script>
6、addEventListener()方法（可用于事件注册、监听。委派）
平常我们绑定事件的时候用dom.onxxxx=function(){}的形式，这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。
但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄，使用addEventListener()方法就能解决这个需求。
（1）语法
// element.addEventListener(事件类型, 事件回调,是否冒泡false/true)element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
（2）实例
a、动态注册
<button id="myBtn">点击</button><script>const btn = document.querySelector("#myBtn")btn.addEventListener("click", () => alert("Hello World!"))</script>
上面代码示例使用 addEventListener() 方法将 click 事件附加到按钮。
b、向相同元素添加多个事件处理程序
<button id="myBtn">点击</button><script>const btn = document.querySelector("#myBtn")btn.addEventListener("click", () => alert("Hello World!"))btn.addEventListener("click", () => alert("JavaScript!"))</script>
c、自定义事件与事件派发
<button id="myBtn">点击</button><script>const btn = document.querySelector("#myBtn")let i = 0;btn4.addEventListener("click", () => {console.log("恭喜你, 又赚了: " + i + " 元");i += 0.5;});// 创建一个自定义事件const myclick = new Event("click");// setTimeout: 定时器,用于执行一次性的定时任务// setInterval: 定时器, 用于执行间歇性的定时任务// btn4.dispatchEvent(myclick);setInterval(() => btn4.dispatchEvent(myclick), 3000);</script>
