Обнаружение событий Javascript

Question

Удивительно, но я не могу найти хорошую документацию по этому вопросу, поэтому я публикую ее здесь.

Что такое необработанный javascript, эквивалентный этому:

$(elem).click(function(){
    alert(this.text());
});

Все, что я могу найти, это <elem onlick="func()" />, что не то, что я хочу, я хочу быть в состоянии сделать это только с JavaScript, не в контексте элемента.

Answer 1

Есть несколько способов прикрепить обработчик кликов без использования библиотеки. Первый - это присвоение функции свойству on[eventname] элемента:

element.onclick = function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}

Вы также можете назначить строку кода для оценки, но она не так хороша и обычно ее избегают. Другой способ - использовать стандарт w3c addEventListener:

element.addEventListener("click", function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}, false);

Это не поддерживается текущими версиями IE, для которых требуется attachEvent:

element.attachEvent("onclick", function () { 
    alert(event.srcElement.innerText); 
});

IE имеет проблемы с применением функции к элементу, вызвавшему событие, поэтому this не будет правильно указывать на этот элемент с attachEvent.

Первый метод element.onclick полезен для совместимости с x-браузером и быстрого кодирования, но для свойства можно назначить только одну функцию. Используя attachEvent и addEventListener, вы можете прикрепить столько функций, сколько захотите, и все они будут срабатывать правильно. Вы можете создать кросс-браузерный полуэквивалент, выполнив простые проверки функциональности в своем коде:

if ("addEventListener" in element)
    element.addEventListener("click", function (eventObj) { 
        alert("textContent" in this ? this.textContent : this.innerText) 
    }, false);
else
    element.attachEvent("onclick", function () { 
        alert(event.srcElement.innerText); 
    });

Answer 2

Предполагая, что elem является узлом элемента (если нет, вам нужно будет использовать селектор для использования getElementById или чего-либо еще):

elem.onclick= function() {
    var text= 'textContent' in elem? elem.textContent : elem.innerText;
    alert(text);
};

textContent - совместимый со стандартами способ получения текста из элемента; innerText это путь IE. (Есть несколько отличий, но, надеюсь, ничто не повлияет на вас.) Если вам нужно поддерживать старые / неясные браузеры, у которых нет ни того, ни другого, вам придется утомительно обходить дерево, чтобы собрать весь текст (это то, что jQuery text() делает.)

(Полагаю, это то, что вы хотите от this.text(). На самом деле это не сработает - возможно, вы имели в виду $(this).text().)

Answer 3

Вы можете сделать object.onclick = handler

var el = document.getElementById('elem');
elem.onclick = function(){ alert("Clicked!") };

Это должно сработать - сейчас я немного нервничаю с javascript!

Answer 4

Может быть, вам нужно что-то подобное:

document.getElementById('element_id').setAttribute("onclick","alert('hello world')");