JavaScript添加点击事件的三种方式

2021-01-19  乐帮网

javascript

JavaScript添加点击事件的三种方式(前言)

布局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>

转自于:https://blog.csdn.net/Cao_Mary/article/details/89950163

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:1052839972@qq.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力