浅谈：事件冒泡、事件捕获，及阻止办法

1、事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id="box1"><div id="box2"><div id="box3">给它们都绑定点击事件</div></div></div>

冒泡型事件的触发顺序如下图：由内而外，由子到父的一个触发顺序

而 捕获型事件触 的触发顺序如下图：由外向里触发

2.阻止事件冒泡事件捕获

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

box1.onclick = function () {
console.log('box1');

};
box2.onclick = function (e) {
console.log('box2');
e.stopPropagation();

};
box3.onclick = function (e) {
console.log('box3');
e.stopPropagation();
};

在vue 中还可用这种方式组织事件冒泡或事件捕获

<div @click="click1()">
<span @click.stop="click2()">按钮1</span>
<span>按钮2</span>
</div>

浅谈：事件冒泡、事件捕获，及阻止办法相关推荐

vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
事件冒泡、捕获？如何阻止
事件冒泡 <style>div{color: white;font-size: 30px;}.content{width: 400px;height: 400px;background-c ...
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
浅谈javascript的事件监听——音乐播放器的控制
javascript的事件 javascript是一门基于事件驱动的语言,当html页面中的元素触发一些动作时,可以执行相关的js代码. 1.常见事件浏览器窗体事件事件名描述 onload 当窗 ...
事件冒泡详解及阻止事件冒泡
什么是事件冒泡? 事件冒泡:从子元素向父元素触发 ->当某个事件触发时,同样的事件会向父元素触发. 但并不是所有事件都会产生冒泡问题 onfocus. onblur .onload不会产生冒泡问 ...
JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
onbeforeunload触发ajax,浅谈window.onbeforeunload() 事件调用ajax
经常有这样的需求,就是在离开某个web页面时,用户不一定点注销,这样会导致会话不能及时销毁.为实现用户离开页面时,自动注销功能,需要在web页面的onbeforeunload事件处理函数中发送注销命令 ...
JS事件流(事件冒泡事件委托)
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段: 捕获阶段(从上往下,从外往内) 目标阶段冒泡阶段(从下往 ...
php 冒泡置顶,浅谈php冒泡的排序
PHP实现的.代码先奉上: 复制代码代码如下: function bubble_sort($array) { for ($i = 0; $i < count($array) - 1; $i++ ...

浅谈：事件冒泡、事件捕获，及阻止办法

浅谈：事件冒泡、事件捕获，及阻止办法相关推荐

最新文章

热门文章