事件模型(事件冒泡/事件委托)的整理

lentoo 发布于2019-08-21 17:36 / 354人阅读

摘要：事件冒泡捕获事件冒泡事件捕获和标准浏览器标准浏览器传播顺序先捕获，后冒泡早期只支持事件冒泡，不支持事件捕获绑定事件，标准浏览器三个参数事件类型，没有事件处理函数布尔型的数值，默认事件冒泡，事件捕获有两个参数事件类型，有事件处理函数阻止事件冒

事件冒泡/捕获

事件冒泡	事件捕获
IE和标准浏览器	标准浏览器
传播顺序：先捕获，后冒泡
早期IE只支持事件冒泡，不支持事件捕获

绑定事件

.addEventListener("click",function(){}，false)	.attachEvent("onclick",function(){})
标准浏览器	IE
三个参数: 1.事件类型，没有on 2.事件处理函数 3.布尔型的数值，默认false（事件冒泡），true（事件捕获）	有两个参数： 1.事件类型，有on 2.事件处理函数
阻止事件冒泡/捕获 : e.stopPropagation();	阻止事件冒泡 : window.event,cancelBubble=true
	问题： 1.顺序相反 2.this指向window

事件冒泡优点

1.有很多子元素，并且绑定同一种事件，可以委托给父元素代理（事件代理/事件委托）

2.对于后生成事件的绑定，可以用事件委托

e.currentTarget=this  
e.target获取事件源  
可以通过e.currentTarget和e.target的比较得知是不是由事件冒泡触发的

总结：事件模型/事件冒泡/事件委托：利用事件冒泡，把子元素委托给父元素绑定

GPU云服务器云服务器委托事件事件委托冒泡事件事件冒泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89730.html

JS专题之事件模型

摘要：三事件流规定事件包括三个阶段，事件捕获，处于目标阶段事件冒泡。一起来看添加新增加的，点击发现没有反应，说明事件没有绑定进去，但是我们也并不想，每增加一个新元素，就为这个新元素绑定事件，重复低效率的工作应当避免去做。本文共 1960 字，读完只需 8 分钟事件用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 I...

W4n9Hu1 2019-08-26 13:24 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0
我所理解的JavaScript 事件委托

摘要：当初学时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。事件的冒泡，所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下，在的时候我们可以设置事件模型事件冒泡事件捕获，一般来说都是用事件冒泡的模型。当初学C#时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...

vvpvvp 2019-08-23 15:43 评论0 收藏0
我所理解的JavaScript 事件委托

摘要：当初学时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。事件的冒泡，所以才可以在父元素来监听子元素触发的事件。事件的冒泡这个要讲一下，在的时候我们可以设置事件模型事件冒泡事件捕获，一般来说都是用事件冒泡的模型。当初学C#时，学到委托概念的时候，有点不知所措，在工作后运用了很多后才发现真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...

wushuiyong 2019-08-02 14:26 评论0 收藏0
前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

zhichangterry 2019-08-22 11:06 评论0 收藏0