首页 > 编程语言> > JavaScript添加事件的三种方式（鼠标点击事件）

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

2019-05-08 13:55:03 作者：互联网

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

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