от innerHTML до dom методов, когда существует onclick

Question

У меня есть этот кусок JavaScript:

var d = document.createElement("div");
d.innerHTML = "<span onclick='myFunc(this)'>click here</span>";

Я хотел бы переписать с помощью методов dom (без innerHTML) так как то так:

var d = document.createElement("div");
var span = document.createElement("span"); 
...
d.appendChild(span); 

Что я не знаю, как это сделать, так это связать объект span так, чтобы он вызывал глобальную функцию myFunc, передавая себя (this) в качестве аргумента?

Answer 1

var d = document.createElement('div'),
    s = document.createElement('span');
    s.onclick = myFunc;

d.appendChild(s);

function myFunc(this) {
    // do something with this
}

Я опустил .createTextNode().

Answer 2

Просто установите его атрибут "onclick":

span.onclick = function() { myFunc(this); };

«Старомодные» обработчики событий, связанные с помощью атрибутов «onfoo», всегда вызываются так, что this ссылается на элемент, обрабатывающий событие. Таким образом, вы можете просто обернуть вызов вашей функции-обработчика простой анонимной функцией, чтобы вызвать ваш код и передать его this. Если вам на самом деле не нужно передавать ссылку на элемент в качестве параметра вашему обработчику, вы можете просто написать:

span.onclick = myFunc;

В этом случае вашей собственной функции будет доступно this для ссылки на затронутый элемент.

Answer 3

Вы можете сделать это, используя jQuery:

var span = $('<span/>').click(myFunc);
$('<div/>').append(span);

В качестве альтернативы, если вы хотите использовать нативный DOM, посмотрите addEventHandler и пропустите onclick - это сделает вашу жизнь лучше в долгосрочной перспективе;)