JavaScript 学习-29.HTML DOM 事件

2022-05-27 20:31:46 阅读：190 来源： 互联网

标签：function onload DOM onclick 示例 JavaScript 29 ... 元素

前言

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.icode9.com/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>

鼠标点输入框，获取焦点

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

标签：function,onload,DOM,onclick,示例,JavaScript,29,...,元素
来源： https://www.cnblogs.com/yoyoketang/p/16317212.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 学习-29.HTML DOM 事件

前言

常用的一些事件

onload 加载页面

onclick 点击事件

onfocus 和 onblur