js点击按钮调用calc函数,js调用函数的几种方法

这篇文章主要介绍了js点击按钮调用calc函数，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。

文章目录

• onclick 属性
• 使用 js 给 onclick 属性赋值
• 元素上设置多个事件监听器 addEventListener

onclick 属性

当你编写 HTML + JavaScript 使用 button 按钮时往往会看见 onclick 属性, 代码如下：

<button onclick="handleClick()"></button>
<button onclick="this.value = 100"></button>

这意味着当你点击上面的 button 时, 他就会执行 handleClick() 这一串代码, 当然, 下面的按钮也会执行 this.value = 100, 为了解耦代码, 当然是使用上面的方法更好。

<div onclick="handleClick()"></div>

注意到, 这个 onclick 属性并不是 button 独有的, 你可以把它放到任意元素里~

使用 js 给 onclick 属性赋值

这样是DOM0级的写法, 同时注意到, 在这个函数中 this 将会自动指向当前触发对象, 因为 onclick 此时绑定在了 elem 这个元素上Python中的所有运算符号。(上面 👆 也是一样的)

var elem = getElementById("btn")
elem.onclick = function(){
	console.log(this.id) // btn
}

元素上设置多个事件监听器 addEventListener

如果希望在一个元素上设置多个事件, 你可能就需要使用 addEventListener 来设置元素上的事件监听器。

var elem = getElementById("btn")
elem.addEventListener("click", function(){
	console.log(this.id) // btn
}, false)

上面的写法使用匿名函数, 会导致 removeEventListener 无法移除事件监听器, 推荐的写法是这样的：

var elem = getElementById("btn")
elem.addEventListener("click", handleBtnClick, false)
elem.removeEventListner("click", handleBtnClick, false)

使用 handleBtnClick 既能进行代码解耦, 也能正确移除事件处理器。 👍