JS基础 事件

JS基础 事件

当我们与浏览器中 Web ⻚⾯进⾏某些类型的交互时，事件就发⽣了。通过使⽤ JavaScript ，可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应。

事件可以验证⽤户输⼊的数据;增加⻚⾯的动感效果;增强⽤户的体验度

事件类型

js的可以处理的事件类型有⿏标事件、键盘事件、HTML事件.

下面简单介绍下事件类型:

Window 事件属性：针对 window 对象触发的事件.

Form 事件：由 HTML 表单内的动作触发的事件

​ 应⽤到⼏乎所有 HTML 元素，但最常⽤在 form 元素中

Keyboard 事件 : 键盘事件

Mouse 事件：由⿏标或类似⽤户动作触发的事件

Media 事件：由媒介（⽐如视频、图像和⾳频）触发的事件

​ 适⽤于所有 HTML 元素，但常⻅于媒介元素中

常用的事件:
onload：当⻚⾯或图像加载完后⽴即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：⿏标点击某个对象

onchange：⽤户改变域的内容

onmouseover：⿏标移动到某个元素上

onmouseout：⿏标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

事件流和事件模型

事件顺序有两种类型：事件捕获 和 事件冒泡。

事件冒泡就和鱼吐泡泡一样,从内部到外部的过程;

比如 div->body->html->document->window

事件捕获就和捕鱼一样,从外部到内部.

window->document->html->body->div

事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。

事件处理程序的名字以“on”开头，因此 click 事件的事件处理程序就是 onclick.

HTML 事件处理程序

直接绑定在html元素中
特点：
与元素标签耦合度过高
使用方式：
<button type=“button” on事件名=“处理程序”>按钮< /button>

<button type="button" onclick="alert("HTML 事件处理程序")">按钮1</button>

耦合度过⾼，还可能存在时差问题（当⽤户点击按钮时，处理函数还未加载到，此时处理函数是单独写的⼀段js代码），⽽且在不同的浏览器上可能会有不同的效果。

DOM 0级事件处理程序

通过JavaScript指定事件处理程序的传统⽅式，就是将⼀个函数赋值给⼀个事件处理程序属性

特点：
不能为同一个元素绑定同一个事件的多个处理程序
使用方式
1.通过id获取元素对象
var 变量名 = document.getElementById(“元素的id属性值”);
2.通过元素对象绑定事件
变量名.on事件名 = function(){
//处理程序
}

<button type="button" id="but2">按钮2</button><p>

<script type="text/javascript">
    		//1.获取元素对象
			var btn2=document.getElementById("but2");
			//绑定事件
			btn2.onclick=function(){
				console.log("DOM  0级事件处理程序")
			}
			
</script>

DOM 2级事件处理程序

1.addEventListener 添加事件的监听
2.removeEventListener移除事件监听
使用方式
1.通过id获取元素对象
var 变量名 = document.getElementById(“元素的id属性值”);
2.添加事件的监听
变量名.addEventListener(‘事件名’,function(){
//处理程序
});
或
变量名.addEventListener(‘事件名’,函数名);
3.移除事件监听
只能移除有函数名的处理程序
变量名.removeEventListener(‘事件’,函数名);

<button type="button" id="but3">按钮3</button>
<script type="text/javascript">	
    		//获取元素对象
			var btn3 = document.getElementById('but3');
			//添加事件的监听
			btn3.addEventListener("click",function(){
				alert("aaa");
			});
			btn3.addEventListener("mouseover",fun1);
			function fun1(){
				console.log("bbb");
			}
			//移除事件监听
			btn3.removeEventListener("mouseover",fun1);
</script>