Как привязать клик к якору без рамки (JavaScript) - PullRequest
15 голосов
/ 03 июня 2010

Я знаю, что это легко сделать в jQuery или любом другом фреймворке, но это не совсем так. Как мне «правильно» связать событие click в чистом javascript? Я знаю, как сделать это встроенным (я знаю, это ужасно)

<a href="doc.html" onclick="myFunc(); return false">click here</a>

и это заставляет мой javascript выполняться для браузера с поддержкой JS, а ссылка работает нормально для тех, у кого нет javascript?

Теперь, как мне сделать то же самое не встроенным способом?

Ответы [ 7 ]

22 голосов
/ 03 июня 2010

Если вам нужно назначить только одно click событие, вы можете назначить onclick:

Если у вас есть ID:

myAnchor = document.getElementById("Anchor");
myAnchor.onclick = function() { myFunc(); return false; }

Вы также можете пройти через все якоря:

anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {   

 anchors[i].onclick = .....

}

Существует также document.getElementsByClassName для имитации селектора классов jQuery, но он поддерживается не всеми браузерами.

Если вам может потребоваться назначить несколько событий для одного элемента, используйте addEventListener, показанное @Jordan и @David Dorward.

9 голосов
/ 03 июня 2010

Основной способ - использовать document.getElementById() для поиска элемента, а затем использовать addEventListener для прослушивания события.

В вашем HTML:

<a href="doc.html" id="some-id">click here</a>

В вашем JavaScript:

function myFunc(eventObj) {
  // ...
}

var myElement = document.getElementById('some-id');
myElement.addEventListener('click', myFunc);

Или вы можете использовать анонимную функцию:

document.getElementyById('some-id').addEventListener('click', function(eventObj) {
  // ...
});
5 голосов
/ 03 июня 2010

Это хороший кросс-браузерный метод

var on = (function(){
    if ("addEventListener" in window) {
        return function(target, type, listener){
            target.addEventListener(type, listener, false);
        };
    }
    else {
        return function(object, sEvent, fpNotify){
            object.attachEvent("on" + sEvent, function(){
                fpNotify(window.event);
            });
        };
    }
}());


on(document.getElementById("myAnchor"), "click", function(){
    alert(this.href);
});
4 голосов
/ 03 июня 2010

Дайте ему идентификатор, и вы должны быть в состоянии сделать:

document.getElementById("the id").onclick = function{ ... }
4 голосов
/ 03 июня 2010

Стандартный ответ на этот вопрос находится в режиме причуд: http://www.quirksmode.org/js/events_advanced.html

0 голосов
/ 22 июля 2014

Благодаря Pekka, помните, что привязка слушателей ко всему массиву элементов с определенным классом быстро увеличивает число событий, связанных с элементами.

ускоряет использование цикла for:

for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

первое выражение цикла for будет вычисляться только один раз, поэтому, таким образом, оно не будет проходить через DOM и вычислять длину массива, кроме того, из-за того, что структура стека переходит на массивы в обратном порядке, быстрее, чемвперед.

0 голосов
/ 03 июня 2010

Вам не нужно использовать jQuery, но вы можете попробовать популярную функцию John Resig addEvent.

addevent(elem, "click",clickevent);  

function addEvent ( obj, type, fn ) {
      if ( obj.attachEvent ) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
      } else
        obj.addEventListener( type, fn, false );
    }

Есть еще что-то, что нужно «правильно» связать с тегами HTML в чистом javascript.

http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...