jQuery click() 的纯 JavaScript 对应方式是什么？

Question

我正在构建一个捕获鼠标点击的小应用程序。我使用 jQuery 编写了原型，但由于这是一个专注于速度的小应用程序，为了使用一个函数而嵌入 jQuery 将会是不必要的过度。

我试图改编来自JavaScriptKit的示例：

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

但是当我尝试了这个方法时，它没有起作用：

document.getElementsByTagName("x").onclick

我做错了什么？

- hoball

Answer 1

假设你有一组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/

- DLS

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;
}

- Christian C. Salvadó

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 在幕后做的事情。

- Breton

---

感谢您的建议。我会将其保存下来，以备将来开发之用。 - hoball

Answer 4

document.getElementsByTagName("x")

返回一个由标签名为“x”的元素组成的数组。

您必须为返回的每个元素编写事件。

- rahul