事件基础
1.什么是事件
事件分为两部分：
- 行为本身： 浏览器天生就赋予其的行为， onclick、onmouseover（onmouseenter）、onmouseout（onmouseleave）、onmousemove、onmousedown、onmouseup、onmousewheel（鼠标滚轮滚动行为）、onscroll（滚动条滚动行为）、onresize（window.onresize浏览器窗口大小改变事件）、onload、onunload（浏览器关闭）、onfocus（文本框获取焦点行为）、onblur（文本框失去焦点）、onkeydown、onkeyup， 哪怕没有给上述的行为绑定方法， 事件也是存在的，当点击盒子的时候，同样会触发它的onclick行为，只是什么事情都没做而已。
- 事件绑定：给元素的某一个行为绑定方法， 当我们触发事件行为时，会把绑定的函数执行。
element.event = ()=>{}
DOM0级事件绑定
addEventListener
DOM2级事件绑定
element.addEventListener这个属性是定义在当前元素所属EventTarget这个类的原型上的
事件对象及兼容处理
onclick的e
e： MouseEvent，鼠标事件对象：
它是一个对象数据类型值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的。
原型链：
MouseEvnet -> UIEvent -> Event -> Object
MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息，和到底是在那个元素上触发的没有关系
属性值
e.type: 存储的是当前鼠标触发的行为类型“click”
e.clientX / e.clientY: 当前鼠标触发点距离当前屏幕左上角的距离
e.taget： 事件源，当前鼠标触发的是那个元素，那么它存储的就是那个元素，但是在IE6~8中不存在这个属性（e.tager的值是undefined），我们使用e.srcElement来获取事件源
e.clientX/clinetY:
e.pageX/pageY：当前鼠标触发点距离body左上角（页面第一屏幕最左上端）的x/y轴的坐标，但是在IE6~8中没有这个属性，我们通过使用clientY+滚动条卷去的高度来获取也可以
e.preventDefault: 组织浏览器的默认行为
e.currentTarget获取的是绑定事件的元素, 虽然点击的是ul的子元素li, 但是currentTarget获取的是ul
关于事件对象MouseEvent的兼容问题
事件对象本身的获取存在兼容问题：标准浏览器中是浏览器给方法传递的参数，我们只需要定义形参e就可以获取到；在IE6-8中浏览器不会给方法传递参数，我们如果需要的话，需要到window.evnet中查找
e = e || window.event;
e.target = e.target || e.srcElement;
e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))
e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))
onkeyup
keyboardEvent:
e.keyCode: 按下的键值，当前键盘上每一个键对应的值
事件的传播机制
事件的默认传播机制：
- 捕获阶段：从外向内依次查找元素
- 目标阶段：当前事件源本身的操作
- 冒泡阶段：从内到外依次触发相关的行为
DOM0级事件绑定：
使用DOM0级事件绑定给元素的某一个行为绑定的方法， 都是在冒泡阶段执行的
addEventListener绑定：
第一个参数是行为类型，第二个参数是给当前的行为绑定方法，第三个参数是是否在捕获阶段发送，false在冒泡阶段发生
每个浏览器传播的最顶层是不一样的，谷歌中可以传播到document，但是在IE中只能传播到html
事件委托/事件代理
利用事件的冒泡传播机制，触发当前元素的某个行为，它父级所有元素的相关行为都会被触发，如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。
document.body.onclick?=?function?(e)?{
??????e?=?e?||?window.event;
??????var?target?=?e.target?||?e.srcElement;
??????console.log(target.id);
??????if?((target.id?=?"box"))?{
????????//?...
??????}?else?if?((target.id?=?"mark"))?{
????????//?...
??????}?else?{
????????//?...
??????}
????};
实现下拉输入框
<!--
?*?@Author:?lemon
?*?@Date:?2020-09-17?12:45:53
?*?@LastEditTime:?2020-09-17?13:27:23
?*?@LastEditors:?Please?set?LastEditors
?*?@Description:?In?User?Settings?Edit
?*?@FilePath:?\React前端准备\事件\百度搜索框.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?type="text/css">
??????*?{
????????margin:?0;
????????padding:?0;
????????font-family:?"微软雅黑";
??????}
??????input?{
????????display:?block;
????????outline:?none;
??????}
??????a?{
????????display:?block;
????????text-decoration:?none;
????????color:?#000;
??????}
??????a:hover,
??????a:active,
??????a:target?{
????????text-decoration:?none;
????????color:?#000;
??????}
??????ul,
??????li?{
????????list-style:?none;
??????}
??????#box?{
????????position:?absolute;
????????top:?20px;
????????left:?50%;
????????margin-left:?-250px;
????????width:?500px;
??????}
??????#box?input?{
????????padding:?0?10px;
????????height:?35px;
????????border:?1px?solid?#008000;
??????}
??????#box?ul?{
????????display:?none;
????????position:?relative;
????????top:?-1px;
????????border:?1px?solid?#008000;
??????}
??????#box?ul?li,
??????#box?ul?li?a?{
????????height:?30px;
????????line-height:?30px;
??????}
??????#box?ul?li?a?{
????????padding:?0?10px;
??????}
??????#box?ul?li?a:hover?{
????????background:?#ccc;
??????}
????</style>
??</head>
??<body>
????<div?id="box">
??????<input?id="searchInput"?type="text"?/>
??????<ul?id="searchList">
????????<li><a?href="javascript:;">lemon</a></li>
????????<li><a?href="javascript:;">Lemon</a></li>
????????<li><a?href="javascript:;">柠檬</a></li>
????????<li><a?href="javascript:;">lemon-Xu</a></li>
????????<li><a?href="javascript:;">Lemon-Xu</a></li>
??????</ul>
????</div>
????<script?type="text/javascript">
??????var?searchInput?=?document.getElementById("searchInput");
??????var?searchList?=?document.getElementById("searchList");
??????searchInput.onfocus?=?searchInput.onkeyup?=?function?(e)?{
????????var?val?=?this.value.replace(/(^?+?|?+$)/g,?"");?//?获取文本框的内容并且去除他的首位空格
????????searchList.style.display?=?val.length?>?0???"block"?:?"none";
??????};
??????var?box?=?document.getElementById("box");
??????document.onclick?=?function?(e)?{
????????e?=?e?||?window.event;
????????e.target?=?e.target?||?e.srcElement;
????????console.log(searchList.style.display);
????????//?如果事件源是#searchList下的a标签，?我们让searchList隐藏，?并且把当前点击这个a中的内容放到文本框中
????????if?(
??????????e.target.tagName.toLowerCase()?===?"a"?&&
??????????e.target.parentNode.parentNode.id?===?"searchList"
????????)?{
??????????searchList.style.display?=?"none";
??????????searchInput.value?=?e.target.innerHTML;
??????????console.log(searchList.style.display);
??????????return;
????????}
????????searchList.style.display?=?"none";
????????console.log(searchList.style.display);
??????};
??????//???我们可以阻止一个容器中某些特殊性元素，?让其不在委托的范围内，?只需要把这些不需要委托的阻止冒泡传播即可
??????searchInput.onclick?=?function?(e)?{
????????e?==?e?||?window.event;
????????e.stopPropagation???e.stopPropagation()?:?(e.cancelBubble?=?true);
??????};
????</script>
??</body>
</html>