0.起因
前几天写业务的时候,碰到了这样的需求:
bug
checkbox在父DIV的里面,但是checkbox绑定了v-model,要求点击图片的时候让checkbox状态改变.
这个需求说起来挺简单的,绑定之后写一个方法,让checkbox的值跟着走就行了.但是我碰到了几个小问题.解决不难,但是我希望能够进行输出并追根问底,形成自己的知识体系.
那么,开始吧.
1.修改状态带来的问题.
input中checkbox的代码简化如下:
<input type="checkbox" v-model="pro.IsSelect" @click.stop="test(pro)">
已知这个checkbox在一个大的div内,但是现在的问题是,大的DIV上绑定了一个这样的事件:
prochange:function(data){
data.IsSelect=!data.IsSelect;
},
可以看到,我使用这一个事件进行checkbox状态的修改
这样会产生一个问题,那就是我在点击大DIV的时候会正常触发事件,但是点击小的checkbox则不会.
解决方法很简单,在小事件上加上阻止事件冒泡即可.
.....@click.stop="test(pro)">
这样就解决了.但是我心中的疑惑还是没有消除.冒泡究竟是怎么样的?我粗浅的知识应付工作是足够了,但是我真的了解冒泡吗?
2.冒泡和捕获,关于事件监听
解决问题的第一个方法当然是找资料.我之前进行过捕获冒泡相关知识的学习,但是印象并不是很深刻,我觉得我有必要重新总结一下.
2.1鼠标点击事件的区别
在我鼠标左键点击网页的这一刻,究竟发生了什么?我想大概是:
- 系统级API捕捉到了我的鼠标的动作
- 系统将这个事件传递给浏览器.
- 浏览器通过DOMAPI通知网页.
- 网页进行事件对应的操作.
2.2原始的方法-事件绑定
在DOM Level2(链接至我认为将DOM level说的比较清楚的文章)之前,其实能够使用的方法只有事件绑定.
没错,就是古老的xxx.onclck方法.
而DOMlevel2的介绍是这样的:
DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。
DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；
DOM事件（DOM Events）：定义了事件和事件处理的接口；
DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；
DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。
在DOM2添加事件监听之后,我们开始面对着一个新的问题.
2.3child元素和parent元素的通知问题:冒泡和捕获
要说捕获和冒泡，得先介绍事件监听。
事件监听和绑定其实差不了太多，但是新增了一个特点:就是无论监听多少次，都不会覆盖掉前面的事件。
捕获和冒泡其实本质上只是Child和Parent通知的两种顺序。
捕获指的是parent先通知，child后通知，而冒泡则相反.
比如,就拿业务上碰到的这个小问题作为例子.已知Chrome使用的是事件冒泡,那么通知顺序应该是:
点击checkbox-通知child(checkbox)值改变-通知parent-触发parent绑定的事件-parent上绑定的!IsSelect触发-checkbox不变
因为我们在parent上绑定了事件,所以现象是这样的:
可以看到,结果是one-two/one-three/two/one-four-three-two-one.可以看到,浏览器的表现与我们的知识没有出入.
看到这里,我们可以略过全是捕获的测试了,能够预想到结果是啥了.
但是,如果冒泡和捕获同时存在呢?
我们把测试函数改成这样:
<script type='text/javascript'>
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
one.addEventListener('click',function(){
console.log('one');
},false);
two.addEventListener('click',function(){
console.log('two');
},true);
three.addEventListener('click',function(){
console.log('three');
},false);
four.addEventListener('click',function(){
console.log('four');
},true);
这样会输出怎样的结果呢?说实话,我并不知道.所以我决定试试.
这个结果就有点意思了.点击two的时候,因为two是捕获,那么应该显示one-two,但是实际上显示的是two-one.点击three的时候,显示的是two-three-one,点击four显示的是two-four-three-one那么这种混杂的情况是怎么运行的呢?
在进行了几次实验后,我得出了这个结论.
在冒泡与捕获同时存在时,会先执行从外到内的捕获,然后再执行从内到外的冒泡
所以,two-four-three-one应该这么解释:
当点击four时,优先执行父级元素捕获-执行two的捕获-执行four的捕获-执行three的冒泡-执行one的冒泡.
今天花了很多时间总结了这个知识,但是并不觉得亏.以后再碰到这种坑,应该是再也不会掉进去了.
网友评论