js基础之（2）-事件与addEventListener

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量333 收藏
点赞数
分类专栏： 前端 文章标签： javascript 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/missasd1/article/details/117828949
版权
本文详细介绍了HTML事件，包括用户点击、页面加载等常见事件，并重点讲解了`addEventListener`方法的使用，如添加事件句柄、传递参数、事件冒泡与捕获。同时，通过实例展示了事件传递的两种方式：冒泡和捕获，帮助读者深入理解事件处理机制。
摘要由CSDN通过智能技术生成

一、HTML 事件

HTML事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

二、addEventListener（）

addEventListener("事件名称", "事件触发时调用的函数", 事件传递机制是否为冒泡)

参数一：事件名称；如：click；注意事件名称不要加“on”。
参数二：事件触发时调用的函数；
参数三：类型为布尔值；用于描述事件传递机制是否为冒泡；默认值为false，代表传递机制为 “冒泡”。

用于向HTML元素添加事件句柄；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>dom EventListener</title>
</head>
<body>
    <div>

        <div>
            <h2>addEventListener()方法</h2>
            <p>addEventListener()方法用于向指定元素添加事件句柄</p>
        </div>

        <div>
            <h2>语法</h2>
            <p>element.addEventListener( event, function, useCapture); </p>
            <p>第一个参数：事件的类型（如“click”或“mousedown”），不要使用on前缀，例如“click”而不是“onclick”</p>
            <p>第二个参数：事件触发后调用的函数</p>
            <p>第三个参数：事件触发后十冒泡还是捕获。该参数可选</p>
        </div>

        <div>
            <h2>向原元素添加事件句柄</h2>
            <button id="myBtn1">点我</button>
            <p>使用函数名，来引用外部函数;</p>
        </div>

        <div>
            <h2>向同一个元素中添加多个不同类型事件句柄</h2>
            <button id="myBtn2">点我</button>
            <p id="demo2">pending</p>
            
        </div>

        <div>
            <h2>向 Window 对象添加事件句柄</h2>
            <p>HTML DOM 对象如： HTML元素、HTML文档、window对象。或者其他支持的事件对象如：xmlHttpRequest</p>
            <p>实例在 window 对象中使用 addEventListener() 方法。</p>
            <p>尝试重置浏览器的窗口触发 “resize” 事件句柄</p>
            <p id="demo3"></p>
        </div>

        <div>
            <h2>传递参数</h2>
            <p>当传递参数时，使用“匿名函数”调用带参数的函数</p>
            <button id="myBtn4">点我</button>
            <p id="demo4"></p>
        </div>

        <div>
            <h2>事件冒泡或事件捕获</h2> 
            <p>事件传递的方式有两种方式：冒泡与捕获</p>
            <p>实例演示了在添加不同事件监听时，冒泡与捕获的不同</p>
            <p>在 “冒泡” 中，内部元素的事件会先被触发，然后再触发外部元素 </p>
            <p>在 “捕获” 中，外部元素的事件会先被触发，然后再触发内部元素 </p>
            <p>addEventListener()方法中第三个参数，默认值为false，表示事件传递机制为 “冒泡”</p>

            <div class="mydivstyle" id="myDiv1">
                <p id="myP1">点击段落, 我是冒泡</p>
            </div>    <br/>

            <div class="mydivstyle" id="myDiv2">
                <p id="myP2">点击段落，我是捕获</p>
            </div>
        </div>

        
        

    </div>

    <script>

        function myFunction1() {
            var x = document.getElementById("myBtn1");
            x.addEventListener("click", function(){
                alert("Hello, World");
            });
            // 第二个参数可以使用函数名，来引用外部函数
            x.addEventListener("click", theAlertFunction);

            
        }

        myFunction1();

        function theAlertFunction() {
            alert("Hello this is alert;");
        }

        function myFunction2() {
            let x = document.getElementById("myBtn2");
            x.addEventListener("mouseover", theMouseroverFunction);
            x.addEventListener("click", theClickFunction);
            x.addEventListener("mouseout", theMouseOutFunction);
        }

        function theMouseroverFunction() {
            document.getElementById("demo2").innerHTML += "Moused Over! <br/>";
        }

        function theClickFunction() {
            document.getElementById("demo2").innerHTML = "";
        }

        function theMouseOutFunction() {
            document.getElementById("demo2").innerHTML += "Moused Out! <br/>";
        }

        myFunction2();

        // window 对象添加事件句柄
        function myFunction3() {
            window.addEventListener("resize", function(){
                document.getElementById("demo3").innerHTML = Math.random();
            });
        }

        myFunction3();


        // 当传递参数时，使用“匿名函数”调用带参数的函数
        function myFunction4() {
            let p1 = 5;
            let p2 = 7;
            document.getElementById("myBtn4").addEventListener("click", function(){
                thePassParam(p1, p2);
            });
        }

        function thePassParam(p1, p2) {
            let result = p1 * p2;
            document.getElementById("demo4").innerHTML = result;
        }

        myFunction4();

        // 事件传递机制：冒泡、 捕获
        function myFunction5() {
            document.getElementById("myP1").addEventListener("click", function(){
                alert("你点击了内部的 p 元素");
            });

            document.getElementById("myDiv1").addEventListener("click", function(){
                alert("你点击了外部的 div 元素")
            });

            document.getElementById("myP2").addEventListener("click", function(){
                alert("你点击了内部的 myP2 元素")
            }, true);

            document.getElementById("myDiv2").addEventListener("click", function(){
                alert("你点击了外部的 myDiv2 元素")
            }, true);
        }

        myFunction5();



    </script>
    
</body>
</html>

三、 事件的传递

事件传递有两种方式：冒泡、捕获

冒泡：首先触发内部元素的事件，然后触发外部元素的事件；
为addEventListern（）方法的默认情况，其默认值为false。

捕获：首先触发外部元素的事件，然后触发内部元素的事件；
其方法中的对应参数值为true。

参考

MDN：Event接口

https://developer.mozilla.org/zh-CN/docs/Web/API/Event
missasd1
关注
专栏目录
JS基础--addEventListener 事件绑定
qq_34851243的博客
05-19 2195
在 JS 中 可以通过 事件绑定函数addEventListener( )为指定元素对象绑定事件处理函数，且使用此函数可以为同一事件目标注册多个不同函数作为事件处理器。 语法格式如下 objectTarget.addEventListener(" eventType ", handler , captureFlag ); 上面方法为 objectTarget 绑定事件处理器 hand...
js学习-11（addEventListener事件监听）
qq_42760119的博客
07-24 909
事件绑定方式一： 都以点击事件为例 element.onclick = function(){ } 例如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <script type="text/
js中的addEventListener例子
世间迷途小书童
10-14 334
<!DOCTYPE html> <html> <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <p id="demo"></p> <scr...
JS学习五（事件处理程序—addEventListener）
hjh18728801803的博客
07-22 1160
简介 document.addEventListener() 方法用于向文档添加事件句柄。可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号 注： Internet Explorer 8 及更早IE版本不支持 addEventListener(...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3548
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
Dom多个事件绑定addEventListener、鼠标事件、拖拽元素
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
03-15 1640
addEventListener() - 也可以通过addEventListener()来为元素绑定事件 addEventListener(type, listener [, useCapture]) - 参数： type 要监听的事件的字符串，注意这里不需要写on listener 回调函数，当事件发生后调用的函数 useCapture 布尔值，是否在捕获阶段触发事件，一般都是false 通过addEventListener()可以为一个元素的一个事件绑定多个响应函数， 这样当事件被触发时
冇内容管理系统分析 二. addEventListener
weixin_33963189的博客
12-20 239
addEventListener－开始来源： chenlulouis 前面零散地写了些关于 addEventListener 的内容，觉得比较散，有些地方可能也说得不够清楚明白，所以决定以连载的形式从头到尾再写一篇。 addEventListener 用于注册事件处理程序，IE 中为attachEvent，我们为什么讲 addEventListener 而不讲 attachEve...
【JS】自定义JS工具函数库-封装DOM事件监听addEventListener-自定义事件总线eventBus-自定义消息订阅与发布PubSub
YK菌的博客
04-25 681
文章目录1. 封装DOM事件监听addEventListener1.1 复习DOM事件流1.2 事件冒泡1.3 事件委托1.4 自定义DOM事件监听2. 自定义事件总线eventBus定义使用3. 自定义消息订阅与发布PubSub定义使用 1. 封装DOM事件监听addEventListener 1.1 复习DOM事件流 基础知识可以参考这篇博文 【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件 简单复习一下DOM事件流 捕获阶段 当前目标阶段 冒泡阶段
前端 —— JavaScript 基础篇13 --- 事件监听器（DOM2级事件）
宁静致远
05-30 466
之前的文章的案例中 为DOM元素添加事件，出现两种方式。今天再说下第三种方式，也能为元素添加事件。 事件监听器 addEventListener 可以添加多个事件。存在兼容问题，支持 IE9 以上 实例： <button>事件监听dom2级</button> var btn = document.querySelector('button'); btn.addEventListener('click',function () { alert('哈哈') });
js学习总结之dom2级事件基础知识详解
10-19
DOM2级事件是JavaScript中处理用户交互和页面动态更新的关键部分。在DOM2级事件模型中，事件处理有了更高级别的灵活性和控制力，相比于早期的DOM0级事件绑定方式。DOM0级事件绑定简单直观，但存在一些限制，比如只能...
addEventListener方法
qq_65537235的博客
03-31 119
addEventListener（“事件类型例如click”，函数方法例如声明一个匿名函数）
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 3982
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
javascript:addEventListener
weixin_34109408的博客
04-02 157
addEventListener 用于注册事件处理程序，IE 中为 attachEvent，我们为什么讲 addEventListener 而不讲 attachEvent 呢？一来 attachEvent 比较简单，二来 addEventListener 才是 DOM 中的标准内容。 简介 addEventListener 为文档节点、document、window 或 XMLHttpRequ...
原生js无法使用class添加触摸事件的问题
qq_40128591的博客
09-19 859
今天遇到一个小坑 var activityBlock = document.getElementsByClassName("activity-item"); activityBlock.ontouchstart = function(e){   var ev = e || event;   console.log(ev); } 试了这样是无法执行的但是像下面这个又是可以的 var a...
在元素上写事件和addEventListener()的区别
热门推荐
吴小迪的博客
06-01 4万+
在元素上写事件和addEventListent()的区别 onclick添加事件不能绑定多个事件，后面绑定的会覆盖前面的。而addEventListener能添加多个事件绑定，按顺序执行。 addEventListener方式，不支持低版本的IE。（attachEvent 支持IE）。 普通方式绑定事件后，不可以取消。addEventListener绑定后则可以用 removeEvenListe...
addEventListener调用传参函数的方法
LFSenior
07-12 6891
因为addEventListener的第二参数填入带参函数的时候就直接执行了函数 我们使用一个匿名函数作为’观察者‘的身份存在，当监听到事件，先告知作为‘观察者’的匿名函数然后由’观察者‘调用具体的函数 代码如下： btn.addEventListener('click',function () { move(div,200); }); f
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6073
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值