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 属性。 请解释。

Answer 1

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!');
}

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