编程语言
首页 > 编程语言> > 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方法传入两个参数:

    oBtn.addEventListener("click", function () {
        console.log(666);
    })
    oBtn.addEventListener("click", function () {
        console.log(777);
    })
方式三:低版本的浏览器支持的方法
    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>

标签:function,oBtn,console,鼠标,JavaScript,attachEvent,ele,事件,log
来源: https://blog.csdn.net/Cao_Mary/article/details/89950163