DOM元素添加事件。

最新推荐文章于 2024-05-05 03:05:28 发布

cy.plus

最新推荐文章于 2024-05-05 03:05:28 发布

阅读量741

点赞数 2

文章标签： js dom javascript

本文链接：https://blog.csdn.net/weixin_46953330/article/details/114455385

版权

1.常规添加。

直接在标签里添加。

2.动态添加。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="btn1(1)" >按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3" class="btn_3">按钮3</button>
<div style="background: red; width:30px; height:30px;"  id="black"></div>
<script>
//1.常规添加
 function btn1(a){
        console.log(a);
    }
    /*2.动态给dom添加事件*/
    var btn =document.getElementById ("btn2");
   btn.onmouseover=function(){
     btn.style.background ="red";
   };
/sc**加粗样式**ript>

3.事件监听添加。

在说明事件监听之前先讲讲事件流。

事件流分为两种。

冒泡事件：事件传播从最特定到最不特定，简单说就是里往外传播。
在这里插入图片描述

捕获事件：事件传播从最不特定待最特定，简单说就是从外向里传播。
在这里插入图片描述
事件流讲完之后来说说如何利用监听处理事件。

addEventListener(“事件类型” , “事件执行的回调函数” , “布尔值”);

true：事件捕获。

false：事件冒泡。

addEventListener是给同一对象的相同事件添加一个或多个执行函数，里面中的this指向的是当前执行对象。

   btndata.addEventListener("click",function (){
     console.log("事件执行函数");
     });
     btndata.addEventListener("click",function (){
     console.log("事件执行函数");
     console.log(this);
     //事件监听移除
     removeEventListener
     });

事件监听移除时需要函数的名称。

  btndata.addEventListener("click", m1);
    function m1() {
        console.log("事件执行函数");
    }
    btndata.addEventListener("click", m2);
    function m2() {
        console.log("事件执行函数");
        //事件监听移除事件执行函数
        this.removeEventListener("click", m2);

    }

阻止事件冒泡：stopPropagation()

如果点击button时，通过事件冒泡传递给了div，可这时并不需要事件冒泡，就可使用stopPropagation()进行阻止。

cy.plus

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素添加事件。

1.常规添加。直接在标签里添加。2.动态添加。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><button onclick="btn1(1)" >按钮1</button><button id="btn2">按钮2&
复制链接

扫一扫