废话不多少，直接上代码
第一种
<body>
<div style="400px;height:400px;background:blueviolet" onclick="click()"></div>
<script>
function click(){
console.log("第一种")
}
</script>
</body>
第二种
<body>
<div style="400px;height:400px;background:blueviolet"></div>
<script>
let div = document.querySelectorAll("div")[0];
div.onclick = function(){
console.log("第二种")
}
</script>
</body>
第一种和第二种方法同一对象只能添加一个事件
第三种
<body>
<div style="400px;height:400px;background:blueviolet"></div>
<script>
let div = document.querySelectorAll("div")[0];
div.attachEvent("onclick",function(){//此处要带"on"
console.log("第三种")
})
</script>
</body>
仅IE8及以下版本支持
此种方法可以为同一对象添加多个事件
第四种
<body>
<div style="400px;height:400px;background:blueviolet"></div>
<script>
let div = document.querySelectorAll("div")[0];
div.addEventListener("click",function(){//注意事件名称不带on
console.log("第四种")
})
</script>
</body>
注意此种方法不支持IE8及其以下版本
此种方法可以为同一对象添加多个事件
反正我就爱用第四种，你们爱咋滴咋滴