From ceb435509138b761270a24308a5e72587ec05be7 Mon Sep 17 00:00:00 2001 From: cindylugd <1031096430@qq.com> Date: Sat, 2 Mar 2019 15:01:00 +0800 Subject: [PATCH 1/2] commit index.js --- lib/index.js | 49 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/lib/index.js b/lib/index.js index 8d2deb0..d824a9e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,16 +1,59 @@ !function (root, doc) { class Delegator { - constructor (selector/* root选择器 */) { + constructor(selector/* root选择器 */) { // TODO + this.root = doc.querySelector(selector); + this.delegatorEventList = {}; + this.delegator = function delegator(e) { + + let en = e || window.event; + // e.target是当前执行者,e.currentTarget是事件监听者,兼容IE浏览器 + let target = en.target || en.srcElement; + // e.type是绑定的事件名称,获取相同事件名称的被委托的事件列表 + let targetEventList = this.delegatorEventList[en.type]; + // 循环判断当前节点是否是事件监听者节点,如果是则触发绑定的事件函数 + while (target !== en.currentTarget) + targetEventList.forEach(event => { + if (target.matches(event.selector)) { + event.fn.call(target, en); + } + }); { + target = target.parentNode; + } + } } - on (event/* 绑定事件 */, selector/* 触发事件节点对应选择器 */, fn/* 出发函数 */) { + on(event/* 绑定事件 */, selector/* 触发事件节点对应选择器 */, fn/* 触发函数 */) { // TODO + // 判断是否有和传入的事件名称相对应的委托事件列表, + // 如果有则把传入的选择器和函数加入到列表中,相反则初始化一个数组并把选择器和函数加入进来 + // 之所以用数组是因为一个父元素会包含各种子元素,所有的子元素事件都绑定在一个父元素上, + // 不同的子元素对应的选择器和要触发的执行函数会不一样 + if (this.delegatorEventList[event]) { + this.delegatorEventList[event].push({ + matches: selector, + fn: fn + }); + } else { + this.delegatorEventList[event] = [{ + matches: selector, + fn: fn + }]; + } + if (doc.addEventListener) { + this.root.addEventListener(event, this.delegator); + } else { + this.root.attachEvent("on" + event, this.delegator); + } + return this; } - destroy () { + destroy() { // TODO + Object.keys(this.delegatorEventList).map(eventName => { + this.root.removeEventListener(eventName, this.delegator) + }); } } From 88732729f88c02f63b094f88acf62b63bdccc444 Mon Sep 17 00:00:00 2001 From: cindylugd <1031096430@qq.com> Date: Sat, 2 Mar 2019 15:12:06 +0800 Subject: [PATCH 2/2] test --- lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index d824a9e..8f3a644 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,5 +1,5 @@ !function (root, doc) { - +//test class Delegator { constructor(selector/* root选择器 */) { // TODO