DOM事件
传统事件：基本方法是绑定一个function，但是有一个缺陷，就是一个元素只能绑定一个事件，绑定多个，只能最后一个 事件有效
下面介绍的监听事件就可以绑定多个事件，让我们开始吧
addEVentListener#
node.addEventListener('事件'，fn,boolean)
第三个是选择捕获还是冒泡，默认是false-冒泡，改成true-捕获，看下面的事件流就知道啥意思了
Dom事件流#
捕获阶段#
从最高的节点，一直向下捕获到执行事件的节点
当前目标阶段#
node完成事件函数
冒泡阶段#
node完成事件后，向上执行所有node
部分事件没有冒泡，如：onblur,onfocus,onmouseenter,onmouseleave
事件对象#
传统事件，或者监听事件，会传入一个参数event,就是在事件触发的时候会调用这个参数，
<body><button onclick="run(event)">push</button>
</body><script>function run(e){ console.log(e)}</script>输出的是事件对象，下面有很多属性，方法
主要属性#
target#
返回的就是执行事件的当前元素
console.log(e.target)
输出的就是
<button onclick="run(event)">push</button>type#
console.log(e.target)输出的是click,对了type就是事件类型
主要方法#
阻止默认行为#
<body><button onclick="run(event)">push</button><a href="one.html">1212</a>
</body><script>let a = document.querySelector('a')a.onclick=function (e){ e.preventDefault() //这样就阻止了a的默认链接行为了}</script>阻止冒泡#
在上面我们讲到了监听事件默认是冒泡，但我们是可以阻止冒泡的stopPropagation()
e.stopPropagation()这样就可以阻止冒泡了
事件委托#
其实很简单，给我们的父node添加监听，然后利用冒泡事件达到效果，
<body><ul> <li>12</li> <li>12</li> <li>12</li> <li>12</li> <li>12</li></ul>
</body><script>let a =document.querySelector('ul')function change(e){ e.target.style.backgroundColor='blue'}a.addEventListener('click',change)</script>这样我们就不需要给每一个子元素设置了，直接设置父node
常用的鼠标事件#
| 名称 | 触发条件 |
|---|---|
| onclick | 鼠标点击 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 鼠标焦点离开触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| contextmenu | 鼠标右击事件 |
| selectstart | 鼠标选中文字 |
鼠标事件对象#
MouseEvent
留着下次整理
键盘事件#
onkeyup 键盘弹起
onkeydown 键盘按下
onkeypress 也是按下但是不包含功能键如：alt,ctrl,shift,方向等
<script> function ru(){ console.log('xixi') }document.addEventListener('keydown',ru)</script>顺序#
onkeydown--onkeypress--onkeyup
键盘事件对象#
keycode#
返回按键的ascll码值
<script> function ru(e){ console.log(e.keyCode) }document.addEventListener('keydown',ru)</script>keyup,keydown不区分大小写
keypress区分大小写