博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现一个EventTarget类
阅读量:5983 次
发布时间:2019-06-20

本文共 3376 字,大约阅读时间需要 11 分钟。

EventTarget

EventTarget是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。

, 和 是最常见的事件目标,但是其他对象也可以是事件目标,比如,, 等等。

许多事件目标(包括元素,文档和 window)还支持通过 on... 属性和属性设置。

构造函数

  • 创建一个新的 EventTarget 对象实例。

方法

  • 在EventTarget上注册特定事件类型的事件处理程序。

  • EventTarget中删除事件侦听器。

  • 将事件分派到此EventTarget。

Mozilla chrome 代码的其他方法

Mozilla扩展,供JS实现的事件目标使用以 实现 on* 属性。另见 绑定。

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)

示例

EventTarget 的简单实现

function EventTarget() {    this.listeners = {};}Object.assign(EventTarget.prototype, {    // listeners: null,    // prefix:"on",    addEventListener: function (type, callback) {        if (!(type in this.listeners)) {            this.listeners[type] = [];        }        this.listeners[type].push(callback);    },    removeEventListener: function (type, callback) {        if (type in this.listeners) {            let stack = this.listeners[type];            let index = stack.indexOf(callback);            console.log(index);            //可能会添加多个            while (index !== -1) {                stack.splice(index, 1);                index = stack.indexOf(callback);            }        }    },    dispatchEvent: function (event) {        if (event.type in this.listeners) {            let stack = this.listeners[event.type];            event.target = this;            stack.forEach(callback => {                callback.call(this,event);            })        }    }});let target = new EventTarget();let remove = (e) => {console.log(e)};target.addEventListener("test",remove);target.addEventListener("test",remove);target.addEventListener("test",(e) => {console.log(e)});target.removeEventListener("test",remove);target.dispatchEvent({type:"test"});

当单击这个例子中的按钮时, this 和 currentTarget 都等于 document.body,因为事件处理程 序是注册到这个元素上的。然而, target 元素却等于按钮元素,因为它是 click 事件真正的目标。由 于按钮上并没有注册事件处理程序,结果 click 事件就冒泡到了 document.body,在那里事件才得到 了处理。

document.body.onclick = function(event){    alert(event.currentTarget === document.body); //true    alert(this === document.body); //true    alert(event.target === document.getElementById("myBtn")); //true};

所有问事件的target和currentTarget区别的问题,都是在变相的问事件委托。

因为子元素将事件委托到父级的时候,event的target指向的还是子元素,而currentTarget指的是父元素

  • w
  • m
  • x
//子元素将事件委托给了父元素document.querySelector('ul').addEventListener('click',(e) => { let text = e.target.innerText || e.target.textContent; swicth(text){ case 'w':{ console.info('this first li'); break; } case 'm':{ console.info('this second li'); break; } case 'x':{ console.info('this third li'); break; } default:{ new Error('No such Element') } }},false)

事件模拟

事件创建

参数事件类型字符串UIEvents

document.createEvent(EventTypeString)

  • UIEvents:一般化的 UI 事件。 鼠标事件和键盘事件都继承自 UI 事件。 DOM3 级中是 UIEvent;
  • MouseEvents:一般化的鼠标事件。 DOM3 级中是 MouseEvent;
  • MutationEvents:一般化的 DOM 变动事件。 DOM3 级中是 MutationEvent;
  • HTMLEvents:一般化的 HTML 事件。没有对应的 DOM3 级事件(HTML 事件被分散到其他类 别中);
  • KeyboardEvents :DOM3级中添加
var btn = document.getElementById("myBtn");//创建事件对象var event = document.createEvent("MouseEvents");//初始化事件对象event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);//添加事件监听btn.addEventListener("click",e => console.log(e))//触发事件dispatch中动态将this绑定到event.target上,也就是btnbtn.dispatchEvent(event);//执行监听函数//e

转载地址:http://rorox.baihongyu.com/

你可能感兴趣的文章
[LeetCode] Find Bottom Left Tree Value
查看>>
【leetcode】44. Wildcard Matching 通配符匹配
查看>>
【Leetcode】6. ZigZag Conversion
查看>>
[笔记]effective backprop
查看>>
webpack 使用优化(一)
查看>>
分片上传与断点续传解决方案
查看>>
Docker和rkt快别争了,k8s才是容器生态的中心
查看>>
服务器时区问题
查看>>
《JavaScript 闯关记》之变量和数据类型
查看>>
Microsoft Office Communications Server 2007 R2 安装排错一例
查看>>
Powershell 修改Office365和AD账户
查看>>
Zabbix 神器——自动发现
查看>>
RHCE 学习笔记(27) grub 和开机排错
查看>>
java Maxnumber
查看>>
去掉android的屏幕上的title bar
查看>>
黄金分割的金苹果——浅谈apple设计中的黄金分割
查看>>
4.IT-解决方案-4-Cluster-Win2K3
查看>>
postfix运行环境配置文件汇总
查看>>
谈谈多线程编程
查看>>
Exchange 2003 升级 2010地址列表升级
查看>>