day26-Javascript事件

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()捕获