JavaScript 学习-29.HTML DOM 事件

最新推荐文章于 2023-10-19 22:32:47 发布

上海-悠悠

最新推荐文章于 2023-10-19 22:32:47 发布

阅读量149

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_27371025/article/details/125016598

版权

JavaScript 专栏收录该内容

63 篇文章 6 订阅

订阅专栏

前言

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>

鼠标点输入框，获取焦点

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

上海-悠悠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习-29.HTML DOM 事件

前言HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。常用的一些事件事件名称作用onload通常用于元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。onunload用户退出页面。 ( 和 )onclick当用户点击某个对象时调用的事件句柄。onmouseover鼠标移到某元素之上。onmouseout鼠标从某元素移开。ondblclick当用户双击某个对象时调用的事件句柄。
复制链接

扫一扫