JS事件冒泡与捕获

        以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的 全过程是1-2-3-4-4-3-2-1 。

前半部分，事件从最外面的父div依次传递到最里面的后代div， 1-2-3-4这部分我们叫捕获过程 。

之后事件又从最里层的后代div逐层传出， 4-3-2-1这部分我们叫冒泡过程 。

如果我把捕获监听器和冒泡监听器都加上，如下图这样。

这时我们有8个监听器了，在捕获过程和冒泡过程都有监听。输出如下图。

如果我去除几个监听器如下图。为了容易理解我调整了格式

仍然是按照箭头顺序，明显应该输出1423。

        在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

        使用框架时可使用对应的框架提供的方法。如上面我使用了Vue框架，通过事件装饰来区分捕获与冒泡。

        在不使用任何框架的情况下，我们在js中通过stopPropagation方法阻止事件继续传递。

        使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。

        我们可以在传递过程中阻止事件继续传递，防止触发不需要的事件。

如图我在第三层捕获后阻止事件继续传递，那么后面的log方法不会继续执行。最终只输出1-2-3。

        我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。

前端豆知识，很小却有用

1、JS获取表格的简便方法：获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells

使用实例： oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]

2、遍历

var oTable=documentgetElementById("表格id");

oTabletBodies[0]可以看成是rows和cells组成的二维数组，用两个for循环嵌套遍历一下就可以了

你说的应该是getElementByClassName吧。

getElementByClassName是document对象和Element对象的一个方法，document下的getElementByClass扫描整个document（文档），查找指定css类名的元素，例如：

var objEles = documentgetElementByClassName('myCls');

将查找class为myCls的元素。

如果是Element下的getElementByClassName，那么它只扫描当前元素的后代元素。

DOM3级事件中定义了9个鼠标事件。

mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。

mouseup:鼠标按钮被释放d起时触发。不能通过键盘触发。

click:单击鼠标 左键 或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick:双击鼠标 左键 时触发。

mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。

mouseout:鼠标移出目标元素上方。

mouseenter:鼠标移入元素范围内触发， 该事件不冒泡 ，即鼠标移到其后代元素上时不会触发。

mouseleave:鼠标移出元素范围时触发， 该事件不冒泡 ，即鼠标移到其后代元素时不会触发。

mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

documentoncontextmenu =function(){return false};

documentbodyonmouseup =function(e){

if(ebutton===2){

consolelog("右键");

    thatrightHand =true;

  }else if(ebutton===1) {

consolelog("中间键")

}else {

consolelog("左键")

}

}

title: JS树结构数据的遍历

date: 2022-04-14

description: 针对项目中出现树形结构数据的时候，我们怎样去 *** 作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和 *** 作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点

1、每个节点都只有有限个子节点或无子节点；

2、没有父节点的节点称为根节点；

3、每一个非根节点有且只有一个父节点；

4、除了根节点外，每个子节点可以分为多个不相交的子树；

5、树里面没有环路

下面的表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的 *** 作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的

从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。

所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：

取出队列中的第一个元素，进行访问相关 *** 作，然后将其后代元素（如果有）全部追加到队列最后。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止

1、先序遍历

访问子树的时候，先访问根再访问根的子树

2、后序遍历

访问子树的时候，先访问子树再访问根

1、先序遍历

先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面

2、后序遍历

后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问 *** 作，否则继续扩展子节点到当前节点前面

对于树结构的遍历 *** 作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）

二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript

JS树结构 *** 作:查找、遍历、筛选、树和列表相互转换

js定位span没有id的原因有2点。

1、id和class都是自己加的，不加就没有，没有id和class时js可用documentgetElementsByTagName("span")来获取，针对哪一个就用哪个的下标，css中识别可用后代选择器或者属性选择器。

2、不用id可以用class和name。

你可以换个角度思考，判断p是不是c2的父亲

function isFatcher(p, c2){

var c = c2;

while(cparentNode){

c = cparentNode;

if(c == p)

return true;

}

return false;

}

定义和用法

cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

var ele=documentgetElementById('id');

var eleClone=elecloneNode(true);

documentbodyappendChild(eleClone);

以上就是关于JS事件冒泡与捕获全部的内容，包括:JS事件冒泡与捕获、在js中怎样获取当前页面表格中的数据、Js中的 getByClass 什么意思 求大神分析等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！