event delegate

abstain23 · Jun 1, 2020 · 70b2b5d · 70b2b5d
1 parent 1fb24d6
commit 70b2b5d
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -6,6 +6,19 @@
   <title>Document</title>
 </head>
 <body>
-  <script src="./手写create.js"></script>
+  <div>
+    <button id="btn">click</button>
+  </div>
+  <script src="./手写一个event.js"></script>
+  <script>
+    const fn1 = () => {
+      console.log('111')
+    }
+    const fn2 = () => {
+      console.log('111')
+    }
+    document.getElementById('btn').addEventListener('click', () => {console.log(1)})
+    document.getElementById('btn').addEventListener('click', () => {console.log(1)})
+  </script>
 </body>
 </html>
diff --git a/手写一个delegate.js b/手写一个delegate.js
@@ -0,0 +1,50 @@
+!function(win, doc) {
+  class Delegator {
+    constructor(selector) {
+      this.root = doc.querySelector(selector)
+      this.events = {}
+    }
+    on(event, target, fn) {
+      if(!this.events[event]) {
+        this.events[event] = []
+      }
+      this.events[event].push({
+        target,
+        cb:fn
+      })
+      this.root.addEventListener(event, this._delegate)
+      return this
+    }
+    _delegate(e) {
+      let target = e.target || e.srcElement
+      let currentTarget = e.currentTarget
+      while(target !== currentTarget) {
+        this.eventsObj[e.type].forEach(item => {
+          //查找订阅事件者
+          if(target.matches(item.selector)){
+              //执行订阅事件者携带的函数
+              item.callback.call(target,e);
+          }
+      });
+      //往上冒泡
+      target = target.parentNode;
+      }
+    }
+  }
+}(window, document)
+
+
+function delegate(element, eventType, selector, fn) {
+  element.addEventListener(eventType, (e) => {
+    let el = e.target;
+    while (!el.matches(selector)) {
+      if (element === el) {
+        el = null;
+        break;
+      }
+      el = el.parentNode;
+    }
+    el && fn.call(el, e, el);
+  });
+  return element;
+}
diff --git a/手写一个event.js b/手写一个event.js
@@ -0,0 +1,46 @@
+class Event {
+  constructor() {
+    this._event = {}
+  }
+  on(type, cb) {
+    if(!this._event[type]) {
+      this._event[type] = []
+    }
+    if(typeof cb === 'function') {
+      // console.log(cb.name)
+      const index = this._event[type].findIndex(item => item.name && item.name === cb.name)
+      // console.log(index)
+      if(index >= 0) {
+        this._event[type].splice(index, 1)
+      }
+      this._event[type].push(cb)
+    }
+  }
+  off(type, cb) {
+    if(!this._event[type]) return
+    const index = this._event[type].findIndex(item => item.name && item.name === cb.name)
+    if(index >= 0) {
+      this._event[type].splice(index, 1)
+    }
+  }
+  emit(type, ...args) {
+    if(!this._event[type]) return
+    this._event[type].forEach(cb => {
+      cb(...args)
+    })
+  }
+}
+
+let e = new Event()
+const fn = (...data) => {
+  console.log(data)
+}
+e.on('click', fn)
+e.on('click', fn)
+e.on('click', fn)
+e.on('click', (e) => {console.log(e)})
+e.on('click', () => {console.log(2)})
+// e.off('click', fn)
+// e.off('click', () => {console.log(1)})
+console.log(e)
+e.emit('click', 1111, 11)