对事件做出反应
当发生相应事件时进行改变
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
<!DOCTYPE html>
<html>
<body>
<h1 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
<html>
<body>
<h1 οnclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
当点击文本后会改变文本内容。
也可以通过函数达到相同效果
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">点击文本!</h1>
</body>
</html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">点击文本!</h1>
</body>
</html>
使用 HTML DOM 来分配事件
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。