JavaScript事件

什么是事件

通俗来说就是，用户操作鼠标或者键盘，触发了浏览器一些特定交互。比如打开某个网页，浏览器加载完成触发加载完成事件，点击时触发 click 事件等。

1、事件的组成以及其特点

事件的组成分由三部分组成

	事件源：标签、元素、节点来绑定事件
	事件类型：各种事件
	事件处理程序：

事件的特点

以on开头+事件名 并且是小写 例如 onclick oninput 等

2、事件绑定方式

1 > 直接在标签上添加对应事件 / 行内式

// 1.标签上直接添加对应事件
<div onclick=" 函数() "></div>

// 2.行内式

<div onclick="console.log('Hello World')"></div>

注:行内式绑定事件，事件直接执行引号内代码，不会执行在scripe中的事件处理程序中的代码

2 > 事件处理程序绑定 / 属性绑定

<div class="box">123123</div>

<script>
	let box = document.querySelector('.box');
	
	box.onclick = function(){
		consloe.log('你好世界')
	}
	
	box.onclick = function(){
		consloe.log('hello world')
	}
	 
</script>

注:只能绑定一个事件处理程序，如果绑定多个，只有最后一个生效

3、事件流

当你页面结构为多层嵌套时，为每一层盒子都添加了相同的事件，那么这些相同事件的执行顺序就是事件流
事件流分为三个阶段

1.捕获阶段
2.目标阶段
3.冒泡阶段

事件冒泡

	如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发
	元素->父元素->body->html->document->window

当你出发同类型事件时，先执行子元素的事件再执行父元素的事件，这个事件就是冒泡事件流。*事件冒泡一直都在*

事件捕获

从最顶级的父元素一级一级的向下找子元素触发同名事件，直到触发事件的元素为止
`当你出发同类型事件时，先执行父元素的事件再执行子元素的事件，这个事件就是捕获事件流`

正常来讲，除了 onmouseleave / onmouseenter 是捕获事件流,其他的事件都是冒泡事件流

4、事件绑定

· addEventListener() 方法用于向指定元素添加事件处理程序

标签.addEventListener('事件',函数,boolean)

参数1:事件名称，指定的事件名。
注:不要使用“on”前缀。 --例如 : onclick ——>click

参数2: function必须 。 指定于事件触发时执行的函数
注: 事件对象会作为第一个参数传入函数

参数3: 布尔值 ，指定事件是否是 冒泡 还是 捕获

· true -> 捕获
· false -> 冒泡

使用addEventListener()给元素绑定事件

 let box = document.querySelector('.box');
 
box.addEventListener('click',function(){
console.log('hello')
});

console.log('world')
	

** 优点**

1.不阻断程序运行 
	没有对页面中div进行点击  控制台已经输出 world ，说明addEventListener()不会阻断程序运行
2.不影响多个事件绑定	

5、阻止事件冒泡

event.stopPropagation()

调用该方法会阻止事件继续传播，但不会阻止其他事件程序被处理，也就是说。如果一个元素上绑定了多个事件处理程序，调用该方法只会阻止事件传播到更高层级的元素，而不会阻止同一个元素上的其他事件处理程序被触发

box1.addEventListener('click',function(){
	console.log('box1')
},true)
box2.addEventListener('click',function(e){
	e.stopPropagation();
	console.log('box2')
},true)
box3.addEventListener('click',function(e){
	console.log('box3')
},true)

在实例中，当点击box1的时候，触发e.stopPropagation()会阻止事件继续传播到box3中，所以只输出box1， box2

6、事件委托

事件委托也成为事件代理，事件委托是一种将事件处理程序绑定到一个父元素上，而不是将事件处理程序绑定到每一个子元素上，通过事件委托，可以减少事件处理程序的数量，提高效率

利用事件冒泡，把事件不添加到具体元素本身，而是添加到父元素标签上，就是事件委托

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    let list = document.querySelector('.list');

    list.addEventListener('click',(e)=>{
        console.log(e.target.innerHTML);
    })
</script>

通过将事件处理程序绑定在父元素ul上，当点击列表中内容时，可以通过event对象拿到信息，不管li有多少，只需要维护一个函数即可。
降低成本，提高效率

7、在JavaScript中常用的表单事件以及键盘、鼠标事件