javascript中addEventListener和onclick的区别

先来看addEvenListener事件。

addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除
addEventListener() 方法添加的事件句柄。

复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
</head>
<body>
    <button id="button1" >按键1</button>
    <p id="event">鼠标事件</p>
    <button id="button2">按钮2</button>
    <button id="button3">按钮3</button>
    <script>
        //请在此处编写代码
        /********** Begin **********/
        var x=document.getElementById("button1");
        x.addEventListener("mouseout", mouse_move);//鼠标移开事件
        x.addEventListener("mouseover", mouse_on);//鼠标聚焦事件
        x.addEventListener("click", mouse_click);//鼠标点击事件
        function mouse_move() {
            document.getElementById("event").innerHTML+="鼠标移开<br>";   //在p标签后添加html
        }
        function mouse_on() {
            document.getElementById("event").innerHTML+="鼠标聚焦<br>";
        }
        function mouse_click() {
            document.getElementById("event").innerHTML+="鼠标点击<br>";
        }
        /********** End **********/
    </script>
</body>
</html>
复制代码

这里的button2可以使用addEventListener()同时监听多个事件。而且事件不会被覆盖。
注意：这里的script标签不能放在head里面，因为我们得先加载完html标签，才能使用监听事件。

拓展：mouseup ()当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。
mousedown()当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。
mouseenter ()当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
mouseleave ()当鼠标指针离开被选元素时，会发生 mouseleave 事件


我们再来看看onclick()的使用

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="click_on">onclick</p>
    <script>
        var click1=document.getElementById("click_on");
        click1.onclick=function ()
        {alert("第一个click")};
        click1.onclick=function()
        {alert("第二个click")};
    </script>
</body>
</html>
复制代码

这里只打印第二个click；表明使用多个onclick会被覆盖。

所以onclick和addEventListener事件区别是：onclick事件会被覆盖，而addEventListener可以先后运行不会被覆盖，addEventListener可以监听多个事件。

 

 

from:https://blog.csdn.net/qq_42444795/article/details/105264243

posted @   幽冥狂_七  阅读(436)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示