jsDOM事件

传统事件：基本方法是绑定一个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区分大小写