gpt4 book ai didi

javascript - javascript 中的多个元素单击事件 - 就像 jQuery

转载 作者:行者123 更新时间:2023-12-03 08:09:16 25 4
gpt4 key购买 nike

我有一个正在运行的函数,如下所示:

var $$ = function(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

// My function
var myFunction = function() {
$$( '.my-selector' ).forEach( function( element ) {
element.addEventListener('click', function(e){
console.log('Do something');
});
});
}

我希望它看起来更像 jQuery:

// My function
var myFunction = function() {
$('.my-selector').click(function(e) {
console.log('Do something');
});
}

我不知道该怎么做。有什么想法吗?

(我希望我的代码独立于框架,所以我不需要 jQuery)

最佳答案

解决方案1:使用自己的包装器:Fiddler link

var $$ = function(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
var wrapper = function(elem){
var element = elem;
this.click = function(cb){
element.forEach(function(el){
el.addEventListener('click', function(e){
cb.apply(element,[e]);
});
});
};
};

return new wrapper(Array.prototype.slice.call(elements));
}


$$("#test").click(function(e){
console.log("Do something:"+e.type);
});

解决方案2直接绑定(bind)原生元素: Fiddler link

var $$ = function(selector, context) {
context = context || document;
var elements = Array.prototype.slice.call(context.querySelectorAll(selector));
elements.click = function(cb){
elements.forEach(function(el){
el.addEventListener('click', function(e){
cb.apply(elements,[e]);
});
});
};

return elements;
}

$$("#test").click(function(e){
console.log("Do something:"+e.type);
});

关于javascript - javascript 中的多个元素单击事件 - 就像 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34218755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com