一、事件类型

语法：
事件源.on事件类型=事件处理函数

二、事件对象

在页面上每一次点击就是一个事件，事件对象会记录点击时间、位置等的信息。

通过在事件函数中接受形参就能拿到事件对象
e.offsetX

三、事件对象内的常用信息

（1）鼠标事件

常见的三套坐标信息：
offsetX和offsetY

clientX和clientY


直接通过 事件对象.pageX 来拿到坐标信息

（2）键盘常用事件信息

键盘编码，确定你按下的是哪个按键

var input = document.querySelector('input')

input.οnkeydοwn=function(e){
     console.log(e.keycode)
}
1
2
3
4
5

四、事件传播

浏览器响应事件的机制：

默认在冒泡阶段触发事件，如果同时给inner、center、outer绑定点击事件，那么都会触发

阻止事件传播

事件对象.stopPropagation()
1

在inner上设置该属性后，点击不会触发父点击事件了

五、事件委托

将子盒子的点击事件委托给父元素，要不然每个子元素都设置太麻烦了，而且动态添加时不利于维护

使用：

ul.onclick = function(e){
    if(e.target.tagName === 'LI'){
            
    }
}

#通过父盒子点击事件的事件对象中的target属性能获取到当前点击元素。
1
2
3
4
5
6
7

tagName能获取到点击元素的大写标签名
e.target.dataset.name 表示自定义事件