三木社区

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 528|回复: 0
打印 上一主题 下一主题

JavaScript HTML DOM 事件

[复制链接]

942

主题

950

帖子

3062

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3062
跳转到指定楼层
楼主
发表于 2017-9-29 11:50:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
JavaScript HTML DOM 事件HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
  1. onclick=JavaScript
复制代码
HTML 事件的例子:
  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时
在本例中,当用户在 <h1> 元素上点击时,会改变其内容:
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
  5. </body>
  6. </html>
复制代码
本例从事件处理器调用一个函数:实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function changetext(id)
  6. {
  7.     id.innerHTML="Ooops!";
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <h1 onclick="changetext(this)">点击文本!</h1>
  13. </body>
  14. </html>
复制代码
HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
实例向 button 元素分配 onclick 事件:
  1. <button onclick="displayDate()">点这里</button>
复制代码
在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:
实例
向 button 元素分配 onclick 事件:
  1. <script>
  2. document.getElementById("myBtn").onclick=function(){displayDate()};
  3. </script>
复制代码
在上面的例子中,名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。

回复

使用道具 举报

Archiver|手机版|小黑屋|三木电子社区 ( 辽ICP备11000133号-4 )

辽公网安备 21021702000620号

GMT+8, 2026-1-19 23:58 , Processed in 0.025237 second(s), 23 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表