JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外

1 addEventListener("click", function() {}, useCapture:false);
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <div id="content" class="c1">
        <a id="b">hhaha</a>
        <a href="#!/fdaf">fda</a>
        <a href="#!/fdaaa">fdf</a>
    </div>
    <script>
        document.getElementById("b").addEventListener("click", function() {
            //this.href = this.href.replace("?", "#");
            console.log("inner");
        },true);

        window.addEventListener("hashchange", function() {
            console.log(location.hash);
        }, false);

        document.getElementById("content").addEventListener("click", function() {
            console.log("outer");
        },true);
    </script>
</body>
</html>

-------------->outer

-------------->inner

默认是不用捕获的。---------->由内向外

------------->inner

------------->outer

区别于xmlhttp.send("GET", url, async:true);--------->表示是否异步async

时间: 2024-08-01 20:23:14

JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外的相关文章

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来 里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl

JavaScript中的跨域详解(内附源码)

什么是跨域? 什么是跨域? 所谓跨域,就是如果在不同的域名下面存在数据交互,这个时候就会存在跨域的问题,这里要说明的是在同一个网站不同的文件夹下的数据交互是不存在跨域问题的. 哪些情况下存在跨域问题? 主域和子域之间会存在跨域问题(比如 www.a.com 和 www.a.b.com). 不同的域名存在跨域问题,哪怕这两个域名指向的是同一个ip地址. 为什么 ajax 不可以跨域? 因为 ajax 是通过 XMLHttpRequest 这个对象来进行数据之间的交互的,而 XMLHttpReque

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="C

javascript中的事件冒泡和事件捕获

焦点事件onfocus:得到焦点onblur:失去焦点 事件冒泡(和样式无关,结构)当一个元素接收到事件的时候,会把他接收到的所有事件传播给他的父级,一直到顶层window 阻止冒泡:当前要阻止冒泡的事件函数中调用event.cancelBubble=true; //阻止当前事件的当前对象 事件捕获: 绑定事件:1.obj.onclick=function(){} //一个对象同一个事件绑定2个函数会产生覆盖2.ie:obj.attachEvent('onclick',fn1) 标准:obj.a

理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如

JavaScript——事件流(事件冒泡和事件捕获)

1.事件流 当浏览器发展到第4代时,浏览器开发团队遇到了一个问题:页面中的哪个元素会拥有某个特定的事件?当你单击某个按钮时,显然该单击事件并不仅仅发生在按钮上,它还发生在按钮的所有祖先元素上,比如按钮的容器元素,容器元素的父元素,甚至整个页面document.但是,哪个元素最先接收到该事件呢?页面接收事件的顺序又是怎样的呢?由此引出了事件流的概念.事件流描述的就是从页面中接收事件的顺序. 2.两个模型 Netscape和Microsoft给出了两个不同的结论.Netscape说document会

JavaScript中的两种事件流

JavaScript中的两种事件流 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. 第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

javascript -- 事件捕获,事件冒泡

使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会有事件冒泡,又有捕获呢?应为当初IE浏览器和Natscape浏览器分别对自己浏览器的事件采用了不同的发生机制,IE浏览器采用了冒泡型:定义有相同事件的嵌套元素,当事件被触发时,子元素拥有优先权,即从里向外发生,像水里的泡泡一样从里向外冒.而Netscape采用了相反的做法,即捕获型,父元素拥有优先权

JS中的事件顺序(事件捕获与冒泡)

问题 如果一个元素和它的祖先元素注册了同一类型的事件函数(例如点击等), 那么当事件发生时事件函数调用的顺序是什么呢? 比如, 考虑如下嵌套的元素: ----------------------------------- | outer | | ------------------------- | | |inner | | | ------------------------- | | | ----------------------------------- 两个元素都有onclick的处理