![](/img/trans.png)
[英]Javascript - Bind a click event to multiple <options> elements
[英]Multiple elements click event in javascript - like jQuery
我有一個正在運行的函數,看起來像這樣:
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 鏈接
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直接綁定到本機元素: Fiddler 鏈接
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.