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

最新推荐文章于 2024-02-17 12:37:41 发布

Cao_Mary

最新推荐文章于 2024-02-17 12:37:41 发布

阅读量2.8w

点赞数 6

分类专栏：前端 javaScript 文章标签： JavaScript Dom 鼠标点击添加事件

本文链接：https://blog.csdn.net/Cao_Mary/article/details/89950163

版权

前端同时被 2 个专栏收录

54 篇文章 3 订阅

订阅专栏

javaScript

31 篇文章 0 订阅

订阅专栏

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

<button id="btn">我是按钮</button>

获取button按钮

var oBtn = document.getElementById("btn");

点击按钮的三种方式

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

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

    oBtn.onclick = function () {
        console.log("666");
    }
    oBtn.onclick = function () {
        console.log("777");
    }
    只打印777，不打印666

方式二：

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

参数一：执行的事件.
参数二：事件发生后的回调方法。
注意点：
1.事件名称不需要添加on
2.后添加的不会覆盖先添加的
3.只支持最新的浏览器IE9及以上。

    oBtn.addEventListener("click", function () {
        console.log(666);
    })
    oBtn.addEventListener("click", function () {
        console.log(777);
    })

方式三：低版本的浏览器支持的方法

注意点：
1.事件名称需要添加on
2.后添加的不会覆盖先添加的
3.只支持IE9以下的浏览器

    oBtn.attachEvent("onclick", function () {
         console.log(666);
     })
    oBtn.attachEvent("onclick", function () {
        console.log(777);
    })

方式四：解决兼容、及相同的事件后面的覆盖前面的问题

    addEvent(oBtn, "click", function () {
        console.log(666);
    });
    addEvent(oBtn, "click", function () {
        console.log(777);
    });
     function addEvent(ele, name, fn) {//元素   事件   回调函数
         console.log(ele.attachEvent);
         if(ele.attachEvent){//如果元素有attachEvent属性，就执行下面的代码
            ele.attachEvent("on" + name, fn);
        }else {//高级浏览器执行的方法
            ele.addEventListener(name, fn);
        }
     }

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

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

Cao_Mary

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
JavaScript添加事件的三种方式（鼠标点击事件）

布局html页面，放入一个button按钮即可。<button id="btn">我是按钮</button>获取button按钮var oBtn = document.getElementById("btn");点击按钮的三种方式方式一：给对象的属性赋值注意点：由于是将函数（function）赋值给了一个对象（oBtn）的属性（onclick），所以后赋值的...
复制链接

扫一扫