JavaScript 学习-29.HTML DOM 事件

2022/5/28 1:22:12

编程Tag： javascript function 元素 Dom onclick onload 示例 ... 29

本文主要是介绍JavaScript 学习-29.HTML DOM 事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

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 onl oad="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://www.www.weizhi.cc/i/i/?n=15&i=blog/1070438/201704/1070438-20170417224839696-1584175751.jpg" onl oad="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>

鼠标点输入框，获取焦点

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

这篇关于JavaScript 学习-29.HTML DOM 事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript 学习-29.HTML DOM 事件

前言

常用的一些事件

onload 加载页面

onclick 点击事件

onfocus 和 onblur

相关编程文章