javascript thuần túy tương đương với cú nhấp chuột jquery()?

Question

Tôi đang xây dựng một ứng dụng nhỏ có tính năng nhấp chuột. Tôi đã viết các mẫu thử nghiệm trong jquery nhưng, vì nó là một ứng dụng nhỏ tập trung vào tốc độ, nhúng jquery để sử dụng chỉ là một chức năng sẽ là một overkill.

Tôi cố gắng để thích nghi với ví dụ này từ JavascriptKit:

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

nhưng nó không hoạt động khi tôi cố gắng

document.getElementsByTagName("x").onclick 

Tôi đang làm gì sai?

Answer 1

Giả sử bạn có một danh sách p thẻ bạn muốn nắm bắt được nhấp chuột cho p tag:

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

Check-out một ví dụ ở đây cho rõ ràng hơn: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

trả về một mảng các phần tử có tên thẻ 'x'.

Bạn phải đúng sự kiện cho từng phần tử trong mảng được trả về.

Answer 3

Trong ví dụ của bạn, bạn đang sử dụng getElementsByTagName, mà trả về cho bạn một loạt các yếu tố DOM, bạn có thể lặp mảng và gán handler onclick cho mỗi yếu tố, ví dụ:

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 4

có vẻ giống như bạn bỏ lỡ nhiều hơn là chức năng nhấp chuột của jQuery. Bạn cũng bỏ lỡ công cụ chọn của jquery, chuỗi và lặp lại tự động trên các bộ sưu tập các đối tượng. Với nỗ lực nhiều hơn một chút bạn có thể tái tạo tối thiểu một số trong những điều đó là tốt.

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; 

} 

tôi đã không kiểm tra mã, nhưng về mặt lý thuyết, nó giúp bạn một cái gì đó như thế này:

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

Hy vọng rằng điều này sẽ cho bạn một cảm giác của các loại vật jquery đang làm theo bao gồm .