event

JavaScript 的addEventListener() 事件监听详解！

由 一世执手 提交于 2019-12-09 08:06:21
JavaScript 的addEventListener() 事件监听详解！ addEventListener() 用于向指定元素添加事件。 可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法： element.addEventListener(event,fn,useCaption ); 参数说明：tr件，比如 click mouseenter mouseleave fn 回调函数 useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。 当值为true，就是捕获传递。 示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>addEventListener</title> <script type="text/javascript" src="js/jquery-3.0.0.js"></script> <style type="text/css"> #content{ width: 100px; height: 100px; background: #f9f; } </style> </head> <body> <div id="content"></div> <script type="text/javascript"> /

原生JS事件绑定onclick和addEventListener

由 北慕城南 提交于 2019-12-09 08:05:05
onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 this与event查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息 dd.onclick = function (event) { console.log(event.target.innerHTML); //event.target指向的是dd元素，以及他的所有信息 console.log( this .innerHTML); //this也是指向dd元素，包含他的可用信息 } 注意：有时也会有需要使用this的情况 当需要鼠标移入和移出的时候 event会触发该事件每一个子元素 dd.onmouseover = function (event) { this .style.backgroundColor = "red" ; //不会改变子元素 event.target.style.backgroundColor = 'red' ; //会改变子元素 }; dd.onmouseout = function (event) { this .style

js事件冒泡机制简述

由 时光怂恿深爱的人放手 提交于 2019-12-09 07:57:58
定义:JavaSciprt事件中有两个很重要的特性：事件冒泡 以及目标元素 。 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 目标元素: 任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。 我的目的很简单,做一个类型window桌面的web页面.当单击开始菜单时弹出一个层,当单击桌面其他地方时隐藏开始菜单.以前对js的冒泡机制有点了解,知道window.event.cancelBubble 来设置是否启用事件传播.但是这只能在IE是使用.如果跨浏览器就不太合适了.Jquery中的event.stopPropagation()解决了浏览器的兼容性.以下举例说明: <!DOCTYPE html> <head> <title>jQuery - Start Animation</title> <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> <script type=

父元素与子元素的点击事件影响问题

由 随声附和 提交于 2019-12-09 07:45:22
例如以下的代码： html： < div class = "elementI" style = "height: 100px;width: 100px;border: 1px solid red;" > 父元素 < div class = "elementII" style = "height: 50px;width: 50px;border: 1px solid black;" > 子元素 </ div > </ div > < script type = "text/javaScript" > /*子元素绑定的事件*/ $( ".elementI" ).click( function () { alert( "elementI" ); }); /*父元素绑定的事件*/ $( ".elementII" ).click( function () { alert( "elementII" ); }); </ script > 达到的目的是，点击子元素区域只会触发子元素的事件，输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”. $( ".elementI" ).click( function (event) { //谷歌、火狐兼容，IE不兼容 //alert("elementI"); //event.stopPropagation()/

jQuery中的事件冒泡捕获阻止冒泡

由 大憨熊 提交于 2019-12-09 07:40:23
jQuery中的事件冒泡捕获阻止冒泡 事件冒泡 IE中的事件流叫做事件冒泡，就是又最开始的时间接收到逐级向上传播较为不具体的节点。IE9、谷歌浏览器、Safari、Opera等等都是将事件一直冒泡到windwo对象上。 事件捕获 事件捕获从最根本上的Document到下级的元素逐级的向下传递捕获。 IE9、谷歌浏览器、Safari、Opera等 阻止事件冒泡 jQuery 提供了两种方式来阻止事件冒泡。 **方式一: **event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); **方式二：**return false; $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 来源： CSDN 作者： 编程者联盟 链接： https://blog.csdn.net/limm33/article/details/70340178

JavaScript事件捕获与事件冒泡

由 好久不见. 提交于 2019-12-09 07:38:08
冒泡机制 气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制 在不同浏览器中，冒泡的程度不同： IE 6.0: div -> body -> html -> document 其他浏览器: div -> body -> html -> document -> window 注意： 并不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload 当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制。冒泡事件，如下代码： HTML < div id = "father" > < button id = "btn" > 点击 </ button > </ div > CSS father { width : 300 px ; height : 300 px ; background-color : red ; margin : auto ; } JS window.onload = function () { var father = document.getElementById( "father"

【vue】阻止默认事件发生

由 ＊爱你＆永不变心＊ 提交于 2019-12-09 07:37:49
1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件仍然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false ； 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault() 来源： CSDN 作者： evan_qb 链接： https://blog.csdn.net/Evan_QB/article/details/80243589

JavaScript 事件监听, 事件冒泡, 事件捕获, 阻止默认的事件

由 余生长醉 提交于 2019-12-09 07:34:15
目录 目录 JS事件 函数的调用 事件处理机制 IE只支持事件冒泡 捕获 冒泡 事件监听 移出事件句柄 原生JS有兼容 阻止事件的默认行为 阻止事件的传播阻止事件冒泡 其他 值得注意的是 事件冒泡, 事件捕获, 阻止默认的事件 —这3者密不可分 JS事件 函数的调用 : 1.直接调用: 函数名() :demo(); 2.在标签内通过事件调用: 事件="函数名()" :onclick="demo()"; 事件处理机制 :（IE只支持事件冒泡） http://www.jb51.net/article/42492.htm 事件传递 ： 捕获、目标、冒泡三个阶段 冒泡型事件: IE6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window 捕获型事件： 事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 DOM事件流： 同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。 简而言之： 事件捕获 当你使用事件捕获时

js 阻止事件捕获

由 元气小坏坏 提交于 2019-12-09 07:34:00
1.支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候 执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。 W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。 2.可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡 3. IE浏览器 如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获

js事件冒泡和事件捕获

由 拈花ヽ惹草 提交于 2019-12-09 07:32:37
1. 事件冒泡 （1）定义：事件的触发顺序自内向外，换句话说，就是从内层元素到外层元素 （2）案例 <div id="parent"> 父亲 <div id="child">孩子</div> </div> parent.addEventListener("click", function(){ console.log("parent"); }) child.addEventListener("click", function(event){ console.log("child"); }) 点击“孩子”，输出结果 显然这不是我们想要的结果，我们想要点击“孩子”，输出child，而不是parent （3）解决方式 通过阻止事件冒泡解决 parent.addEventListener("click", function(){ console.log("parent"); }) child.addEventListener("click", function(event){ // 阻止事件冒泡 stopBubble(event) console.log("child"); }) function stopBubble(event){ if(event && event.stopPropagation){ // event.cancelBubble = true; event
订阅 event