摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。
事件模型
DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器
// 方式一 将事件直接通过属性绑定在元素上
/ 方式二 获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件
var btn = document.getElementById("btn")
btn.onclick = function () {...}
btn.onclick = null
IE 事件模型 - 只有冒牌，仅在 IE 浏览器中有效，不兼容其他浏览器
事件处理阶段：事件在达到目标元素时，触发监听事件
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行
// 绑定事件 el.attachEvent(eventType, handler) // 移除事件 el.detachEvent(eventType, handler)
DOM2 级事件模型 - W3C标准模型，除 IE6-8 以外的所有现代浏览器都支持该事件模型
事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行 - 从外向内，把这个坐标转换为具体的元素上事件的过程，就是捕获过程(点击事件来自触摸屏或者鼠标，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供坐标给浏览器）
事件处理阶段：事件在达到目标元素时，触发监听事件
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行 - 从内向外，是人类处理事件的逻辑
// 绑定事件 target.addEventListener(type, listener[, useCapture]); // 移除事件 target.addEventListener(type, listener[, useCapture]);事件流：
浏览器事件流向捕获阶段、目标阶段、冒泡阶段，就是我们所说的- W3C事件模型
兼容的事件绑定写法
function bindEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, eventFn);
} else {
obj.attachEvent("on" + type, eventFn);
}
function eventFn(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
fn && fn(target, ev)
}
}
事件代理
定义：指利用“事件冒泡”，只通过指定一个事件处理程序，来管理某一类型的所有事件
优点：
（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
缺点：仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件
demo: 把动态列表的点击事件，绑定在父元素上
事件对象Event元素进行事件监听的时候，它的回调函数里就会默认传递一个参数 event，它是一个对象
属性：
event.target：指的是触发事件的那个节点，也就是事件最初发生的节点(fn触发的元素)
event.currentTarget：指的是正在执行的监听函数的那个节点(fn绑定的元素)
event.isTrusted：表示事件是否是真实用户触发。
event.preventDefault()：取消事件的默认行为。
event.stopPropagation()：阻止事件的派发（包括了捕获和冒泡）
event.stopImmediatePropagation()：阻止同一个事件的其他监听函数被调用。
target和currentTarget区别：触发事件的元素和事件绑定的元素
stopPropagation和stopImmediatePropagation区别：
stopPropagation只对书写的那个事件有用，再绑定另一个click失效
stopImmediatePropagation对绑定的很多类型的事件都有用
兼容写法： ev.target || ev.srcElement
addEventListener(W3C)
参数：
事件名称 event
事件处理函数/具有 handleEvent函数的对象 listener
第三个参数
once：只执行一次
passive：承诺此事件监听不会调用 preventDefault，这有助于性能
useCapture：是否捕获true（否则冒泡false）
移除：removeEventListener(事件名称、事件回调、捕获/冒泡)
自定义事件：只能在DOM元素上自定义事件
//使用 Event 构造器来创造了一个新的事件
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);
面试题
了解js的事件吗？
说说js的事件/绑定事件的方法?/了解事件流吗？
事件流的顺序是什么？
补充React组件中怎么做事件代理
React组件事件代理的原理
React的事件合成机制好像和js的不太一样 （绑定一个事件到一个组件上）
Emit事件怎么发，需要引入什么
页面上生成一万个button，并且绑定事件，如何做（JS原生操作DOM）
添加原生事件不移除为什么会内存泄露
vue 中的 native 修饰符
移动端点击穿透：fastclick
手写原生js实现事件代理，并要求兼容浏览器
事件如何派发也就是事件广播（dispatchEvent
总结：https://www.cnblogs.com/dfyg-...
手写一个冒泡排序处理事务
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103828.html
摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...
摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...
摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...
阅读 1241·2021-11-08 13:25
阅读 1439·2021-10-13 09:40
阅读 2773·2021-09-28 09:35
阅读 734·2021-09-23 11:54
阅读 1122·2021-09-02 15:11
阅读 2430·2019-08-30 13:18
阅读 1667·2019-08-30 12:51
阅读 2685·2019-08-29 18:39
