JavaScript 学习-29.HTML DOM 事件

上海-悠悠

发布于 2022-05-30 15:11:46

1K00

代码可运行

文章被收录于专栏：从零开始学自动化测试从零开始学自动化测试

运行总次数：0

代码可运行

前言

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>

图片加载完成后触发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>

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>

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>

鼠标点输入框，获取焦点