【web前端初级课程】第八章什么是事件？

一、事件情况汇总

事件分为三部分：事件源：绑定事件的标签、事件对象：就是事件产生的相关数据、事件处理函数

二、标签绑定

<div onclick="_click(this)">2222</div>
<script>
	//通过传参形式的形式将事件源传给事件处理函数
	function _click(t){
		console.log(t)
		console.log(this)
	}
</script>

缺点：

1.违背了三层分离原则

2.无法获得事件对象

3.事件源需要在绑定的标签使用this关键传递

三、使用DOM0事件模型

语法结构：绑定事件标签.onXXX=匿名函数（事件处理函数）

<button id="btn" >点击一下</button>
<script>
	var _btn = document.getElementById("btn");
	_btn.onclick = function (event) {
		console.info(event)
		alert("hello，事件")
        console.log(this);
	}
</script>

这种方式完美的解决了三层分离问题，而且默认事件处理函数的第一个参数就是事件对象。

事件触发时，this就是指该事件在dom对象上触发。

四、使用DOM2事件模型

（一）语法结构

标签.addEventListener("xxxxx",匿名函数(事件处理函数))

let btn = document.getElementById("box");
btn.addEventListener("click", function(event){
    alert("ok");
    console.log(this);
}, false);

（二）注意

第一个参数不需要加on，直接写事件名称即可;

第二个参数是事件处理函数，函数第一个参数默认就是事件对象;

第三个参数Boolean值，表示捕获或者冒泡流。（true为捕获，false为冒泡）

（三）取消事件的绑定

dom2事件模型取消事件：div.removeEventListener("click",fn)

dom0事件模型取消事件：div.onclick = null

五、相关练习：图片切换

练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.tu{
				position: relative;
			}
			.tu > img{
				width: 100%;
				height: 800px;
				position: absolute;
				display: none;
			}
			ul{
				list-style: none;
				background-color:#550000;
				position: absolute;
				border-radius: 15px;
				left: 45%;
				bottom: 20px;
			}
			ul > li{
				width: 20px;
				height: 20px;
				background-color: #d6d6d6;
				border-radius: 50%;
				float: left;
				margin: 10px;
			}
		</style>
		<script>
			window.onload=()=>{
				let img_all = document.querySelectorAll(".tu > img")
				let i=0
				let timer=setInterval(change,3000)
				
				function change(){
					img_all[i].style.display="none"
					i=++i % img_all.length
					img_all[i].style.display="block"
				}
				
				let one= document.getElementById("one")
				one.onclick=function(event){
					img_all[0].style.display="block"
					img_all[1].style.display="none"
					img_all[2].style.display="none"
					img_all[3].style.display="none"
				}
				let two= document.getElementById("two")
				two.onclick=function(event){
					img_all[0].style.display="none"
					img_all[1].style.display="block"
					img_all[2].style.display="none"
					img_all[3].style.display="none"
				}
				let three= document.getElementById("three")
				three.onclick=function(event){
					img_all[0].style.display="none"
					img_all[1].style.display="none"
					img_all[2].style.display="block"
					img_all[3].style.display="none"
				}
				let four= document.getElementById("four")
				four.onclick=function(event){
					img_all[0].style.display="none"
					img_all[1].style.display="none"
					img_all[2].style.display="none"
					img_all[3].style.display="block"
				}
			}
			let li = document.querySelectorAll("ul > li")
			
		</script>
	</head>
	<body>
		<div class="tu">
			<img style="display: block" src="1.jpg"/>
			<img src="2.jpg"/>
			<img src="3.jpg"/>
			<img src="4.jpg"/>
		</div>
		<ul>
			<li id="one"></li>
			<li id="two"></li>
			<li id="three"></li>
			<li id="four"></li>
		</ul>
	</body>
</html>