![](/img/trans.png)
[英]jQuery attribute “[something*=something]” selector in pure JavaScript
[英]Emulate jQuery “on” with selector in pure Javascript
我会在纯 Javascript 中模拟 jQuery .on( events , selector , data)
方法的主要功能。
例如
$(document).on('click','.button',function() {
console.log("jquery onclick");
});
我认为做这样的事情就足够了
document.addEventListener('click',function(e) {
if(e.target.className == 'button2') {
console.log("It works");
}
});
但是,当我有这个 html 结构时:
<button class="button2">Hello <span>World</span></button>
当在span
元素上触发 click 事件时,我的脚本不起作用,因为e.target
是span
。 (对于这个问题,我忽略了具有多个类的元素的复杂性以及跨浏览器兼容性)
jQuery的 源代码读起来并不简单,我也不明白它是如何工作的(因为 jQuery 中的第一段代码适用于我的 html 结构)。
我需要这个方法,因为我的 html 是动态的,并且多次创建、删除和重新创建具有此类的按钮。 我不想每次都添加听众。
如果可能,我会避免包含 jquery 库。
那么,我能做到吗?
这里是用于测试的jsFiddle 。
2017 年更新: 当前的 DOM 标准(如closest
意味着现在更容易了。
const addEventForChild = function(parent, eventName, childSelector, cb){
parent.addEventListener(eventName, function(event){
const clickedElement = event.target,
matchingChild = clickedElement.closest(childSelector)
if (matchingChild) cb(matchingChild)
})
};
仅使用它:
addEventForChild(parent, 'click', '.child', function(childElement){
console.log('Woo click!', childElement)
})
这是一个jsfiddle
这实际上非常简单。 你在正确的轨道上,但它并不完全在那里。
这是我使用的功能:
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"));
};
window.findParent
是整个事情的核心,当我向您展示如何将您想要的附加on
侦听器时,您可以看到:
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!");
}
});
简单而简短的代码:
function onEvt(type, callback) {
if (document.attachEvent) {
document.attachEvent("on" + type, function (e) {
callback(e.target);
});
} else {
document.addEventListener(type, function (e) {
callback(e.target);
}, false);
}
}
像这样调用函数:
onEvt('click', function(elem){ // click, mouseover etc...
// for class
if(elem.classList.contains('classname')){
// do stuff
}
// for attribute
if(elem.hasAttribute('target')){
// do stuff
}
});
您可以通过链接使用 github 上的 Marchy8 函数或通过执行以下操作对其进行扩展。
首先创建 $() 选择器函数:
function $(selector) { return selector; } HTMLElement = typeof (HTMLElement) != "undefined" ? HTMLElement : Element; String.prototype.on = function(type, callback){ var selector = this; document.body.addEventListener(type, function (event) { if (event.target.matches(selector)) { callback.call(event.target); } }); } $(".test").on("click", function(e) { console.log(this.innerHTML); this.style.color = "red"; });
<div class="test">Click Here</div> <div class="test">Click Here-1</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.