чистый javascript-эквивалент jquery click ()? - PullRequest
Новая
       19

чистый javascript-эквивалент jquery click ()?

13 голосов
/ 22 июля 2009

Я создаю небольшое приложение, которое фиксирует щелчки мышью. Я написал прототип в jquery, но, поскольку это небольшое приложение, ориентированное на скорость, внедрение jquery для использования только одной функции было бы излишним.

Я пытался адаптировать этот пример из JavascriptKit : 

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

но это не сработало, когда я попытался 

document.getElementsByTagName("x").onclick

Что я делаю не так?

Ответы [ 4 ]

9 голосов
/ 22 июля 2009

Скажем, у вас есть список тегов 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/

8 голосов
/ 22 июля 2009

В вашем примере вы используете 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;
}
1 голос
/ 22 июля 2009

это выглядит как будто вы упускаете больше, чем просто функция щелчка в 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 делает под прикрытием.

0 голосов
/ 22 июля 2009 
document.getElementsByTagName("x")

возвращает массив элементов, имеющих тэг 'x'.

Вы должны исправить событие для каждого элемента в возвращенном массиве.

...