js动态添加html事件，addEventListenner 和 removeEventListenner的基本使用

addEventListenner 和 removeEventListenner的基本使用

//定义回调函数，并缓存到func变量中
let func = ()=>{
	console.log('on click!!!!!!')
};
//添加事件监听
window.addEventListener('click',func,true);


//溢出事件监听
window.removeEventListener('click',func,true);

注意

1.移除监听时必须传入回调函数的引用

//如果你是这么添加监听的话将无法移除监听，
//因为两个箭头函数的引用不相同。
//总结：移除监听时必须传入回调函数的引用
window.addEventListener('click',()=>{console.log('箭头函数');},true);
window.removeEventListener('click',()=>{console.log('箭头函数');},true);

2.同一个回调函数添加多次也只会触发一次

//注意：同一个事件同一个回调添加多次也只会触发一次
window.addEventListener('click',func,true);
window.addEventListener('click',func,true);  //覆盖前面的回调函数

//可以被触发，添加了一个新的回调函数，前面的回调函数依旧会触发
window.addEventListener('click',()=>{console.log()},true); 

参数说明

• addEventListener(type,listener,option)

• removeEventListener(type,listener,option)

  • type ： 事件类型，指你要触发的是什么类型事件。如‘click’触发点击事件。
  • listener：回调函数（或叫监听函数），当点击事件触发时调用。
  • option： 可选参数
    • true 表示触发事件后。在事件的捕获阶段执行回调函数
    • false或者不填 表示在触发事件后，在事件的冒泡阶段执行回调函数

相同使用场景汇总

let func = ()=>{console.log('on click!!')};
window.addEventListener('click',func,true);
window.removeEventListener('click',func,true);
document.addEventListener('click',func,true);
document.removeEventListener('click',func,true);
document.documentElement.addEventListener('click',func,true);
document.documentElement.removeEventListener('click',func,true);
document.body.addEventListener('click',func,true);
document.body.removeEventListener('click',func,true);
document.getElementById('innerP').addEventListener('click',func,true);
document.getElementById('innerP').removeEventListener('click',func,true);

onclick

添加点击事件的回调函数，但这个回调函数发生在目标阶段。区别于前面的捕获阶段和冒泡阶段

document.getElementById('innerp').onclick=function(){};

详情参考：https://mp.weixin.qq.com/s/qOtUa-WE47egDRvUbHtMsA