后浪小萌新JS --- JS事件

一、事件绑定

1. 给标签的事件属性赋值(函数的调用) - this是window
2. 节点.事件属性 = 函数 - this是事件源
3. 节点.addEventListener(事件名, 函数) - 事件名称要去掉on; this是事件源

注意: 可以给同一个标签的同一个事件绑定不同的驱动程序(一般在原来的功能已经实现了, 需要在原功能的基础上添加新的功能的时候才考虑这个问题)

二、常用事件类型

1. onclick - 标签被点击事件(可以绑定在绝大多数的可见标签上)
2. onload - 页面加载完成对应的事件(一般绑定在window上)
3. onmouseover - 鼠标悬停在标签上对应的事件
4. onmouseout - 鼠标离开标签对应的事件
5. onkeydown - 按下按键对应的事件(可以绑定在表单相关标签上)
6. onchange - 值改变事件()

三、事件对象

事件驱动程序对应的函数在调用的时候, 系统会自动传一个参数, 这个参数就是当前事件的事件对象

1. 鼠标事件: 事件发生的时候的位置信息
   clientX/clientY - 鼠标
   offsetX/offsetY - 鼠标
2. 键盘事件: 被按下的键
   key - 按键对应的字符
   keyCode - 按键对应的字符的编码值(小写字母返回的是对应的大写字母的编码)

四、事件捕获

1. 事件传递
   发生在子标签上的事件会传递给父标签

2. 事件捕获
   阻止事件传递给父标签(在父标签和子标签都对同一个事件进行绑定的时候才需要阻止)
   事件对象.stopPropagation()