HTML DOM addEventListener() 方法

最新推荐文章于 2024-03-15 14:30:52 发布

我是姗姗

最新推荐文章于 2024-03-15 14:30:52 发布

阅读量565

点赞数 1

分类专栏： javascript学习文章标签： js的addEventListener()

本文链接：https://blog.csdn.net/qq_41535547/article/details/94366664

版权

javascript学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

格式：element.addEventListener(event, function, useCapture)；
event 必须。注意：不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
function 必须。指定要事件触发时执行的函数。
useCapture 可选。

例子1：函数不用传参时

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8">    
<title>我是姗姗</title>
</head>
<body>
    <p>鼠标的移动改变按钮的背景颜色。</p>    
    <button id="myBtn">点我</button>    
    <script>       
     document.getElementById("myBtn").addEventListener("mouseover", function1); 
     document.getElementById("myBtn").addEventListener("mouseout", function(){     
     this.style.backgroundColor = "green";       
     }); 
     function function1() {         //别忘记前面的function   
     document.getElementById("myBtn").style.backgroundColor = "red";       
     }
    </script>
</body>
</html>

注意：可以通过函数名（function1）来引用外部函数也即具体的实现。也可以直接在里面用匿名函数实现。

例子2：函数有参数时

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8">    
<title>我是姗姗</title>
</head>
<body>
    <p>该实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
    <p>点击按钮执行一个计算。</p>
    <button id="myBtn">点我</button>
    <p id="demo"></p>
    <script>        
    var p1 = 5;        
    var p2 = 7;
    document.getElementById("myBtn").addEventListener("click", function() {            
    myFunction(p1, p2);        
    });
    function myFunction(a, b) {            
    var result = a * b;            
    document.getElementById("demo").innerHTML = result;        
    }    
    </script>
</body>
</html>

注意：当需要传递参数值时，使用"匿名函数"调用带参数的函数。