弱弱的问一句,js冒泡有什么用途
答案:2 悬赏:20 手机版
解决时间 2021-02-02 00:25
- 提问者网友:遮云壑
- 2021-02-01 12:22
弱弱的问一句,js冒泡有什么用途
最佳答案
- 五星知识达人网友:执傲
- 2021-02-01 13:15
有种可能是,某个DOM节点绑定了某事件监听器,本来是想当该DOM节点触发事件,才会执行回调函数。结果是该节点的某后代节点触发某事件,由于事件冒泡,该DOM节点事件也会触发,执行了回调函数,这样就违背了最初的本意了。
全部回答
- 1楼网友:低音帝王
- 2021-02-01 14:38
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
假设一个元素div,它有一个下级元素p。
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
两种模型
以前,netscape和microsoft是不同的实现方式。
netscape中,div先触发,这就叫做事件捕获。
microsoft中,p先触发,这就叫做事件冒泡。
两种事件处理顺序刚好相反。ie只支持事件冒泡,mozilla, opera 7 和 konqueror两种都支持,旧版本的opera's 和 icab两种都不支持 。
事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。
事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。
w3c模型
w3c模型是将两者进行中和,在w3c模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addeventlistener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
ele.addeventlistener('click',dosomething2,true)
true=捕获
false=冒泡
传统绑定事件方式
在一个支持w3c dom的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。
ele.onclick = dosomething2
ie浏览器
如上面所说,ie只支持事件冒泡,不支持事件捕获,它也不支持addeventlistener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachevent。
ele.attachevent("onclick", dosomething2);
附:事件冒泡(的过程):事件从发生的目标(event.srcelement||event.target)开始,沿着文档逐层向上冒泡,到document为止。
事件的传播是可以阻止的:
• 在w3c中,使用stoppropagation()方法
• 在ie下设置cancelbubble = true;
在捕获的过程中stoppropagation();后,后面的冒泡过程也不会发生了~
3.阻止事件的默认行为,例如click 后的跳转~
• 在w3c中,使用preventdefault()方法;
• 在ie下设置window.event.returnvalue = false;
元素
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯