javascript中的事件

事件

事件是在编程时系统内发生的事情或动作

• 单击
• 双击
• 鼠标放置
• 表单内容发生变化
• 拖拽
• 页面滚动
• 触发/失去焦点
• 键盘按下
• 提交表单
• …其他

DOM事件流

三个阶段

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段
  ## 事件处理程序
• 当事件发生时执行的函数
• 一般有三种绑定方法

<div onclick="sayHello">点我</div>

$btn.onclick=function(e){
	console.log('点我')
}
$btn.addEventListener('click',function(e) {
	console.log('点我')
},true)

addEventListener

事件监听函数

target.addEventListener(type,listener,options)

• type: 事件类型
• listener: 事件处理方法
• options:这是一个对象;可选，默认全是false。{capture:是否捕获阶段监听,once:是否只监听一次,passive:是否忽略preventDefault}

target.addEventListener(type,listener,useCapture)

• useCapture:可选，true表示在捕获阶段调用listener，false表示冒泡阶段处理

target.removeEventListener

• target.removeEventListener(‘click’,handler)
  不能使用匿名函数
• target.removeEventListener(‘click’,handler,true)
  设置了冒泡还是捕获阶段就得填写true或false

冒泡与捕获

停止事件传播

• e.stopPropagation()

使用这个函数后

阻止默认事件

很多情况下,浏览器会发生默认的时间:比如点击表单,代码会自动提交.点击a链接,a链接自动跳转.

e.preventDefault()

与passive选项的关系

• 移动端滚动性能优化

事件代理

• 事件绑定代理给父元素，由父元素根据事件来源统一处理
• 适用于可能会新增子元素对场景
• 事件代理实际上是事件冒泡的应用

e.target

真正点击的目标元素

e.path

点击元素时目标元素的路径,是一个数组

事件代理的思路

• 将事件绑定在父元素上
• 因为事件顺序默认是冒泡顺序,因此点击子元素时,父元素的时间包含子元素的信息
• 判断是否点击了该子元素,并为其设置功能