JS中事件冒泡与事件捕获

JS中绑定事件顺序（事件冒泡与事件捕获区别）

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p…

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->…

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2…

JS事件（事件冒泡和事件捕获）

事件流:描述的是在页面中接收事件的顺序事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性用于获取事件类…

js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获一.总结一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:false,事件冒泡.默认false,即事件冒泡. 1.事件冒泡是什么? 先child,然后parent.事件的触发顺序自内向外,这就是事件冒泡. 2.事件捕获是什么? 先parent,然后…

JS事件冒泡与事件捕获怎么理解?

在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定义好的事件后,会有一个由内到外的一个冒泡过程,而不是一下子就命中事件绑定的元素事件捕获(event capturing) 事件捕获与冒泡恰恰相反,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素…

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕…

js 事件冒泡和事件捕获

事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ pad…

js高级：event，事件冒泡，事件捕获

1.事件浏览器客户端上客户触发的行为都称为事件所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬浮 onmouseout 鼠标移除 onmousedown鼠标按下 onmouseup 鼠标抬起 onmouseenter 鼠标进入 onmouseleare 鼠标离开 onmousemove鼠标移动 onfocus 表单聚焦 onblur 表单失去焦点 onchang…

彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其实这部分就是“事件委托”,而当时的我并不知道,这一点在我很久之前的评论中纠正过. 归根结底,是当时的我对dom事件这个东西没有一个系统的认识.事件模型.事件流.event对象.事件代理/委托.甚至自定义事件,加起来才是dom事件的全貌,都理解了才能彻底弄懂.本想删除了事,但抱着尊重历史的态度(其实是…

js事件（事件冒泡与事件捕获）

事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id='aa' click='po'> <p id='bb' click='on'>点击</p> </div> 上面两个点击事件如果点击的时候,到底谁会被先触发呢,为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡微软提出了名为事件冒泡(event bubbling)的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一…

浅谈js的事件冒泡和事件捕获

本文地址:https://www.cnblogs.com/christineqing/p/7607113.html 前言: 这篇文章起源于上次工作上的原因,在事件上出的bug,所以就抽空写出一篇,也便于自己以后查阅,如若有幸被您阅读的话,小妹备感荣幸,文章仅为个人理解,如果内容有误的还望海涵,在您时间还方便的时候,希望能告知小妹!谢谢! 什么是事件? 事件是文档和浏览器窗口中发生的特定的交互瞬间. 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中w…

彻底弄懂JS的事件冒泡和事件捕获

先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; 火狐/ie都支持 function(even){ var ev=even||window.even; if(ev&&ev.stopPropagation){ ev.stopPropagation(); }else{ window.event.cancelBubble=true; } } 这…

JS高级：事件冒泡和事件捕获；

1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做事件对象 2.获取鼠标的坐标 event.clientX;event.clientY document.onclick=function(){ event.clientX event.clientY } 3.关于event的兼容性标准:event是undefined 非标准:null 解决兼容:…

JS事件冒泡和事件捕获的详解

在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场).工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗).今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了. 先上结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件…

【JavaScript】事件捕获、事件冒泡与事件委托

2018年12月18日最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是指事件会从开始发生,直到最具体的元素. 而事件冒泡正好相反,就如同将石子投入水中,波纹是从中心向两边散开.事件冒泡是指事件会从最内层的元素开始发生,一直向外传播. 例: <div id="outer"> <p id="inner">Click m…

javascript --- 事件冒泡与事件捕获

事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行脑补 <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪…

【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎…

JavaScript中的事件冒泡？事件传播的解释

注:本文来源可译网事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒泡仅仅是难题的一部分.它经常和事件捕获和事件传播一起被提及,并且对这三个概念有着很深的了解是学习javaScript事件必不可少的,例如,假如你想实现事件委托. 在这篇文章中,我会解释这些术语,并展示它们如何组合在一起.我还将向您展示如何对JavaScript事件流的基本了解可以让您对应用程序进行细…

DOM事件机制(事件捕获和事件冒泡和事件委托)

内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器下面的链接描述了所有事件:https://developer.mozilla.org/en-US/docs/Web/Events (2)事件绑定事件绑定有3种方法,前两钟方法在这里不介绍,主要看第三种: addEventListener方法(使用事件监听绑定事件) addEventListener: 1 e…

JavaScript(3)---事件冒泡、事件捕获

JavaScript(3)---事件冒泡与事件捕获一.理解冒泡与捕获假设有这么一段代码 <body> <div><p>标签</p> </div> </body> 转换成图如下我们知道Dom是有节点关系的 body -> div -> p 之间的关系就是爷爷 -> 父亲 -> 儿子. 我们来思考一个关键的问题如果此时我们在 body div p 都绑定一个点击事件(click).此时如果我们只点击 p标…

js中的点击事件（click）的实现方式

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件(click)的实现方式</title> </head> <body>  <button id="btn" onclick="threeFn()…

事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,重写onlick会覆盖之前属性,没有兼容性问题 ele.onclik = null; //解绑单击事件,将onlic…

e.target与e.currentTarget的区别，事件冒泡与事件捕获，事件委托

e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.com/p/114954ad8fad 事件委托:https://www.jianshu.com/p/ac47521806d2…

JS中dom操作的事件

Click--点击事件优先级:dom.onclick 高于标签上的onClick属性监听事件 --不会覆盖前面的事件效果 dom.addEventListener() 括号里面有三个参数 1.事件类型 2.回调函数,执行事件后触发的操作 3.决定事件是冒泡还是捕获默认值是false(冒泡) true(捕获) 事件冒泡:事件从内部像外传播,外层元素如果有相同的事件,也会触发通过innerHTML改变元素内容时,会清除内部原有的绑定事件. 循环绑定事件时,动态添加的元素没有事件事…

javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One…

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元…

JavaScript事件冒泡和事件委托

JavaScript事件冒泡和事件委托付建宇 - 2 条评论接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验为他人答疑解惑.我们知道JavaScript可以监控页面上元素的各种事件,常用的事件有很多,例如点击,鼠标移入.移出,元素改变等等.这次主要说一下事件冒泡及其一个比较酷的应用,事件委托.不做特殊说明,以下都在jQuery框架内执行. 事件冒泡什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的…

javascript 事件冒泡和事件代理

事件冒泡简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素. 这可能会带来困扰,不必要的事件处理函数被执行了,不过我们可以阻止事件冒泡.事件触发时,会传入一个event对象,它有一个 stopPropagation() 方法可以阻止事件冒泡. 事件冒泡机制当然也有有利的一面,事件代理就是基于浏览器的事件冒泡机制. 事件代理事件代理也叫事件委托,当我们需要为父元素的很多…

jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加注意点:可以同时添加多个相同或不同类型的事件 2.事件解除 .off() 不传参数: $('button').off() //解绑该对象的所有事件一个参数:$("button").off("click") //解绑该对象的“click”类型事件两个参数:$("button"…