html - HTML事件和javascript事件的区别

Question

我们可以通过多种方式在 HTML 元素上附加事件。第一种方式是：HTML属性

<div id="foo" onclick="print2()> My event is attached as HTML attribute</div>

第二种方法是使用一些库（比如 jQuery）

<div id="bar"> My event is attached using jQuery </div>
<script>
    $("#bar").click(function() {
        alert("Hi this is Bar");
    }
</script>

我之前认为 jQuery 可能会在内部将事件转换为相应的 HTML 属性，但这并没有发生。检查这个http://jsfiddle.net/blunderboy/wp4RU/3/

我正在记录 foo 和 bar 的所有属性，并且看到 bar 没有 onclick 属性。请解释。

score 4 · Accepted Answer

没有什么叫做 HTML 事件！您描述的两种类型的事件是内联事件和不显眼的事件，它们都是javascript事件。

当您在元素本身上声明 javascript 代码时，它就变成了内联事件。您有一些常见事件（作为 HTML 元素的属性），例如onclick、onkeydown、onkeypress、onkeyup，并且所有事件都以on. 一个这样的例子是：

<a href="#" onclick="alert('You clicked me!')">Click Me!</a>

当事件被触发时，我们需要分配一些要执行的东西。符号总是在 JavaScript 中用于将=右侧的值分配给左侧的方法或属性。

窗口不是我们可以附加事件的唯一对象。我们可以将事件附加到网页中的任何对象，前提是我们有一种唯一标识该对象的方法。识别对象的一种方法是给它一个 ID 并通过引用它document.getElementById("id_of_the_element")。

让我们举同样的例子。

<a href="#" id="clickme">Click Me!</a>

而不是onclick属性，我ID在同一个地方有一个唯一标识 HTML 元素的<a>。现在我可以通过这种方式在 javascript 中获取 ID：

document.getElementById('clickme');

为此，我可以附加一个事件处理程序，它与我们使用属性的方式没有太大区别。它只是没有on在前面。在我们之前的示例中，我们使用了onclick，但现在我们将使用click。

document.getElementById('clickme').click = functionName;

这里，functionName指的是任何 javascript 的函数名，或匿名函数。因此，对于警报，如果我们创建一个名为的函数alertme()，我们可以这样定义：

function alertme()
{
    alert('You clicked me!');
}

现在可以通过这种方式将函数附加到元素：

document.getElementById('clickme').click = alertme;

还是比较懒，可以用匿名函数的方式来做，没有名字：

document.getElementById('clickme').click = function () {
    alert('You clicked me!');
}

希望你明白。:) 让我知道进一步澄清。

1 回答 1