Я знаю, что это легко сделано в jQuery или любой другой платформе, но это не действительно точка. Как я иду о 'правильно' привязке события щелчка в чистом JavaScript? Я знаю, как сделать это встроенный (я знаю, что это ужасно),
<a href="doc.html" onclick="myFunc(); return false">click here</a>
и это заставляет мой JavaScript выполняться для включенного браузера JS и ссылки для поведения обычно для тех, которые не имеют JavaScript?
Теперь, как я делаю то же самое невстроенным способом?
Если вам нужно назначить только одно событие 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.
Вам не обязательно использовать 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
Основной способ - использовать 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) {
// ...
});
Это хороший кроссбраузерный метод
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);
});
Стандартный путь к этому вопросу лежит через Quirks Mode: http://www.quirksmode.org/js/events_advanced.html
Укажите ей идентификатор, и вы сможете:
document.getElementById("the id").onclick = function{ ... }