Javascript 事件propagation机制

Created by Jerry Wang, last modified on Oct 10, 2014

测试代码：

<html>

</script>

$(document).ready(function() {

$("#test").click( function (){

alert("four");

//return false;

});

function iamtwo(e) {

alert("two");

//stopBubble(e);

}

function iamthree(e) {

alert("three");

//stopBubbleDefault(e);

}

function stopBubble(e) {

var evt = e||window.event;

evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );

}

function stopBubbleDefault(e) {

var evt = e||window.event;

evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );

evt.preventDefault();

}

</script>

<body>

<div οnclick="alert('outermost');">Outermost

<div οnclick="alert('middle');"> middle

<div οnclick="alert('inner');">inner</div>

<p><a href="http://www.baidu.com" οnclick="iamthree(event)">three </a></p>

</div>

</div>

</body>

</html>

UI上有6个元素:

点击Outermost: 弹出outermost字样的alert dialog

点击middle: 依次弹出middle，outermost的dialog

点击inner: 依次弹出inner, middle，outermost的dialog

点击two: 依次弹出two, middle，outermost的dialog

点击three: 依次弹出three, middle，outermost的dialog，然后navigate到baidu webpage

点击four: 依次弹出four, middle，outermost的dialog，然后navigate到baidu webpage

如果不希望two元素点击的event 冒泡到其parent hierarchy去，可将click handler iamtwo里的stopBubble行注释取消，之后点击就只会出现two dialog:

对于tag a 元素three，如果要阻止浏览器navigate到baidu website这一默认行为，需要调用event的preventDefault()方法:

如果是采用jQuery的click方法绑定的事件处理，只需在事件处理函数里返回false即可:

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Javascript 事件propagation机制相关推荐

JavaScript事件循环机制
众所周知JS是一门单线程执行环境的语言,对于同步任务而言,同一时刻只能执行一个任务,后续的任务都要在当前执行的任务后面排队.这种模式在遇到一些执行时间较长的任务的时候就会出问题,会导致页面失去响应.所 ...
对JavaScript事件循环机制的理解
前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS ...
笔试题——JavaScript事件循环机制（event loop、macrotask、microtask）
今天做了一道笔试题觉得很有意义分享给大家,题目如下: setTimeout(()=>{console.log('A'); },0); var obj={func:function () {set ...
javascript事件循环机制EventLoop
面试题:1到10 ,每隔一秒输出一个自执行函数for (var i=1; i<=10; i++) {(function (i) {setTimeout(() => console.log ...
javascript 事件对象
btn.onclick = function (event) {// event 就是事件对象var e = event || window.event; // window.event是兼容低版本I ...
浏览器中的事件循环机制
浏览器中的事件循环机制网上一搜事件循环, 很多文章标题的前面会加上 JavaScript, 但是我觉得事件循环机制跟 JavaScript 没什么关系, JavaScript 只是一门解释型语言, ...
JavaScript事件冒泡应用实例
在一些传统的小型WEB应用开发过程中,JavaScript通常只是拿来做表单验证而以,所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况,又或者事件冒泡对最终实现效果影响不大,可忽略 ...
js事件循环机制（await-async-事件循环）
await和async 异步函数 async function async关键字用于声明一个异步函数: async是asynchronous单词的缩写,异步.非同步: sync是synchronous ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

Javascript 事件propagation机制

Javascript 事件propagation机制相关推荐

最新文章

热门文章