模仿jQuery“on”在纯JavaScript中使用选择器 [英] Emulate jQuery "on" with selector in pure javascript

问题描述

我会在纯javascript中模仿jQuery .on（事件，选择器）的主要功能，数据） 方法。

例如

  $（document）.on（'click'，'。button'，function（）{
 console.log（jquery onclick）; 
}）; 
  

我认为这样就足够了

  document.addEventListener（'click'，function（e）{
 if（e.target.className =='button2'）{
 console.log （它有效）; 
} 
}）; 
  

但是当我有这个html结构时：

 < button class =button2> Hello< span> World< / span>< / button> 
  

在 span <上触发click事件时，我的脚本不起作用/ code>元素，因为 e.target 是 span 。 （我忽略了这个问题，具有多个类和交叉浏览器兼容性的元素的复杂性）

jQuery的源代码不易阅读，我不明白它是如何工作的（因为第一段代码，在jQuery中） ，使用我的html结构）。

我需要这个方法，因为我的html是动态的，并且多次创建，删除和重新创建具有此类的按钮。我不想每次都添加监听器。

如果可能的话，我会避免包含jquery库。

<那么，我可以这样做吗？

这里的 jsFiddle 用于测试。

解决方案

这实际上非常简单。你走在正确的轨道上，但它并不存在。

这是我使用的功能：

  window.addEvent = function（elem，type，callback）{
 var evt = function（e）{
e = e || window.event; 
返回callback.call（elem，e）; 
}，cb = function（e）{return evt（e）;}; 
 if（elem.addEventListener）{
 elem.addEventListener（type，cb，false）; 
} 
 else if（elem.attachEvent）{
 elem.attachEvent（on+ type，cb）; 
} 
返回elem; 
}; 
 window.findParent = function（child，filter，root）{
 do {
 if（filter（child））return child; 
 if（root&& child == root）返回false; 
} while（child = child.parentNode）; 
返回false; 
}; 
 window.hasClass = function（elem，cls）{
 if（！（elem中的'className'））return; 
 return !! elem.className.match（new RegExp（\\b+ cls +\\ b））; 
}; 
  

window.findParent 是整个事情，正如你所看到的那样，当我告诉你如何在听众上附上你想要的时：

  window.addEvent（document.body，click，function（e）{
 var s = window.findParent（e.srcElement || e.target，function（elm）{
返回window.hasClass（elm，button）; 
}，this）; 
 if（s）{
 console.log（It works！）; 
} 
}）; 
  




I would emulate in pure javascript the main functionality of jQuery .on( events , selector , data) method.

For example

$(document).on('click','.button',function() {
   console.log("jquery onclick"); 
});

I thought it was enough make something like this

document.addEventListener('click',function(e) {
    if(e.target.className == 'button2') {
         console.log("It works");   
    }
});

However when I have this html structure:

<button class="button2">Hello <span>World</span></button>

my script doesn't works when the click event is triggered on span element, because e.target is span. (I ignore for this question the complexity of elements with multiple class, and crossbrowsers compatibility)

The source of jQuery is not simple to read and I don't understand how it works (because the first piece of code, in jQuery, works with my html structure).

I need this method because my html is dynamic, and buttons with this class are created, deleted and re-created many times. I don't want add listeners every times.

I would avoid, if possible, to include jquery library.

So, I can do this?

Here the jsFiddle for testing.

解决方案

This is actually surprisingly simple. You're on the right track, but it's not quite there.

Here's the functions I use:

window.addEvent = function(elem,type,callback) {
    var evt = function(e) {
        e = e || window.event;
        return callback.call(elem,e);
    }, cb = function(e) {return evt(e);};
    if( elem.addEventListener) {
        elem.addEventListener(type,cb,false);
    }
    else if( elem.attachEvent) {
        elem.attachEvent("on"+type,cb);
    }
    return elem;
};
window.findParent = function(child,filter,root) {
    do {
        if( filter(child)) return child;
        if( root && child == root) return false;
    } while(child = child.parentNode);
    return false;
};
window.hasClass = function(elem,cls) {
    if( !('className' in elem)) return;
    return !!elem.className.match(new RegExp("\\b"+cls+"\\b"));
};

The window.findParent is central to the whole thing, as you can see when I show you how to attach your desired on listener:

window.addEvent(document.body,"click",function(e) {
    var s = window.findParent(e.srcElement || e.target,function(elm) {
        return window.hasClass(elm,"button");
    },this);
    if( s) {
        console.log("It works!");
    }
});

这篇关于模仿jQuery“on”在纯JavaScript中使用选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！