网站地图
  • 网站首页
  • 模板下载
  • 建站心得
  • 站长百科
  • 素材风暴
  • 源码时代
  • 源码入门
  • JavaScriptHTMLDOM事件-实例-对事件做出反应

    发布时间: 2022-03-31 22:55首页:蜡笔源码 > 建站心得 > HTML教程 > 阅读()

    JavaScript HTML DOM 事件

    HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

    实例

    Mouse Over Me

    Click Me


    对事件做出反应

    大家可以在事件发生时实行 JavaScript,譬如当用户在 HTML 元素上点击时。

    如需在用户点击某个元素时实行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

    onclick=JavaScript

    HTML 事件的例子:

    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图像已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当提交 HTML 表单时
    • 当用户触发按键时

    在本例中,当用户在<h3> 元素上点击时,会改变其内容:

    实例

    <!DOCTYPE html>
    <html>
    <body>
    <h3 onclick="this.innerHTML='Ooops!'">点击文本!</h3>
    </body>
    </html>


    试试看看 »

    本例从事件处置器调用一个函数:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function changetext
    {
    id.innerHTML="Ooops!";
    }
    </script>
    </head>
    <body>
    <h3 onclick="changetext">点击文本!</h3>
    </body>
    </html>


    试试看看 »


    HTML 事件属性

    如需向 HTML 元素分配 事件,你可以用事件属性。

    实例

    向 button 元素分配 onclick 事件:

    <button onclick="displayDate">点这里</button>


    试试看看 »

    在上面的例子中,名为 displayDate 的函数将在按钮被点击时实行。

    用 HTML DOM 来分配事件

    HTML DOM 允许你用 JavaScript 来向 HTML 元素分配事件:

    实例

    向 button 元素分配 onclick 事件:

    <script>
    document.getElementById.onclick=function{displayDate};
    </script>


    试试看看 »

    在上面的例子中,名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。

    按钮点击时Javascript函数将会被实行。

    onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发。

    onload 事件可用于测试访问者的浏览器种类和浏览器版本,并基于这类信息来加载网页的正确版本。

    onload 和 onunload 事件可用于处置 cookie。

    实例

    <body onload="checkCookies">


    试试看看 »


    onchange 事件

    onchange 事件常结合对输入字段的验证来用。

    下面是一个怎么用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase 函数。

    实例

    <input type="text" id="fname"onchange="upperCase">


    试试看看 »


    onmou网站优化ver 和 onmou网站优化ut 事件

    onmou网站优化ver 和 onmou网站优化ut 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

    实例

    一个容易的 onmou网站优化ver-onmou网站优化ut 实例:

    Mouse Over Me


    试试看看 »


    onmousedown、onmouseup 与 onclick 事件

    onmousedown, onmouseup 与 onclick 构成了鼠标点击事件的所有部分。第一当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

    实例

    一个容易的 onmousedown-onmouseup 实例:

    Thank You


    更多实例

    onmousedown 和onmouseup
    当用户按下鼠标按钮时,更换一幅图像。

    onload
    当页面完成加载时,显示一个提示框。

    onfocus
    当输入字段获得焦点时,改变其背景色。

    鼠标事件
    当指针移动到元素上方时,改变其颜色;当指针移出文本后,会第三改变其颜色。

    特别声明:文章内容仅供参考,不造成任何投资建议。投资者据此操作,风险自担。

    网站首页 - 模板下载 - 建站心得 - 站长百科 - 素材风暴 - 源码时代 - 源码入门

    未经本站书面特别授权,请勿转载或建立镜像

    Copyright © 2002-2021 蜡笔源码 (http://www.028djc.com) 网站地图 TAG标签