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

只需设置其“onclick”属性：

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

始终调用通过“onfoo”属性绑定的“老式”事件处理程序，以便this引用处理事件的元素。因此，您可以使用一个简单的匿名函数来调用处理函数，以调用代码并将其传递给this。如果您实际上不需要将元素引用作为参数传递给处理程序，则只需编写：

span.onclick = myFunc;

在这种情况下，您自己的函数将this可用于引用受影响的元素。

Answer 2

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

d.appendChild(s);

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

我省略了.createTextNode()。

Answer 3

你可以使用jQuery这样做：

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

或者，如果您希望使用原生DOM，请查看addEventHandler并跳过onclick - 从长远来看，它会让您的生活更美好;）

当onclick存在时，从innerHTML到dom方法

3 个答案: