Javascript 链接函数在另一个函数中不起作用

我尝试使用香草javascript创建链接函数，如果只是链接，它就可以工作，但如果在其他函数中，它就停止工作

var doc = document,
M$ = function(el) {
  var expr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
  var m = expr.exec(el);
  if(m[1]) {
    return doc.getElementById(m[1]);
  } else if(m[2]) {
    return doc.getElementsByTagName(m[2]);
  } else if(m[3]) {
    return doc.getElementsByClassName(m[3]);
  }
},
$ = function (el) {
  this.el = M$(el);

  // event function
  this.event = function(type,fn) {
    this.el.addEventListener(type,fn,false);
    return this;
  }

  // forEach function
  this.forEach = function(fn,val) {
    for(var i = this.el.length - 1; i >= 0; i--) {
      fn.call(val, i, this.el[i]);
    }
    return this;
  }

  if(this instanceof $) {
    return this.$;
  } else {
    return new $(el);
  }
};

//use
$("button").forEach(function(index, el) 
 // when i use function event, its not work
  el.event("click", function() {
    alert("hello");
  });
  // if i'm using addEventListener its work, but i want use event function
});

我的问题是，事件函数如何在forEach函数中工作？ 谢谢你的帮助

第一件事

一,

正如您定义的M$，如果您通过标记名或类名获取元素，则可以使用一个元素；如果您通过id获取元素，则可以仅使用一个元素

然后你假设你的el是一个集合

this.event = function(type,fn) {
    this.el.addEventListener(type,fn,false);
    return this;
  }

如果您尝试获取所有按钮，则可能会收到一个集合

二,

如果您试图运行发布的代码，您将收到一个意外的标识符错误，因为您错过了{after

forEach（函数（index，el）

）

三,

如果您将{放在那里，您将收到一个

el。事件

不是函数错误，因为您在

el

上没有事件函数，但在

$（el）

上有事件函数

四,

如果您将代码更改为：

$("button").forEach(function(index, el)
{
 // when i use function event, its not work
  $(el).event("click", function() {
    alert("hello");
  });
  // if i'm using addEventListener its work, but i want use event function
});

您将收到一个错误，因为您没有处理多个元素。请参阅1个问题。

查看此问题

var doc = document,
M$ = function(el) {
  var expr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
  var m = expr.exec(el);
  if(m[1]) {
    return Array.apply([],[doc.getElementById(m[1])]);
  } else if(m[2]) {
    return Array.apply([],doc.getElementsByTagName(m[2]));
  } else if(m[3]) {
    return Array.apply([],doc.getElementsByClassName(m[3]));
  }
},
$ = function (el) {
  if(! (this instanceof $)) {
    return new $(el);
  }
  this.els = M$(el);

  // event function
  this.event = function(type,fn) {
    this.forEach(function(index, el){
      el.addEventListener(type,fn,false);
    });
    return this;
  }

  // forEach function
  this.forEach = function(fn,val) {
    for(var i = this.els.length - 1; i >= 0; i--) {
      fn.call(val, i, this.els[i]);
    }
    return this;
  }
  return this;
};

//use
$("button").event("click", function() {
    alert("hello");
});

• 这里使用

  M$函数

  返回一个数组以保持一致
• 因此，

  $（）.event

  函数被更改为遍历

  this.els

  中的所有元素
• 因此，您可以简单地调用

  $（“按钮”）.event

  函数而不是

  $（“按钮”）.forEach

  函数来注册事件侦听器

参考：

---

这一个有效。但是，这是你想要的吗？我不确定。

首先，你的代码中

$（“按钮”）后面的括号有问题。forEach（函数（索引，el）

你缺少

{

然后问题是，当您尝试调用元素（按钮）上的click callback时，事实上，由于

this

问题，元素（按钮）没有

事件（）

属性。它们甚至没有自己定义，因为

this.el=M$（el）；

超出了

forEach（）

。我对您的代码进行了一些调整和清理，请查看。我想现在它可以满足您的要求：

var doc=文档，
M$=函数（el）{
变量表达式=/^（？：#（[\w-]+）|（\w+）|\（[\w-]+）$/；
var m=执行器（el）；
if（m[1]）退货单getElementById（m[1]）；else if（m[2]）退货单getElementsByTagName（m[2]）；else if（m[3]）退货单getElementsByClassName（m[3]）；
}, 
$=函数（el）{
this.forEach=函数（fn，val）{
//将this.el和this.el[i].事件分配到forEach（）内部，而不是外部
这1.el=百万美元（el）；
对于（var i=this.el.length-1；i>=0；i--）{
this.el[i].event=function（type，fn）{this.addEventListener（type，fn，false）；}；
fn.call（val，i，this.el[i]）；
}
}
归还这个；
};
$（“按钮”）.forEach（函数（索引，el）{
el.event（“click”，function（）{alert（“hello，”+this.textContent）；}）；
})；

btn1
btn2

感谢它更好的解决方案。耶！我想创建像jquery一样的函数链接，但我不想用巨大的库来完成小任务，我喜欢简单的javascript。我不擅长javascript，我仍然对链接函数D感到困惑。谢谢你的帮助，它非常有用。

var doc = document,
M$ = function(el) {
  var expr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
  var m = expr.exec(el);
  if(m[1]) {
    return Array.apply([],[doc.getElementById(m[1])]);
  } else if(m[2]) {
    return Array.apply([],doc.getElementsByTagName(m[2]));
  } else if(m[3]) {
    return Array.apply([],doc.getElementsByClassName(m[3]));
  }
},
$ = function (el) {
  if(! (this instanceof $)) {
    return new $(el);
  }
  this.els = M$(el);

  // event function
  this.event = function(type,fn) {
    this.forEach(function(index, el){
      el.addEventListener(type,fn,false);
    });
    return this;
  }

  // forEach function
  this.forEach = function(fn,val) {
    for(var i = this.els.length - 1; i >= 0; i--) {
      fn.call(val, i, this.els[i]);
    }
    return this;
  }
  return this;
};

//use
$("button").event("click", function() {
    alert("hello");
});