点击按钮的三种方式
方式一:给对象的属性赋值
注意点:由于是将函数(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);})
除了以上三种方法以外还有一种简便方式
-
布局html页面,放入一个button按钮即可。<button id="btn">我是按钮</button> 1 获取button按钮var oBtn = document.getElementById("btn"); 即可执行点击事件
希望可以帮到大家