如何给HTML元素添加事件

方式一：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML添加事件的方式一</title><script>function test(){console.log(111);}</script></head><body><input type="button" value="按钮" onclick="test()" /></body>
</html>

方式二：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML添加事件的方式二</title></head><body><input type="button" value="按钮" id="button" /><script>document.getElementById("button").onclick=function(){console.log(111);};</script></body>
</html>

方式三：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML添加事件的方式三</title></head><body><input type="button" value="按钮" id="button" /><script>document.getElementById("button").addEventListener("click",function(){console.log(111);});</script></body>
</html>