完成一个EventTarget类

2024年5月14日 122次阅读 来源: 下一个

EventTarget

EventTarget是一个由能够吸收事宜的对象完成的接口，而且能够为它们建立侦听器。

Element，document 和 window 是最常见的事宜目的，然则其他对象也能够是事宜目的，比方XMLHttpRequest，AudioNode，AudioContext 等等。

很多事宜目的（包含元素，文档和 window）还支撑经由过程 on... 属性和属性设置事宜处置惩罚顺序。

组织函数节

要领节

Mozilla chrome 代码的其他要领节

Mozilla扩大，供JS完成的事宜目的使用以 完成 on* 属性。另见 WebIDL bindings 绑定。

  • 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指的是父元素

<ul>
    <li>w</li>
    <li>m</li>
    <li>x</li>
</ul>
//子元素将事宜托付给了父元素
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上，也就是btn
btn.dispatchEvent(event);
//实行监听函数
//e
    原文作者：下一个
    原文地址: https://segmentfault.com/a/1190000018163557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞