jQuery click()的纯JavaScript等价物?

svgewumm  于 2023-02-15  发布在  jQuery
关注(0)|答案(4)|浏览(121)

我正在开发一个捕捉鼠标点击的小应用程序,我用jQuery编写了原型,但是,由于它是一个专注于速度的小应用程序,嵌入jQuery只使用一个函数将是一个矫枉过正。
我试着从JavaScriptKit改编这个例子:

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

但我试了这个方法却不管用

document.getElementsByTagName("x").onclick

我哪里做错了?

fjnneemd

fjnneemd1#

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

lp0sw83n

lp0sw83n2#

在您的示例中,您将使用getElementsByTagName()方法,该方法将返回一个DOM元素的 array。您可以迭代该数组并将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;
}
kupeojn6

kupeojn63#

看起来您错过的不仅仅是jQuery的click函数,还错过了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在幕后所做的事情。

vvppvyoh

vvppvyoh4#

document.getElementsByTagName("x")

返回标记名为'x'的元素数组。
您必须为返回数组中的每个元素设置正确的事件。

相关问题