JavaScript 绑定事件常用的四种方式

1. 在 html 标签上绑定

<div onclick="fn1(this,event)">第一行</div>

function fn1(el, e) {
  console.log(el); // 当前dom元素
  console.log(e); // 当前事件参数
}

2. el.addEventListener('eventName',function(){}) 绑定

const el = document.querySelector(".content");
el.addEventListener("click", function (e) {
  console.log(twoEl); // 当前dom元素
  console.log(e); // 当前事件参数
});

3. el.eventName = function(){}

const el = document.querySelector(".content");
el.onclick = function (e) {
  console.log(threeEl); // 当前dom元素
  console.log(e); // 当前事件参数
};

4. el.setAttribute("eventName", "functionName(params)");

const el = document.querySelector(".content");
el.setAttribute("onclick", "testFunc(this,event)");
function testFunc(el, e) {
  console.log(el); // 当前dom元素
  console.log(e); // 当前事件参数
}