js自定义事件和派发事件,监听事件和移除已监听的事件

转载自https://www.jb51.net/article/127776.htm

1.自定义事件

elem可用document来进行全局监听
//1、创建事件
var clickElem = new Event("clickElem");
//2、注册事件监听器
elem.addEventListener("clickElem",function(e){
  //干点事
})
//3、触发事件
elem.dispatchEvent(clickElem);

1.1携带信息

除此之外，事件还能传递自定义信息：

var event = new CustomEvent('myEvent', { 'dataName': dataContent });
document.dispatchEvent(event);
（注意：传递自定义信息需要使用CustomEvent，而不是Event）
然后在监听函数里取出：

document.addEventListener("myEvent",function(e){
  console.log(e.dataName);
})
这个功能非常有用！

例子1：通知多个对象

要实现 元素A点击之后，元素B显示鼠标的位置，元素C显示提示，可以这样写：
文件：a.js

import b from "./b"
import c from "./c"
var a = document.getElementById("a");
a.addEventListener("click",function(e){
  var clickA = new Event("clickA");
  document.dispatchEvent(clickA);
});
注意：import进来的变量虽然不使用，但是一定不能省略


文件b.js:

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){
  b.innerHTML = "(128,345)";
})
文件c.js:

var c = document.getElementById("c");
document.addEventListener("clickA",function(e){
  c.innerHTML = "你点了A";
})
这样写，三个模块之间完全不用关心对象，也不知道对方存在，耦合度非常的低，完全可以独立编写，不会互相影响。这其实就是一个观察者模式的实现

移除已监听的事件
转载自https://www.cnblogs.com/xiaoyucoding/p/8516407.html

var Test = function() {
  this.element = document.body;
  this.handler = function() {
    console.log(this);
  };
  this.element.addEventListener('click', this.handler.bind(this), false);
  this.destroy = function() {
    this.element.removeEventListener('click', this.handler, false);
  };
};
var test = new Test();

调用 test.destroy() 后，点击依旧有效。明明按照以前看的文档说的，add 和 remove 的时候是同一个函数啊。

测试二
于是，又调整了一下代码。去掉了 add 时的 bind，再测试发现点击不响应了。
结论
经过测试，add 和 remove 事件监听回调时，既不能使用匿名函数，也不能改变指定函数的上下文。

var Test = function() {
  this.element = document.body;
  this.handler = function() {
    console.log(this);
  };
  this.element.addEventListener('click', this.handler, false);
  this.destroy = function() {
    this.element.removeEventListener('click', this.handler, false);
  };
};

类的监听和移除方法

错误移除
 class a={
	  constructor(){
	
	}
	a(){
		document.addEventListener('touchend',(e)=>{
		this.b()
		})
	}
	c(){
	//无法移除，把this挂载再window上
		document.removeEventListener('touchend',(e)=>{
		this.b()
		})
	}
	

	b(){
		console.log('haha')
	}
}

正确移除
 class a={
	  constructor(){
		window._thisa=this
	}
	a(){
		document.addEventListener('touchend',(e)=>{
		window._thisa.b()
		})
	}
	c(){
	//把this挂载再window上
		document.removeEventListener('touchend',(e)=>{
		window._thisa.b()
		})
	}
	

	b(){
		console.log('haha')
	}
}