js/jq——事件触发方式 事件冒泡捕获 阻止冒泡和默认事件

最新推荐文章于 2024-06-22 15:02:51 发布
最新推荐文章于 2024-06-22 15:02:51 发布
阅读量4.9k 收藏 2
点赞数
分类专栏： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky541788/article/details/82079322
版权

js

1、标签（不推荐，要将script放在页面最后且不能onload）

<body>
<button onclick="clickEvent()">click</button>
</body>


<script>
    function clickEvent() {
        alert('hello world!');
    }
</script>

2、函数赋值

<body>
<button id="btn">click</button>
</body>

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');
        
        // btn.onclick = function(){
        //     clickEvent()
        // };
        // function clickEvent() {
        //     alert('hello world');
        // }
    
        btn.onclick=function(){
            alert('hello world');
        };
    }
</script>

3、事件监听（ 传入的是函数 不是函数值 ）

<body>
<button id="btn">click</button>
</body>

<script>
    window.onload=function(){
        var btn=document.getElementById('btn');
        
       btn.addEventListener('click',function(){
            alert('hello world!');
        })
    }
</script>

移除addEventListener添加的事件：

ele.removeEventListener('click',myFunction);

addEventListener方法特点：

1、同一事件多个句柄（不会覆盖已存在事件）

ele.addEventListener("click", myFunction);
ele.addEventListener("click", mySecondFunction);

2、不同事件句柄（给同一元素添加不同事件和函数）

ele.addEventListener("click", myFunction);
ele.addEventListener("mouseout", mySecondFunction);

jq

$(function () {
            var btn=$('button');
            //1.eventName(fn)
             btn.eq(0).click(function () {
                 alert('1');
             });
            //2.on('eventName',fn)
            btn.eq(1).on('click',function () {
                alert('2')
            },true)//true：代表捕获（由外向里） ；false（默认值）：代表冒泡（由里向外）；
         });

事件冒泡捕获

冒泡：事件由里向外扩散传递

<body>
<script>
    window.onload = function () {
        document.getElementById("father").addEventListener("click",function(){
            alert('1');
        });
        document.getElementById("son").addEventListener("click",function(){
            alert('2');
        })
    }
</script>
<div id="father">
    　　<button id="son">click</button>//先2后1
</div>
</body>

捕获：事件由外向里扩散传递

<body>
<script>
    window.onload = function () {
        document.getElementById("father").addEventListener("click",function(){
            alert('1');
        },true);
        document.getElementById("son").addEventListener("click",function(){
            alert('2');
        },true);
    }
</script>
<div id="father">
    　　<button id="son">click</button>//先1后2
</div>
</body>

阻止事件冒泡

document.getElementById("father").addEventListener("click",function(){
            alert('1');
        });
        document.getElementById("son").addEventListener("click",function(e){
            //return false;//法一（需放前面，不推荐）
            e.stopPropagation();//法二（推荐）
            alert('2');
        });
    }

<div id="father">
    　　<button id="son">click</button>//仅2
</div>

阻止默认事件

document.getElementById("tag").addEventListener("click",function(e){
            e.preventDefault();
            alert('3');
        });

<a href="https://www.baidu.com" id="tag">baidu</a>//点击会弹窗显示3，但不会跳转到百度链接
肖ZE
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
经过绑定元素时会多次触发mouseover和mouseout事件
12-09
然而，当这些事件被绑定到一个包含子元素的父元素上时，问题就出现了：当鼠标在子元素之间移动时，会连续触发 `mouseover` 和 `mouseout` 事件，这被称为事件冒泡或捕获。这种行为可能会导致不必要的处理，甚至在...
jQuery event.stopPropagation() 的理解
weixin_45317902的博客
08-04 517
event.stopPropagation          阻止捕获和冒泡阶段中当前事件的进一步传播。          但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。    语法         
Jquery 阻止捕捉事件
weixin_33843947的博客
10-04 2880
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript：阻止事件冒泡、捕获
最新发布
听海边涛声
06-22 170
Javascript：阻止事件冒泡、捕获
js冒泡、捕获事件及阻止冒泡方法
mmrsdym的专栏
05-07 1268
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题
jQuery中的事件冒泡捕获阻止冒泡
明明的博客
04-21 4399
jQuery中的事件冒泡捕获阻止冒泡事件冒泡IE中的事件流叫做事件冒泡，就是又最开始的时间接收到逐级向上传播较为不具体的节点。IE9、谷歌浏览器、Safari、Opera等等都是将事件一直冒泡到windwo对象上。事件捕获事件捕获从最根本上的Document到下级的元素逐级的向下传递捕获。 IE9、谷歌浏览器、Safari、Opera等阻止事件冒泡jQuery 提供了两种方式来阻止事件冒泡。 **
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
weixin_44211097的博客
09-15 1815
第一部分：事件冒泡 　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。 　　下面举一个简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bubble</title> <style> button{ background: r
JS中dom0级事件和dom2级事件的区别介绍
11-23
不支持事件冒泡和捕获；无法在运行时动态添加或移除。 DOM2级事件处理程序的特点： - 优点：支持添加多个处理程序，它们按顺序执行；支持事件冒泡和捕获；可以在运行时动态添加和移除。 - 缺点：需要使用`...
JQ 事件冒泡
08-13
本文将深入探讨"JQ事件冒泡"这一关键概念，结合具体的代码示例（见demo文件）来帮助理解。 事件冒泡是事件处理的一个重要机制，它源于事件在DOM树中的传播方式。当一个事件（如点击）在某个元素上触发时，该事件...
jquery mobile事件多次绑定示例代码
12-09
你可以将事件绑定到一个更高级别的父元素，然后利用事件冒泡机制来捕获子元素的事件。例如： ```javascript $(document).on("click", "XXX", function() { // 事件处理函数 }); ``` 这样，无论`XXX`元素何时...
jquery中绑定事件的异同
12-03
`$(selector).delegate(childSelector, event, data, function)`，`childSelector`参数指定了需要添加事件处理程序的子元素，这使得事件监听更加精确，减少了不必要的事件冒泡。`delegate()`同样适用于处理动态生成...
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
10-23
大家都知道，jQuery事件触发时有2种机制，一种是事件委托，另一种是事件冒泡,冒泡或默认的事件发生,在某些时候是不需要的,在此就需要一些可以阻止冒泡和默认的事件的方法,本文介绍三种方法做到不同程度的阻止，感兴趣的朋友可以了解下，或许对你了解冒泡事件有所帮助
js事件冒泡&事件捕获&事件委托
weixin_67642008的博客
07-02 744
js事件冒泡&事件捕获&事件委托
《事件冒泡和事件捕获》
杨晓风 迷迭香的记忆
02-13 448
为了解决页面中事件流（事件发生顺序）的问题，微软和网景公司分别提出事件冒泡和事件捕获的解决方式。 一、事件捕获 捕获型事件（event capturing）：事件从最不精确目标对象开始触发，然后到最精确 二、事件冒泡 冒泡型事件（event bubbling）：事件从最特定的事件目标对象到最不特定的事件目标对象（document对象）触发 三、事件捕获和冒泡过程图...
js 阻止事件冒泡
qq_32862143的博客
06-16 2445
html<div> <div id="outer" > <div id="inner" > </div>js<script> document.getElementById("outer").addEventListener("click",function(e){ console.log("outer"); }); document.getE
jq阻止事件冒泡和默认行为的方法
lifewinner1992的博客
05-12 6646
$("#btn").click(function(event){    event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为    return false; // 2.阻止事件冒泡，也阻止了默认行为    event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡});...
深入理解JavaScript事件捕获,阻止
秋水不寒的专栏
05-27 8620
接上篇，既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。 来看代码：   $input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red") }, true) $div.addE
jQuery中的事件冒泡、事件捕获和事件追加引发的问题
LHJBK的博客
05-05 843
近日在项目中遇到一些问题，一个是ID值唯一存在的问题，另一个便是事件的追加产生的错误。 关于ID值唯一存在，从id的定义来看，id代表唯一的元素，若页面中出现多个标签存在相同的id，那么此时只有第一个id所在的标签起作用，而且会多次起作用。所以若需要多个相同的元素出现在一个页面上，切记不要使用相同的ID值，建议可使用class或者name。 其次是事件的冒泡、捕获和追加事件，前两者很好理解，见得
jQuery 中的事件冒泡、事件捕获的一些细节
Ivanzn的博客
06-08 1679
如有错误，欢迎批评指正！ JavaScript 中的事件处理机制 这个部分比较简单，不详细讲了 jQuery 中的事件处理机制、事件默认行为 事件冒泡 浏览器大部分的事件都是支持冒泡的，只有少数事件不支持，比如：focus、blur。针对的，jQuery 中有focusin、focusout支持冒泡。 有两种方法可以取消绑定事件的事件冒泡： event.stopPropagation(); （该方法对 trigger 自定义事件同样有效。因为从jQuery 1.3 开始，trig...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值