14

我正在构建一个捕获鼠标点击的小应用程序。我在 jquery 中编写了原型，但由于它是一个专注于速度的小型应用程序，嵌入 jquery 以仅使用一个功能将是一种矫枉过正。

我试图从JavascriptKit改编这个例子： 

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

但是当我尝试时它没有用 

document.getElementsByTagName("x").onclick

我究竟做错了什么？

4

4 回答 4

11

假设您有一个 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/

于 2009-07-22T04:37:32.193 回答
10

在您的示例中，您使用的是 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;
}
于 2009-07-22T04:34:53.073 回答
2

它看起来有点像你错过的不仅仅是 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 在幕后所做的各种事情。

于 2009-07-22T05:14:46.473 回答
0 
document.getElementsByTagName("x")

返回具有标记名“x”的元素数组。

您必须为返回的数组中的每个元素正确事件。

于 2009-07-22T04:34:06.150 回答