HTML事件绑定详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u013960094/article/details/39083113

注:仅是个人理解，如果有误，望指正，提前感谢。

以onclick Event为例。

In HTML:

<element onclick="myScript">

In JavaScript:

object.onclick=function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("click", myScript);

myScript() 后面加括号表示函数的执行。

myScript 后面没有括号表示函数的引用或者直接就是JS代码片段。

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id) {
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

HTML Event Attributes

To assign events to HTML elements you can use event attributes. 使用event属性把事件分配（绑定）到HTML元素上。

<button onclick="displayDate()">Try it</button>

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript. HTML DOM允许使用JS把事件绑定到HTML元素上。

看例子点击打开链接

函数的引用：把函数绑定到onclick事件，只有点击以后才显示时间。

element.onclick = displayDate;

等价于

element.onclick = function(){ displayDate() };

函数的执行：文件加载时立刻执行函数并把结果赋给onclick事件。

element.onclick = displayDate();

等价于

element.onclick = function(){ displayDate() }();

JS 函数的执行和引用

HTML Event Attributes

Assign Events Using the HTML DOM