Как я связываю щелчок с привязкой без платформы (JavaScript)

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

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

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

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

16
задан Stomped 3 June 2010 в 13:03
поделиться

6 ответов

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

Если у вас есть идентификатор:

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.

23
ответ дан 30 November 2019 в 15:56
поделиться

Вам не обязательно использовать jQuery, но вы можете попробовать популярную функцию 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

0
ответ дан 30 November 2019 в 15:56
поделиться

Основной способ - использовать 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) {
  // ...
});
9
ответ дан 30 November 2019 в 15:56
поделиться

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

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);
});
6
ответ дан 30 November 2019 в 15:56
поделиться

Стандартный путь к этому вопросу лежит через Quirks Mode: http://www.quirksmode.org/js/events_advanced.html

4
ответ дан 30 November 2019 в 15:56
поделиться

Укажите ей идентификатор, и вы сможете:

document.getElementById("the id").onclick = function{ ... }
4
ответ дан 30 November 2019 в 15:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: