JavaScript添加事件的三种方式（鼠标点击事件）

时间：2025-05-09 11:35:35

布局html页面，放入一个button按钮即可。

<button >我是按钮</button>

获取button按钮

var oBtn = ("btn");

点击按钮的三种方式

方式一：给对象的属性赋值

注意点：由于是将函数（function）赋值给了一个对象（oBtn）的属性（onclick），所以后赋值的会覆盖先赋值的。

     = function () {
        ("666");
    }
     = function () {
        ("777");
    }
    只打印777，不打印666
方式二：

通过addEventListener方法添加。
需要给addEventListener方法传入两个参数:

  • 参数一：执行的事件.
  • 参数二：事件发生后的回调方法。
  • 注意点：
    1.事件名称不需要添加on
    2.后添加的不会覆盖先添加的
    3.只支持最新的浏览器IE9及以上。
    ("click", function () {
        (666);
    })
    ("click", function () {
        (777);
    })
方式三：低版本的浏览器支持的方法
  • 注意点：
    1.事件名称需要添加on
    2.后添加的不会覆盖先添加的
    3.只支持IE9以下的浏览器
    ("onclick", function () {
         (666);
     })
    ("onclick", function () {
        (777);
    })
方式四：解决兼容、及相同的事件后面的覆盖前面的问题
    addEvent(oBtn, "click", function () {
        (666);
    });
    addEvent(oBtn, "click", function () {
        (777);
    });
     function addEvent(ele, name, fn) {//元素   事件   回调函数
         ();
         if(){//如果元素有attachEvent属性，就执行下面的代码
            ("on" + name, fn);
        }else {//高级浏览器执行的方法
            (name, fn);
        }
     }

鼠标点击事件最终解决方案完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript-添加事件三种方式</title>
</head>
<body>
<button >我是按钮</button>
<script>
    var oBtn = ("btn");
    addEvent(oBtn, "click", function () {
        (666);
    });
    addEvent(oBtn, "click", function () {
        (777);
    });
    
    //添加事件的函数
     function addEvent(ele, name, fn) {//元素   事件   回调函数
         ();
         if(){//如果元素有attachEvent属性，就执行下面的代码
            ("on" + name, fn);
        }else {//高级浏览器执行的方法
            (name, fn);
        }
     }
</script>
</body>
</html>

相关文章