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')
	}
}

你可能感兴趣的:(日常积累)