前言
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>
鼠标点输入框，获取焦点
鼠标移开输入框，失去焦点
