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

探究JavaScript中的五种事件处理程序

探究JavaScript中的五种事件处理程序我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数. 我们又把事件处理程序称为事件侦听器. 事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在Ja…

javascript必须懂之冒泡事件

在学习javascript中,如果在事件的使用上出现一些反差效果,不良效果,如鼠标的移入移出时,显示你所需要的内容, 但就是没有出现,然而你不断的检查代码,逐个代码查错,还在浏览器的调试工具中调试都没有发现错误,没有看到你所想要的错误,那么这个时候你要判断一下是不是冒泡事件带来的不良效果了,不过在判断之前,你是不是要知道什么是冒泡事件呢? 接下来冒泡的解释: 冒泡就是从里的事件源一级一级向上触发直到window: 图: 事件源就是你所触发事件在位置的元素,而在这个元素触发了事件,如图你所触发的…

在Javascript中监听flash事件(转)

在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.call调用这个全局函数即可.2.在非特定的环境下(例如编写通用的flash插件),是不能限制用户的函数名的,所以根本无法约定全局函数:是否可以通过类似js的回调函数的形式实现事件监听呢? 其实js与flash的通信,一般情况下可以进行一些比较简单的通信,如传递基本的数据类型.传递简单的对象.调用函数等,…

JavaScript中的鼠标滚轮事件详解

JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false);} Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件 ~~~otherBrowser: wi…

jquery中怎样防止冒泡事件

jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()…

理解js事件冒泡事件委托事件捕获

js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <div id="col"> <p> <a id="btn" href="#">button</a> </p> </div> <script> l…

【事件流】浅谈事件冒泡&&事件捕获------【巷子】

首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流. 1.什么是事件流? 解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受到该事件,这样的传播过程叫DOM事件流. 简单的解释:元素触发事件的时,传播的过程称为事件流. 事件流分为:事件冒泡和事件捕获 2.什么是事件冒泡? 解释:事件冒泡可以形象的比喻成把一个石头丢进水中,泡泡会一直从水底冒出水面,也就是说事件会从最内层的元素开始发生,一直到向上传播,知道根节点微软公司…

关于javascript中静态成员和实例成员的详细解释

关于javascript中静态成员和实例成员的详细解释在我们了解什么是静态成员和实例成员之前,我们首先来了解一下什么是实例? 实例就是由构造函数创建出来的对象. 例如案例中 p 就是实例: function Person() {}// 此函数为构造函数 var p=new Person(); // p为构造函数创建出来的对象我们在讨论静态成员和实例成员时候,把函数当成构造函数, 把创建出来的对象称之为实例.在此明白了什么是实例,下面我们就可以说什么是静态成员和实例成员了. 首先什么…

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T…

day03—JavaScript中DOM的Event事件方法

转行学开发,代码100天——2018-03-19 1.Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 2.常用的event属性有: type //返回当前 Event 对象表示的事件的名称. target //返回触发此事件的元素(事件的目标节点) 3.常用的event方法有:…

javascript中的cookie,以及事件解析

Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以, Cookie的组成:它是由名/值对形式的文本组成:name=value.它的完整格式为; name=value;[expires=date];[path=path];[domain=somewhere.com];[secure] 中括号是可选,name=value是必选的, document.cookie…

javaScript的事件冒泡事件捕获

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开…

vue中Enter触发登录事件和javascript中Enter触发点击事件

created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyCode的值为13触发登录绑定的事件即可 // 登录登录登录 async changeUser () { // 消息提示只弹出一个框 this.$message.closeAll() let s = checkPhone(this.dlPhone, 1) // 手机号 if (s.code === 5…

javascript中常用的DOM事件

//常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放开 onfocus 获取焦点 onblur 失去焦点 onchange 表单改变 selsct 标签 onselect 表单选中 select 标签 onscroll 滚动事件 onload 页面运行完载入 onkeydown键盘按下 onkeypress 键盘按住 onkeyup 键盘抬起 onr…

DOM 事件监听事件冒泡事件捕获

addEventListener() 方法实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向同个元素添加多个同类型的事件句柄,…

jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> 对应的jQuery代码如下: <script type="text/…

jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事件一.常用事件 click(function(){...}) //鼠标点击事件 hover(function(){...}) //当鼠标指针悬停在被选元素上时 blur(function(){...}) //当输入域失去焦点 (blur) 时 focus(function(){...}) //当输…

js --- 事件冒泡事件捕获

先上结论: 他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:false,事件冒泡.默认false,即事件冒泡.Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了. 这是 HTML 代码<div id="parent"> <div…

javascript 中状态改变触发事件

转有限状态机:是一个非常有用的模型,可以模拟世界上大部分事物. 它有三个特征: * 状态总数(state)是有限的. * 任一时刻,只处在一种状态之中. * 某种条件下,会从一种状态转变(transition)到另一种状态. 它对JavaScript的意义在于,很多对象可以写成有限状态机. 举例来说,网页上有一个菜单元素.鼠标悬停的时候,菜单显示:鼠标移开的时候,菜单隐藏.如果使用有限状态机描述,就是这个菜单只有两种状态(显示和隐藏),鼠标会引发状态转变. 代码可以写成下面这样: var me…

JavaScript中给onclick绑定事件后return false遇到的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>IMAGES</h1> <ul> <li> <a href="x_0001.gif" t…

Js阻止冒泡，Vue中如何阻止冒泡事件

js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop=""…

【摘录自MDN】对事件冒泡和捕捉的解释

当一个事件触发了一个有父元素的元素(例如我们的<video>时),现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段. 在捕获阶段: 浏览器检查元素的最外层祖先(<html>)是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它. 然后,它移动到<html>中的下一个元素,并执行相同的操作,然后是下一个元素,依此类推,直到到达实际点击的元素. 在冒泡阶段,恰恰相反: 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是…

Javascript中关于作用域和闭包和域解释的面试题

事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

1.事件流浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆.放到实际页面中就是,你点击一个按钮,而是纸上所有的圆. <栗子:现实生活中的声波.水波> 事件流:从页面中接收事件的顺序,通俗说:用户操作DOM的一系列行为交互. 2.事件冒泡事件冒泡:IE的事件流叫事件冒泡,即事件开始由最具体的元素(文档中嵌套层次最深的那个元素)接收,然后逐级向上传…

说说JavaScript中的事件模型

1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的onXXX属性(3) 使用element.onXXX方式以上三种方式,请看下面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT…

JavaScript中的事件对象

JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息.下面将会讲到DOM中的事件对象.IE中的事件对象以及跨浏览器的事件对象三个部分. 对于事件处理程序,大家可以看我的博文<JavaScript中的五种事件处理程序>. 第一部分:DOM事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论是HMTL特性.DOM0级还是…

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

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

理解JavaScript中的事件流

原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡事件捕获 DOM事件流当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个…

对于js中事件冒泡的理解分析

一. 事件事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地),触发事件: 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象事件捕获:事件发生时首先发生在document上,然后依次传递给body,最后到达目的节点(即事件目标),事件流模型:div →body→ html→ document . 事件冒泡:事件到达事件目标之后不会结束,会逐层向上…

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

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

【JavaScript中的事件冒泡？事件传播的解释】的更多相关文章