<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
-
调用函数
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
-
使用 HTML DOM 来分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
JavaScript HTML DOM EventListener
document.getElementById("myBtn").addEventListener("click", displayDate);
-
addEventListener() 方法用于向指定元素添加事件句柄。
-
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
-
你可以向一个元素添加多个事件句柄。
-
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
-
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
-
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
-
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
-
你可以使用 removeEventListener() 方法来移除事件的监听。
向 Window 对象添加事件句柄
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
事件冒泡或事件捕获？
-
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
-
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型,默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
element.removeEventListener("mousemove", myFunction);