对JavaScript中的事件进行疯狂处理

来来来，JavaScript核心基础语句送给你们
学JS你不会DOM算真的学会了吗？
对JavaScript中的事件进行疯狂处理
用BOM来实现轮播图效果
我们来实现创建JavaScript中的自定义对象
JS中构造函数的原型prototype
还不明白JS中的内置对象吗？快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

一、简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为。如：

用户点击了某一个HTML元素
用户将鼠标移动到某个HTML元素上
用户输入数据时光标离开
页面加载完成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等。

事件对象：当一个事件发生时，这个事件相关的详细信息会被保存到一个对象中，称为event对象。

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件函数，即回调函数。

二、绑定事件

三种方式：

静态绑定：通过为标签的事件属性赋值

<script>function $(){console.log("静态绑定")；}
</script>
<input type="button" value="按钮" onclick="$()">

动态绑定：通过为DOM对象的事件属性赋值

<input type="button" value="按钮" id="btn">
<script>var btn = document.getElementById("btn");btn.onclick = function(){concole.log("动态绑定");}
</script>

动态绑定：通过为DOm对象进行事件监听，使用addEventListener(“事件名”,回调函数)

<script>var btn = document.getElementById("btn");btn.addEventListener('click',function(){console.log("动态绑定");});
</script>

注意：

可以通过事件回调函数的第一个参数获取事件对象event

target 事件的目标元素，即事件源
type 事件类型
timeStamp 事件生成的日期和时间
clientX当事件被触发时，鼠标指针的水平坐标
clientY 当事件被触发时，鼠标指针的垂直坐标

在事件回调函数中，this表示事件源，即发生事件的元素

<script>window.onload = function(){var btn = document.getElementById('btn');btn.onclick = function(event){        //事件触发时会自动回调函数传入一个参数，表示event事件对象console.log(event);console.log(event.target);console.log(event.type);console.log(this == event.target)     //this表示事件源}}function f(e){console.log(e);}
</script>
<body><button id="btn">按钮<button><!-- 静态绑定事件时，需要在绑定事件回调函数时接受事件对象参数--><button onclick="f(event)">按钮</button>
</body>

三、常用事件

1. 鼠标事件

事件名	描述
`onclick`	鼠标单击
`ondblclick`	鼠标双击
`onmouseover`	鼠标移动到某元素之上
`onmouseout`	鼠标从某元素上移开
`onmousedown`	鼠标按钮被按下
`onmouseup`	鼠标按钮被松开
`onmousemove`	鼠标被移动

2.键盘事件

事件名	描述
`onkeydown`	某个键盘的按键被按下去
`onkeyup`	某个键盘的按钮被松开
`onkeypress`	某个键盘的按键被按下去且松开

<script>var username = document.getElementById('username');username.onkeydown() = function(e){if(e.key==13){     //当按下回车键时输出console.log("first");}}username.onkeypress = function(){console.log("second");}username.onkeyup = function(){console.log("third");}
</script>
<body><input type="text" id="username">
</body>

3. 表单事件

事件名	描述
`onfocus`	元素获取焦点
`onblur`	元素失去焦点
`onchange`	域的内容发生改变，一般用于文件选择器和下拉列表
`onselect`	文本内容被选中
`onsubmit`	表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交

<style>.border{border:1px solid red;}#img{width:100px;height:100px;}#head{display:none;}
</style>
<script>window.onload = function(){//获得焦点document.getElementById('username').onfocus = function(){this.classList.add('border');}//失去焦点document.getElementById('username').onblur = function(){this.classList.remove('border');}//域中内容发生改变document.getElementById('eat').onchange = function(){console.log(this.checkbox);}//文件选择器，更换头像document.getElementById('head').onchange = function(){document.getElementById('img').src = window.URL.createObjectURL(this.files[0]);}//被选中的内容改变样式document.getElementById('email').onselect = function(){this.classList.add('border');}document.getElementById('frm').onsubmit = function(){var email = document.getElementById('email').value;//判断表单内容是否符合要求if(email==''){return false;}return true;}}
</script>
<body><form action="" id="frm">用户名：<input type="text" id="username"> 爱好：<input type="checkbox" name="hobby" id="eat" value="eat"><label for="eat">吃</label>头像：<input type="file" id="head"><label for="head"><img src="data:images/default.jpg" id="img"></label>邮箱：<input type="text" id="email" value="zack@sina.com.cn"    name="email"><input type="submit" value="提交"></form>
</body>

复选框的全选

<!--* @Author: your name* @Date: 2020-09-25 09:23:27* @LastEditTime: 2020-10-03 17:57:12* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \DOM\DOM\document.html
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#table{width: 500px;height: 200px;margin: 0 auto;border-collapse: collapse;}td,th{border: 1px solid #ccc;}tbody tr{text-align: center;}</style><script>window.onload = function(){//实现全选和取消全选的效果var all = document.getElementById('all');all.onchange = function(){var items = document.getElementsByName('item');for(var item of items){item.checked = this.checked;}}//实现当选中下面所有复选框时自动选中全选var items = document.getElementsByName('item');for(var item of items){item.onchange = function(){//先勾选全选all.checked = true;//判断只要有一个没选，则不会勾选全选for(var element of items){if(!element.checked){all.checked = false;break;}}}}}</script>
</head>
<body><table id="table"><thead><tr><th>全选 <input type="checkbox" id="all"></th><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>爱好</th></tr></thead><tbody><tr><td><input type="checkbox" name="item"></td><td>1</td><td>Tom</td><td>90</td><td>男</td><td>吃饭</td></tr><tr><td><input type="checkbox" name="item"></td><td>2</td><td>Zack</td><td>9</td><td>男</td><td>睡觉</td></tr><tr><td><input type="checkbox" name="item"></td><td>3</td><td>Alice</td><td>19</td><td>女</td><td>打游戏</td></tr></tbody></table>
</body>
</html>

四、事件操作

1. 事件流

当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的结点都会收到该事件并执行，这个传播过程就是DOM事件流。

分类：事件冒泡、事件获取

2. 事件冒泡/事件获取

事件冒泡：当一个元素上的事件被触动时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡（默认方式）。
事件捕获：当一个元素上的事件被触动时，事件从页面的根元素开始，往下直到事件目标元素，这一过程被称为事件捕获。

阻止事件冒泡：event.stopPropagation()

接下来我们来看看事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border: 1px solid black;}.div1 {width: 200px;height: 200px;}.div2 {width: 150px;height: 150px;}.div3 {width: 100px;height: 100px;}.div4 {width: 50px;height: 50px;}</style><script>function print(name){console.log(name);}</script>
</head>
<body><div class="div1" onclick="print('div1')">div1<div class="div2" onclick="print('div2')">div2<div class="div3" onclick="print('div3')">div3<div class="div4" onclick="print('div4')">div4</div></div></div></div>
</body>
</html>

我们打开浏览器的控制台就会发现，点击div4时会将四个div的名字都输出，这就是事件流中的事件冒泡。我们可以将这种情况理解成事件传播，从当前元素传播到根元素。

接下来我们来看看事件捕获

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border: 1px solid black;}#div1 {width: 200px;height: 200px;}#div2 {width: 150px;height: 150px;}#div3 {width: 100px;height: 100px;}#div4 {width: 50px;height: 50px;}</style><script>window.onload = function(){function $(id){return document.getElementById(id);}$('div1').addEventListener('click',function(){console.log('div1');},true)     //第三个参数为true表示采用事件捕获，默认为false表示冒泡排序$('div2').addEventListener('click',function(){console.log('div2');},true)$('div3').addEventListener('click',function(){console.log('div3');},true)$('div4').addEventListener('click',function(){console.log('div4');},true)}</script>
</head>
<body><div id="div1">div1<div id="div2">div2<div id="div3">div3<div id="div4">div4</div></div></div></div>
</body>
</html>

事件捕获显示的效果与事件冒泡正好相反，从根元素向当前元素传播，因此就是从div1到div4输出。

当我们将div3的函数操作改为以下操作，就只会输出div4和div3.

$('div3').addEventListener('click',function(event){console.log('div3');event.stopPropagation();    //阻止事件冒泡
},false)

3. 事件代理/事件委托

利用事件冒泡/事件捕获机制，通过给父元素绑定事件，从而实现对所有子元素的事件管理，无需为每个子元素绑定事件。

优点：

减少事件注册，降低内存占用
新增元素时实现动态绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){/*var lis = document.querySelectorAll('li');for(li of lis){li.onclick = function(){//console.log(this);    //事件源console.log(this.innerText);}}*/document.querySelector('ul').onclick = function(e){console.log(e.target.innerText);}}function add(){var li = document.createElement('li');li.innerText = 'li6';/*li.onclick = function(){console.log(this.innerText);}*/document.querySelector('ul').appendChild(li);}</script>
</head>
<body><button onclick="add()">添加1</button><ul><li>li1</li><li>li2</li><li>li3</li><li>li4</li><li>li5</li></ul>
</body>
</html>

注释里面的内容是使用原始的方法，大家可以与事件代理的方法作比较，体会一下它们的差异。

5. 事件默认行为

当一个事件发生时浏览器自己会默认做的事情。如：点击链接时默认会跳转，右键点击时默认会弹出菜单。

阻止事件的默认行为：e.prevertDefault();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function print(e){console.log(111);e.preventDefault();     //阻止事件的默认行为}</script>
</head>
<body><button oncontextmenu="print(event)">右键点击</button><br><a href="https://www.baidu.com" onclick="print(event)">百度</a>
</body>
</html>