jQuery的点击的纯JavaScript相当于()?(pure javascript equiva

2019-06-26 12:09发布

我建立一个小的应用程序捕获鼠标点击。 我写了jQuery的原型,但由于它是一个小的应用程序侧重于速度,嵌入的jQuery只使用一个功能将是矫枉过正。

我试图从适应这个例子JavascriptKit :

document.getElementById("alphanumeric").onkeypress=function(e){  
    //blah..blah..blah..  
}

但是当我试图不工作

document.getElementsByTagName("x").onclick

我究竟做错了什么?

Answer 1:

假设你有p标签的列表,你想捕捉点击p标签:

var p = document.getElementsByTagName("p"); 
for(var i=0; i<p.length; i++){ 
 p[i].onclick = function(){ 
   alert("p is clicked and the id is " + this.id); 
 } 
}

点击这里,查看一个例子更加清晰: http://jsbin.com/onaci/



Answer 2:

在您使用的getElementsByTagName,这将返回DOM元素的数组的例子,你可以遍历数组和onclick处理程序分配给每个元素,例如:

var clickHandler = function(){
  alert('clicked!');
}

var elements = document.getElementsByTagName('div'); // All divs

for(var i = 0; i<elements.length; i++){
  elements[i].onclick = clickHandler;
}


Answer 3:

它看起来有点像你错过的不仅仅是jQuery的的点击功能更多。 你也将失去整个对象的集合jQuery的选择器引擎,链接和自动迭代。 有了多一点的努力,你可以最低限度地再现一些这些东西为好。

var myClickCapture = function (selector) {
    var method, name,iterator;
    if(selector.substr(0,1) === "#") {
       method = "getElementById";
       name = selector.substr(1);
       iterator = function(fn) { fn(document[method](name));  };
    } else {
       method = "getElementsByTagName";
       name = selector;
       iterator = function(fn) { 
          var i,c = document[method](name);
          for(i=0;i<c.length;i++){
             fn(c[i]);
       };
    };
    myClickCapture.click = function (fn){
         iterator(function(e){
            e.onclick=fn;
         })
    } 

    return myClickCapture;

}

我没有测试的代码,但在理论上,它可以让你这样的:

myClickCapture("x").click(function(e){ alert("element clicked") });

但愿这给你的东西的jQuery的种类在幕后做感。



Answer 4:

document.getElementsByTagName("x")

返回具有标记名“x”的元件的阵列。

你必须为返回数组中的每个元素的权利的事件。



文章来源: pure javascript equivalent of jquery click()?