.stop - 阻止冒泡 .prevent - 阻止默认事件 .capture - 阻止捕获 .self - 只监听触发该元素的事件 .once - 只触发一次 .left - 左键事件 .right...-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> ... Do something .exact 修饰符 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件...-- 有且只有 Ctrl 被按下的时候才触发 --> A A
-- 阻止单击事件继续传播 比如A按钮定义到Bdiv上,两个都绑定了事件,我们在A按钮上加.stop可以使触发A按钮后就停止事件传播,不触发Bdiv上的事件 --> 不像其它只能对原生的 DOM 事件起作用的修饰符，`.once` 修饰符还能被用到自定义的组件事件上...换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。...-- 没有任何系统修饰符被按下的时候才触发 --> A 鼠标按钮修饰符 .left .right .middle...这些修饰符会限制处理函数仅响应特定的鼠标按钮。
单击触发react事件 React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React...，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。...( 单击事件触发 )..." onClick={this.onReactChildClick}>子元素单击事件触发 ) } } export default...ReactEvent 通过设置原生事件绑定为冒泡阶段调用，且每次测试单击子元素按钮： 在子元素原生事件程序中阻止事件传播，则打印出： 子元素原生事件绑定事件触发； 在父元素元素事件程序中阻止事件传播
事件处理 实验介绍 页面上会有很多的页面交互，例如用户点击按钮，会触发什么样的事件，这个事件要做什么事情，就会涉及到事件处理。...尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了「事件修饰符」。...-- 点击事件将只会触发一次 --> 不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> A 鼠标按钮修饰符 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮
答案是： 第一次结果为：先弹出“child 事件触发，child”，再弹出“parent 事件触发，parent”。...然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。...这两个阶段如下图所示： [bubbling-capturing] 在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册，这也是为什么只有一个阻止冒泡方法的方法 event.stopPropagation...()，而没有阻止捕获的方法，因为完全没必要。...主流浏览器都默认在冒泡阶段进行事件注册，所以，只有阻止冒泡的方法而没有阻止捕获的方法。
比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？...：输出为 div；因为该执行函数就绑定在该元素上 情况三：点击 div；只触发 father() target 和 currentTarget 都为 div 另外，执行函数中的 this 值指向...我们知道一般事件是在处于目标阶段到冒泡阶段执行的。倘若不阻止冒泡，那么点击一个小按钮，一直回溯到 document。那么整个页面许多地方的点击事件都会触发，很显然我们不想这样。...click 点击，只有按下事件和放开事件发生后才会触发，只是按下不会触发 dblclick 双击，当且仅当连续两次 click 时触发 触发顺序： mousedown mouseup click...触摸屏 上述事件在移动端上又有所不同 并不支持 dblclick ，双击只会放大 轻击不可单击或者没有绑定 click 的元素什么事件也不会发生 在可点击或者绑定 click 的前提下点击会触发
Leo 按钮 学习一个新知识的时候，一定要知道为什么会出现这个技术。...事件捕获 当某个元素触发某个事件（如 onclick ），顶层对象 document 就会发出一个事件流，随着 DOM 树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。...途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。...List.map(item => this.clickFun(item)}>按钮：{item}) } ...原生事件中如果执行了stopPropagation方法，则会导致其他React事件失效。因为所有元素的事件将无法冒泡到document上。
Leo 按钮 学习一个新知识的时候，一定要知道为什么会出现这个技术。...途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。...List.map(item => this.clickFun(item)}>按钮：{item}) } ...该方法可以阻止监听同一事件的其他事件监听器被调用。...原生事件中如果执行了stopPropagation方法，则会导致其他React事件失效。因为所有元素的事件将无法冒泡到document上。
修饰符 .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： <!...尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。...-- 点击事件将只会触发一次 --> 按键修饰符 在监听键盘事件时，我们经常需要检查常见的键值。...换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。...-- 没有任何系统修饰符被按下的时候才触发 --> A 鼠标按钮修饰符 (1) .left (2) .right
eventTarget（目标对象）上，当该对 象触发指定的事件时，就会执行事件处理函数。...该方法接收两个参数： eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on callback： 事件处理函数，当目标触发事件时回调函数被调用...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...， 而target指向的是子元素，因为他是触发事件的那个具体元素对象。...事件委托的原理 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。 事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。
eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。...该访法接收两个参数: ●e eventNameWithOn:事件类型字符串，比如onclick、onmouseover, 这里要带on ●callback: 事件处理函数，当目标触发事件时回调函数被调用...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...， 而target指向的是子元素，因为他是触发事件的那个具体元素对象。
如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。 stopPropagation就是阻止目标元素的事件冒泡到父级元素。...如： test... 上面的代码，Demo如下,我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。...下面这个使用原生js，只会阻止默认行为，不会停止冒泡 <li id='ul-a' onclick='alert("li
如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。...如： test... 上面的代码，Demo如下,我们单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。...的话则既阻止默认行为又防止对象冒泡 下面这个使用原生js，只会阻止默认行为，不会停止冒泡 <ul onclick='alert...; }; 下面这个是使用jQuery，既阻止默认行为又停止冒泡
(type,listener[,useCapture]) 此方法将指定的监听器注册到eventTarger（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。...() 该方法阻止默认事件（默认行为）标准 e.stopPropagation() 阻止冒泡 标准 非标准一般指在ie6-ie8中支持 e.target和this区别 e.target 返回的是触发事件的对象...标准写法：利用对象事件里面的 stopPropagation()方法 儿子...作用：只操作一次DOM，提高程序的性能。
这种方法不属于w3c标准，并且仅IE8及以下支持该方法； ②事件类型要加on； ③如下图，b中声明a函数时分配了一块内存地址 ，两个dom.attachEvent('onclick',a)中的a都指向的是下面定义的...，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能； 每个函数都是一个对象...比如说只有点击li才会触发，不怕，我们有绝招： 事件本身是一个对象，即Event对象，事件发生时该对象作为参数传给回调函数。...li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！...请看例三： 我们的需求是是： ①移入li，li变红，移出li，li变白 ②对于点击按钮后新增的li节点，仍然具有该效果。
特定API事件：这些事件多用于特定场景的实现，例如 HTML5中提供的拖放API中的事件等 与错误处理的相关事件 注册事件 注册事件指：就是将 Javascript函数与指定的事件相关联。...通过事件属性 按钮 function fn() { console.log...移除注册事件 移除事件只有removeEventListener()，DOM标准规范提供的 removeEvenListener()方法，调用该方法表示向指定元素移除事件监听器。...事件流 捕获阶段（网景公司提出） 按照DOM树结构由 documenti对象向下的顺序传播，直到目标元素为止 目标阶段 该阶段就是指目标元素触发当前事件。...因为注册事件已经委托给了该元素的祖先元素完成。 简化逻辑代码 这种方式只需要祖先元素一次注册事件，而不需要分别为大量元素注册事件。
、a标签的跳转就是默认事件： test .self： 只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。...比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡： .once： 只能用一次，无论点击几次，执行一次之后都不会再执行： .capture： 事件的完整机制是捕获-...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!...的键码对应表： test 注意，只有你点击过一次或者聚焦到这个输入框才能使用键盘触发
匿名函数和传统方式一样会创建独有的 this 对象（即触发事件的元素），而箭头函数是继承绑定它所在函数的 this 对象。...attachEvent 缺点：this 的值会变成 window 对象的引用而不是触发事件的元素。...，离开按钮，只会弹出1 事件冒泡有时候会带来麻烦，可以通过 e.stopPropagation()方法阻止事件冒泡 事件对象 事件处理函数可以带参数，带的参数就是事件对象。...，然后利用 e.target 找到当前点击的 li，点击 li，事件会冒泡到 ul 上，而 ul 上有注册事件，就会触发事件监听器。...作用 只需要操作一次 DOM，提高了程序性能。
second paragraph'); p.appendChild(t); frag.appendChild(p); document.body.appendChild(frag); 在这个范例中活动的文档仅仅更新了一次并触发一次屏幕重绘...事件处理 通常事件处理是通过为元素附加事件监听器来实现的，例如有一个按钮，该按钮在每次单击后都会增加一次计数。...b.innerHTML = "Click me: " + count; } 如果希望在一次单击后执行多个函数功能，仍然维持采用现在的松耦合模式是无法做到的。...如果在div元素汇总有10个按钮，只需要为该div元素附加一个事件监听器就可以实现为每个按钮分别附加一个监听器的效果。 ...然后只需要对之前范例中使用的myHandler()函数做微小修改（需要过滤不感兴趣的点击事件），就可以直接使用。在这种情况下，只需寻找按钮的点击事件，而同一个div元素中其他点击事件都会被忽略。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
