摘要：只能写成在捕获阶段监听这个事件。默认为，表示事件是否可以被取消只有为的时候，才能用取消这个事件。阻止默认事件结果结果和在事件处理程序内部，始终等同于，为绑定事件的元素，而是为触发事件的实际目标。
一、事件简述 1、事件概念
在Web中, 事件在浏览器窗口中被触发，执行事先绑定的事件处理器（也就是事件触发时会运行的代码块），对事件做出响应。
用户在浏览器的任何一个操作都会去触发一个事件，JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。
事件是某个行为或者触发，比如点击、鼠标移动、提交表单，滚动菜单等等
二、事件流 1、事件流的作用事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？
如果事件不传播，我们无法确定我们点击的对象是什么？
2、事件流三种模型2.1事件冒泡模型
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。比如点击div时，首先是div先监听到了点击事件，然后向上传播到body/html/document
2.2事件捕获模型
和事件冒泡相反，事件最开始由最外层不太具体的节点先监听到，然后向下传递到最具体的元素。
比如点击div事件，先是document监听到，然后分发到html/body/div
2.3DOM事件流
DOM2级事件规定事件流包括三个阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
事件捕获阶段
处于目标阶段
事件冒泡阶段
3、用代码演示dom事件流demo
JS Bin containerboxtarget
执行结果：
![图片上传中...]
三、事件处理程序（事件侦听器（listener）） 1、概念事件处理程序：事件触发后，执行响应对应事件的程序。
事件处理程序是预先设定的，我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序
2.1原理：
JavaScript指定事件处理程序就是把一个函数赋值给一个元素的事件处理程序属性（如onclick）
2.2绑定的过程：
选中元素，选中事件处理程序属性如onclick，给属性赋值一个处理函数。
2.3不足：
不能给同一个元素的同一个事件处理程序属性绑定多个事件处理函数，会产生覆盖的。
3.1简介
DOM2事件处理程序可以解决不能绑定多个事件处理函数的问题
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener
removeEventListener
3.2 addEventListener使用
addEventListener有三个参数
事件类型
事件处理方法
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理。默认时false，没有特殊需求，第三个参数可以不写
3.3举个栗子
总结：addEventListener 和制定事件处理程序的不同，一个是对属性赋值，另外一个addEventListener是执行一个函数，可以多次执行
3.4 removeEventListener解绑事件
通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同
添加的匿名函数无法移除
四、事件对象 1、事件对象的来源
在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。
2、event的常见属性event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含
2.1bubbles：
默认为false，表示事件对象是否冒泡。
如果该属性为false，div.addEventListener方法在冒泡阶段监听不会触发。只能写成div.addEventListener("click", callback, true)在“捕获阶段”监听这个事件。
2.2cancelable：
默认为false，表示事件是否可以被取消.只有为true的时候，才能用Event.preventDefault()取消这个事件。
2.3preventDefault
阻止默认事件
baidu
结果
结果
2.4target和currenttarget
在事件处理程序内部，this始终等同于currentTarget，currentTarget为绑定事件的元素，而target是为触发事件的实际目标。
当存在嵌套的时候，两者不一样，具体详情可以见这篇文章链接描述，或者中文版event.target 和 event.currentTarget。我这里不做赘述
2.5stopPropagation()
阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
举个栗子
containerboxtarget
结果
没有给捕获阶段的box加e.stopPropagation()的结果
给捕获阶段的box加e.stopPropagation()之后的结果
五、阻止事件代理哈哈哈写事件代理前，找到了这篇事件代理的文章用例子解释事件模型和事件代理，这里写事件模型的历史也写得相当棒，所以先就转载过来了。
1、事件代理的原理：利用事件模型的传播性质，将子元素的监听函数绑定到父元素上，通过事件传播去执行监听函数。
2、举个栗子需求：给container里面所有box都绑定点击事件，点击时输出box的值
2.1方式一：foreach
原理：选中.box所有元素，得到一个类数组对象，遍历这个类数组对象，给.box元素一一绑click事件。
代码：
box1box2box3
缺点：执行foreach选中的box时固定的，如果我们后续再加上几个box，后加的box就没有绑定上点击事件。
代码链接
2.2方式二事件代理
原理：给container绑定点击事件，通过e.target获取点击事件目标
代码：六、常见的事件类型box1box2box3
| 常见事件类型 | 解析 |
|---|---|
| click | 单击 |
| dblclick | 双击 |
| focus | 焦点，比如表单input把光标放上去开始输入的时刻 |
| blur | 失去焦点，比如输入完成切换到下一个输入框时，就失去了焦点 |
| keyup | 按键按下松开的时候触发， |
| change | 比如input失去焦点并且值发生了改变 |
| submit | 表单提交的时候触发 |
| scroll | 页面滚动的时候触发，注意使用函数节流 |
| resize | 页面面积变化触发，注意使用函数节流 |
| DOMContentLoaded | DOM 结构解析完成，不用等图片解析 |
| load | 页面所有资源（图片css 等）加载完成触发，触发时间比较晚 |
| mouseover | 鼠标放上去触发，注意进入元素的子元素会重复触发 |
| mouseout | 鼠标拿出去触发，注意离开元素的子元素会重复触发 |
| mouseenter | 鼠标进入触发，进入子元素不会触发，比较常用 |
| mouseleave | 鼠标离开触发，离开子元素不会触发，比较常用 |
演示代码：直接复制代码到编辑器，在浏览器去测试这些事件
或者点击这个链接测试
hello
七、自定义事件
var EventCenter = {
on: function(type, handler){
document.addEventListener(type, handler)
},
fire: function(type, data){
return document.dispatchEvent(new CustomEvent(type, {
detail: data
}))
}
}
EventCenter.on("hello", function(e){
console.log(e.detail)
})
EventCenter.fire("hello", "你好")
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99459.html
摘要：异步请求线程在在连接后是通过浏览器新开一个线程请求将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件循环队列中。 基础：浏览器 -- 多进程，每个tab页独立一个浏览器渲染进程（浏览器内核） 每个浏览器渲染进程是多线程的，主要包括：GUI渲染线程 JS引擎线程 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎） JS引擎线程负...
摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。 本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...
摘要：如果不熟悉，在这个教程里面，我们会通过构建一个笔记应用来学习怎么用。这个是我们要构建的笔记应用的截图你可以从下载源码，这里是的地址。每当用户点击笔记列表中的某一条时，组件会调用来分发这个会把当前选中的笔记设为。 原文：Learn Vuex by Building a Notes App，有删改。 本文假设读者熟悉 Vuex 文档 的内容。如果不熟悉，you definitely sho...
摘要：阻止冒泡绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。事件捕获事件冒泡。事件触发顺序变更为自外向内，这就是事件捕获。 事件冒泡 事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。 事件冒泡是自下而上(从最深节点开始，向上传播事件)的触发事件 //例子 var d_parent = document.getElementB...
摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...
摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...
阅读 1284·2021-11-15 11:37
阅读 2536·2021-09-22 10:56
阅读 3358·2021-09-06 15:11
阅读 779·2021-08-31 09:45
阅读 2872·2021-07-28 11:16
阅读 1783·2019-08-30 15:44
阅读 380·2019-08-30 13:22
阅读 3327·2019-08-30 13:18
