前言

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

常用的一些事件

事件名称

作用

onload

通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

onunload

用户退出页面。 ( 和 )

onclick

当用户点击某个对象时调用的事件句柄。

onmouseover

鼠标移到某元素之上。

onmouseout

鼠标从某元素移开。

ondblclick

当用户双击某个对象时调用的事件句柄。

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

onfocus

元素获取焦点时触发

onblur

元素失去焦点时触发

onchange

该事件在表单元素的内容改变时触发​​ <input>​​​, ​​<keygen>​​​, ​​<select>,​​​ 和 ​​<textarea>​​

onfocus

元素获取焦点时触发

onsubmit

表单提交时触发

onload 加载页面

onload 通常用于 ​​<body>​​​ 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
支持onload 的标签有

  • body
  • frame
  • frameset
  • iframe
  • img
  • link
  • script
  • style

事件绑定有2种方式
一、在 HTML body 中:

<body onload="func()">

二、在 script 中

window.onload=function(){do something...};

使用示例

<body>
    <h1>onload 加载示例</h1>
    <div id="user">
        <p id="demo" class="text-info">Hello</p>
        <p>Hello</p>
    </div>
    <script>
    window.onload = function () {
        // 页面加载完弹出alert
        alert('页面加载完了。。。')
    }
    </script>
  </body>

JavaScript 学习-29.HTML DOM 事件_html

图片加载完成后触发onload示例

<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer" />
    <title>hello</title>
    <script>
        function load_something() {
            alert('图片加载完成...')
        }
    </script>
  </head>
  <body>
    <h1>onload 加载示例</h1>
    <img src="https://images2015.cnblogs.com/blog/1070438/201704/1070438-20170417224839696-1584175751.jpg" onload="load_something();">
  </body>

JavaScript 学习-29.HTML DOM 事件_JavaScript_02

onclick 点击事件

onclick 点击事件 ,当按钮被点击时执行

html中添加点击事件

<button onclick="func()">点我</button>

script 添加点击事件

element.onclick=function(){do something...};

使用示例

<head>
    <meta charset="utf-8">
    <title>hello</title>
    <script>
        function click_do_something() {
            alert('点击按钮do something...')
        }
    </script>
  </head>
  <body>
    <h1>onclick 点击示例</h1>
    <button id="btn" onclick="click_do_something();">点我</button>
  </body>

或者

<body>
    <h1>onclick 点击示例</h1>
    <button id="btn">点我</button>
    <script>
        ele = document.getElementById('btn')
        ele.onclick = function () {
            alert('点我 do something...')
        }
    </script>
  </body>

JavaScript 学习-29.HTML DOM 事件_获取焦点_03

onfocus 和 onblur

onfocus 获取焦点的时候触发
onblur 当元素失去焦点的时候触发

使用示例

<body>
    <h1>onfocus 获取焦点 和 onblur 失去焦点</h1>
    <form id="form-user">
        <label for="user-id">用户名</label>
        <input id="user-id" name="username" value="yoyo">
        <label for="user-psw">密码</label>
        <input id="user-psw" name="password" value="">
    </form>
    <script>
        ele = document.getElementById('user-id')
        ele.onfocus=function () {
            console.log('获取元素的焦点了...')
        }
        ele.onblur=function () {
            console.log('失去元素的焦点了...')
        }
    </script>
  </body>

鼠标点输入框，获取焦点
JavaScript 学习-29.HTML DOM 事件_JavaScript_04

鼠标移开输入框，失去焦点

JavaScript 学习-29.HTML DOM 事件_点击事件_05