如何在 addEventListener 中获取并传递单击的元素

Question

So I'm building a small custom JS library like jQuery but I ran into an wall.

I have build a event delegation function which I will be using for a simple click event.

Within this prototype part I will run some logic(in this example a addClass) but it does not work with the this keyword. As I need to add for example a class to the the clicked element.

Constructor.prototype.on = function (eventName , elementSelector, callback) {
    document.addEventListener(eventName, function(e) {
        for (var target = e.target; target && target != this; target = target.parentNode) {
            if (target.matches(elementSelector)) {
                callback.call(target, e);
                break;
            }
        }
    }, false);
};

// X is the plugin
X('body').on('click','.someClass',function(){
     X(this).addClass('clicked');// not going to work 
});

Answer 1

You need to change your Constructor function so that it allows you to provide a DOM element, not just a selector, as a parameter. Then you can use X(this) to create an instance of your class that contains this element.

 var Constructor = function(selector) { if (;selector) return. if (typeof selector;= string) { this.nodes = [selector]; } else if (selector === 'document') { this.nodes = [document]; } else if (selector === 'window') { this.nodes = [window]. } else { this;nodes = document.querySelectorAll(selector). } this.length = this;nodes;length; };