addEventListener 和 on的区别

Question

f1.on('done', f2);

function f1() {
  setTimeout(function () {
    // f1的任务代码
    f1.trigger('done');
  }, 1000);
}

function f1(){
  setTimeout(function(){
    // 执行代码
    done()
  },1000)
}

f1.addEventListener('done', f2)

function f2(){
  console.log('执行函数f2')
}

如上代码，使用jq监听直接使用on属性，但是一般现在都不会再使用jq来编写js脚本，想使用addEventListener来实现，但是实现不了，是因为addEventListener只能监听Dom元素吗？

Answer 1

const listenAble = new EventTarget();
listenAble.on = listenAble.addEventListener;
listenAble.trigger = function(eventType, ...args){
    const event = new CustomEvent(eventType, { detail: args });
    this.dispatchEvent(event);
    return this;
}

// 测试
listenAble.on('test', e => console.log('触发了事件：', e));
listenAble.trigger('test');

相关知识参见 MDN 文档：EventTarget。

Answer 2

你确定 jquery 有这种东西？

还是这种？

感觉是这种吧

其实就是一个发布订阅的东西吧。基于发布订阅或者promise都可以模拟

Answer 3

这里用js的话使用promise是比较好的

function f1(){
  return new Promise((res,rej)=>{
    setTimeout(function(){
        // 执行代码
        res('我是done')
      },1000)
  })
}
f1().then(res=>{
    console.log('res: ', res);
    f2()

})

function f2(){
  console.log('执行函数f2')
}

示例代码

---

addEventListener

支持的事件

添加一个简单的监听
下面这个例子用来展示如何使用 addEventListener() 监听鼠标点击一个元素。

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

// 改变t2的函数
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 为table添加事件监听
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

在上个例子中，modifyText() 是一个 click 事件的监听器，通过使用addEventListenter()注册到table对象上。在表格中任何位置单击都会触发事件并执行modifyText()。