javascript - 关于 addEventListener 和 jquery的 $.on() 绑定自定义事件问题

问题描述

问 题

如图:两种绑定方式

如图为浏览器内查看的事件绑定

目前看来 好像完全一样的绑定,但是只有jquery的绑定触发了，addEventListener 的绑定怎么也不能触发。
请大佬解惑~

解决方案

非原始事件，你在什么时候dispatch的？
使用jquery的dispatch在一个自定义事件，不会进入dom事件流程，进入的是jquery的事件流程，自然接收不到了。

eg:

var Events = {};
var nativeEvent = function(eventName) {
    return eventName === 'click';
}
var prototype = {
    on: function(eventName, handle) {
        if (nativeEvent(eventName)) {
            this.dom.addEventListener(eventName, handle);
        } else {
          Events[eventName] = {
            ctx: this,
            handle
          };
        }
        
    },
    fire: function(eventName, args) {
        var eventObject = Events[eventName];
        eventObject.handle.call(eventObject.ctx, args);
    }
};
var jquery = function(selector) {
    if( !(this instanceof jquery)) {
        return new jquery(selector);
    }
    this.dom = document.querySelector(selector);
    
};

jquery.prototype = prototype;
 
var dest = jquery('#wrapper');

dest.on('click', function(e) {console.log(e);});

dest.on('custom', function(e) {console.log(e);});

dest.fire('custom', {data: 'somedata'}); //需要主动派发，或者bind到某个native事件

这篇关于javascript - 关于 addEventListener 和 jquery的 $.on() 绑定自定义事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！