JQuery的.on()函数的纯Javascript替代品
Pure Javascript alternative to JQuery's .on() function
我写了一个小型的纯JavaScript库来替换JQuery(保持语法与JQuery相同,但代码javascript)。 当我将事件对象传递给它时,我正在努力让 .on 函数正常工作,因为事件没有传回(以防我想防止冒泡)。
第一组代码是我的库:
(function () {
var Q = function (params) {
return new Library(params);
};
var Library = function (params) {
if (typeof params === 'string') {
var selector = document.querySelectorAll(params),
counter;
this.length = selector.length;
// Add selector to object for method chaining
for (counter = 0; counter < this.length; counter++) {
this[counter] = selector[counter];
}
} else {
this.length = 1;
this[0] = params;
}
// Return as object
return this;
};
Q.fn = Library.prototype = {
/*
Name addClass()
Description Adds a class to the objects
Input className TEXT
Language Javascript
*/
addClass: function (classNames) {
var arr = classNames.split(' '),
total = arr.length,
counter,
count;
for (counter = 0; counter < this.length; counter++) {
for (count = 0; count < total; count++) {
if (!this[counter].classList.contains(arr[count])) {
this[counter].classList.add(arr[count]);
}
}
}
// Return this to allow chained methods
return this;
},
on: function (events) {
var arr = events.split(' '),
total = arr.length,
counter,
count;
if (arguments.length === 2) {
// .on('change', function(e) { ... });
for (counter = 0; counter < this.length; counter++) {
for (count = 0; count < total; count++) {
this[counter].addEventListener(arr[count], arguments[1], false);
}
}
} else {
// .on('change', 'input', function(e) { ... });
var doc = document,
selector = arguments[1],
func = arguments[2],
counter;
for (counter = 0; counter < this.length; counter++) {
var obj = this[counter];
if (isset(obj)) {
for (count = 0; count < total; count++) {
doc.addEventListener(arr[count], function() {
if (arguments[0].target.matches(obj.tagName + ' ' + selector)) {
func.call(arguments[0].target, arguments[0]);
}
}, false);
}
}
}
}
// Return this to allow chained methods
return this;
},
};
// Assign our Q object to global window object.
if (!window.Q) {
window.Q = Q;
}
})();
当我在代码中使用以下代码时,一切正常,但返回的事件不包含更新的属性:
Q(obj).on('click', 'a', function(e) {
e.stopPropagation();
});
我很乐意分享更多信息,并提前感谢您的帮助。
如果我正确阅读代码,那是因为当您调用回调时
func.call(arguments[0].target, arguments[0]);
您不传递事件
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- jQuery $.data() 函数的香草替代品:任何原生 JavaScript 替代品
- 在javascript中是否有.unload()的替代品
- CronJob的Javascript替代品
- JQuery的.on()函数的纯Javascript替代品
- Javascript的pop()方法的PHP替代品
- onblur和onfocus帮助- Javascript函数的替代品
- javascript的替代品是什么?
- Chrome的JavaScript替代品,关于window.parent
- Scala是JavaScript的替代品
- Javascript背后的替代品
- 是JavaScript的alpha替代品
- jQuery.ajax()的Javascript替代品-面对错误
- 什么是jquery的快速、纯javascript替代品?浏览器(在jquery 1.9中删除)
- jquery load()的Javascript替代品
- 用户隐藏的Javascript替代品