上一节:
下一节:

  JavaScript HTML DOM 事件

  • 对事件做出反应

    可以在事件发生时执行JavaScript，例如当用户单击HTML元素时。要在用户单击元素时执行代码，请将JavaScript代码添加到HTML事件属性： 
    onclick=JavaScript
    HTML事件的示例：
    • 当用户单击鼠标时
    • 加载网页时
    • 加载图像时
    • 当鼠标移过元素时
    • 输入字段更改时
    • 提交HTML表单时
    • 当用户敲击一个键时
    在此示例中，<h1>当用户单击它时，元素的内容会发生更改： 
    <!DOCTYPE html>
<html>
<body>

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

</body>
</html>
    尝试一下
    在此示例中，从事件处理程序调用函数： 
    <!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) { 
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>
    尝试一下

  • HTML事件属性

    要将事件分配给HTML元素，您可以使用事件属性。 
    <button onclick="displayDate()">尝试</button>
    尝试一下
    在上面的示例中，displayDate单击按钮时将执行名为的函数。

  • 使用HTML DOM分配事件

    HTML DOM允许您使用JavaScript将事件分配给HTML元素： 
    <script>
document.getElementById("myBtn").onclick = displayDate;
</script>
    尝试一下
    在上面的示例中，将一个名为的函数displayDate分配给带有id="myBtn"的HTML 元素。单击按钮时将执行该函数。

  • onload和onunload事件

    onload与onunload当在用户进入或离开页面的事件被触发。onload事件可用于检查访问者的浏览器类型和浏览器版本，并根据信息加载正确版本的网页。onload和onunload事件可以用来处理cookie。
    基本代码是： 
    <body onload="checkCookies()">
    尝试一下

  • onchange事件

    onchange事件通常与输入字段的验证结合使用。下面是如何使用onchange的示例。upperCase() 当用户更改输入字段的内容时，将调用该函数。 
    <input type="text" id="fname" onchange="upperCase()">
    尝试一下

  • onmouseover和onmouseout事件

    onmouseover和onmouseout事件可用于当用户将鼠标移动或者点击到触发功能： 
    function mOver(obj) {
  obj.innerHTML = "谢谢"
}

function mOut(obj) {
  obj.innerHTML = "鼠标经过我"
}
    尝试一下

  • onmousedown，onmouseup和onclick事件

    onmousedown，onmouseup和onclick事件是点击鼠标的所有部分。首先，当单击鼠标按钮时，触发onmousedown事件，然后，当释放鼠标按钮时，触发onmouseup事件，最后，当鼠标单击完成时，触发onclick事件。 
    function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "放开我";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="谢谢";
}
    尝试一下
上一节:
下一节: