javascript中的“捕获组”是什么意思

“捕获组”是正则表达式中的概念，除了 JavaScript，在其他正则表达式的应用场景中也都是通用的。下面主要以 JavaScript 中的捕获组为例说明。

创新互联建站是专业的新巴尔虎左网站建设公司，新巴尔虎左接单;提供网站设计制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行新巴尔虎左网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

首先，在正则表达式中，可以进行“分组”，用一对圆弧括号括起来的表达式就是一个分组。

/(pattern)/ // JS 中分组的基本写法

比如，“/(sun)(day)/”就表示了由“sun”和“day”子表达式构成的两个分组，它最终的匹配效果和“/sunday/”一致，只是分组之后可以将各组子表达式的匹配结果分别处理，操作更加灵活。其实，这两个分组也是捕获组。

捕获组就是将正则表达式中子表达式匹配的结果，分组按顺序保存，之后可以通过序号或名称来使用这些内容。不过，暂时 JavaScript 还不支持为捕获组命名，因此也就无法通过名称来访问捕获组，只能通过序号访问。

下面举3个匹配简单整数四则运算的例子，介绍一下捕获组的基本用法。

1）通过捕获组分别读取前运算数、运算符和后运算数：

var reg1=/(\d+)([\+\-\*\/])(\d+)/;

var matches=reg1.exec("10*20");

var comp=matches[0]; //"10*20"

//序号0为匹配的内容，分组从1开始

var num1=matches[1]; //"10"

var sign=matches[2]; //"*"

var num2=matches[3]; //"20"

捕获组还能反向引用，即在表达式中直接使用某个分组的内容。

2）匹配前、后两个数值的相同情况：

var reg2=/(\d+)([\+\-\*\/])\1/; //反向引用时用“\+序号”即可

var result1=reg2.test("25-25"); //true

var result2=reg2.test("25-14"); //false

3）置换前、后两个数的位置（使用例 1 中的正则表达式）：

var str="234/156";

var change=str.replace(reg1,"$3$2$1"); //"156/234"

// 在 replace 语句中引用的写法是“$+序号”

既然有捕获组，那肯定还有非捕获组。顾名思义，只执行匹配过程、不保存匹配结果的分组就是非捕获组。在捕获组表达式的左括号后加“?”和“:”等符号即可构成非捕获组。

/(?:pattern)/ // JS 中非捕获组的基本写法

与非捕获组相关的还有“预查”，这些扩展知识就不多介绍了，感兴趣的话可以自行查找。

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一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。

前端豆知识，很小却有用

JavaScript中事件捕获和事件冒泡以及如何阻

浏览器中对事件的处理机制默认为事件冒泡，例如

div id='div1'div id='div2'div id='div3'/div/div/div

#div1{ width: 500px;height: 500px; background: rgb(12,42,31);}#div2{ width: 450px;height: 450px; background: rgb(212,142,1);}#div3{ width: 350px;height: 350px; background: rgb(1,242,153);}

绑定click事件：

div1.onclick=function(){ alert("div1")}div2.onclick=function(){ alert("div2")}div3.onclick=function(){ alert("div3")}

此时，当单击中间的div3时，先后弹出div3, div2, div1，此为事件冒泡的过程。利用addEventListener可以设置事件处理机制为捕获还是冒泡：

div1.addEventListener('click',function(obj){ alert("div1")},true);//如果未false则为事件冒泡，不填的话，默认falsediv2.addEventListener('click',function(obj){ alert("div2")},true);div3.addEventListener('click',function(obj){ alert("div3")},true);

这里将第三个参数设为true，指定事件处理机制为事件捕获。此时再次单击div3时，会依次弹出div1, div2, div3，与之前的相反。

而IE中只有事件冒泡，且没有addEventListener事件，取而代之的是attachEvent。

但是有时候，我们不喜欢出现事件冒泡或者捕获，希望单击div3时，只弹出div3。这时就要用到下面阻止事件冒泡的方法。

1. 阻止冒泡事件

主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上，在事件传播的任何阶段都能使用。使用方法如下（兼容IE）：

function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }

2. 阻止默认事件

像submit这类的表单元素，都会绑定默认事件，如果不阻止默认事件，则绑定的其他方法也会无效。使用方法如下（兼容IE）：

function stopDefaultEvent(event){ if(window.event){//兼容IE window.event.returnValue=false; }else{ event.preventDefault() } return false;}

网站栏目：javascript捕获,js异常捕获
文章地址：http://ybzwz.com/article/dsgoggg.html