“捕获组”是正则表达式中的概念,除了 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 中非捕获组的基本写法
与非捕获组相关的还有“预查”,这些扩展知识就不多介绍了,感兴趣的话可以自行查找。
以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一个阻止事件传递的功能,点击删除按钮后,事件就会结束,就不再显示商品详情。
前端豆知识,很小却有用
浏览器中对事件的处理机制默认为事件冒泡,例如
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异常捕获
链接URL:https://www.cdcxhl.com/article16/dsgoggg.html
成都网站建设公司_创新互联,为您提供建站公司、网站内链、关键词优化、网站营销、Google、营销型网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联