onclick和addEventListener的区别

let btn = document.getElementById(‘testButton’);

btn.onclick = () => {
  console.log('第一次调用onclick');
};

btn.onclick = () => {
  console.log('第二次调用onclick');
};
//输出：第二次调用onclick

// btn.onclick = null; //取消onclick

btn.addEventListener('click', () => {
  console.log('第一次调用addEventListener');
});

btn.addEventListener('click', test);
//输出：第一次调用addEventListener 第二次调用addEventListener

function test () {
  console.log('第二次调用addEventListener');
}
// btn.removeEventListener('click', test); //取消addEventListener

//区别：
//1.onclick属于内联事件，内联事件一个明显的不足：由于内联事件是作为元素属性保存起来的，这些属性可以被覆盖，所以如果为同一
// 个事件绑定了多个处理程序，那么最后一个处理程序会覆盖之前的程序；
// addEventListener() 可以解决一个对象允许同时绑定多个相同事件的问题。而且，第三个参数可以设置冒泡和捕获，true 表示捕获，
//  false 表示冒泡，但是addEventListener不兼容IE 8 及更低版本浏览器
//2.解析过程不同
// 用 addEventListener() 和 attachEvent() 是通过 DOM 接口去绑定事件。
// 一个 html 文档的解析是有顺序的，先解析标签项，再解析 DOM 项，element.onlick 事实上相当于写在标签页上，通过标签的
// onclick 属性输入到文档，然后由文档解析成事件的。而后者，要在文档解析完成以后，通过文档的 dom 接口去绑定的事件，虽
// 然结果是一样的，都是 click 事件，但是过程是不同的。
//3.取消事件不同:
//  onclick使用btn.onclick = null
//  通过 addEventListener() 添加的事件处理程序只能通过 removeEventListener() 来移除，并且移除时传入的参数与添加处理程序
//  时使用的参数相同。通过 addEventListener() 添加的匿名函数将无法移除。

//扩展：兼容所有浏览器的addEventListener
function addEvent(el, type, func) {
  return el.attachEvent ? el.attachEvent('on' + type, func) : el.addEventListener(type, func);
}

addEvent(btn, 'click', () => {
  console.log('调用addEvent');  //调用addEvent
});