day26-Javascript事件
1.js事件
1.什么是事件
- js是事件驱动语言，绝大部分代码都是事件发生后才执行
- 事件三要素：
- 事件源(发生事件的对象)
- 事件(发生了什么事件)
- 事件驱动程序(发生事件后要做什么)
2.事件绑定
- 1)给事件源的事件属性赋值：this指向的是window
- 2)通过节点绑定：
- 事件源节点.事件属性 = 函数：this是事件源(当期事件发生的节点)
- 事件源节点.事件属性 = 匿名函数：this是事件源
- 3)事件源节点.addEventListener(事件名,函数)：this是事件源
- 注意：事件名是事件属性名去掉on；这种绑定方式可以给同一事件绑定不同的驱动程序
- 注意：如果事件源是箭头函数，this指向的是window
3.常用事件
- 1)
onload：页面加载完成后才执行 - 2)
onclick：点击事件- 需要关注事件对象的
clientX/clientY(到浏览器左边和顶部的距离) -
offsetX/offsetY(到事件源左边和顶部的距离)
- 需要关注事件对象的
- 3)
onmouseover(鼠标进入标签)/onmouseout(鼠标离开标签) - 4)
onkeydown(键盘按下) - 5)
onchange(标签改变事件)
4.事件冒泡和事件捕获
- 事件冒泡：当一个标签产生某个事件后，这个事件会传递给它的父标签
- 事件捕获：不想让事件冒泡，可以用
事件对象.stopPropagation()捕获
