web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一、事件类型的分类
事件分为一般事件、页面事件和表单事件
二、一般事件
| 关键字 | 释义 | 关键字 | 释义 |
|---|---|---|---|
| click | 单击事件 | dblclick | 双击事件 |
| mousemove | 鼠标移动事件 | mouseover | 鼠标经过事件 |
| mouseout | 鼠标移出事件 | mouseenter | 鼠标进入事件 |
| mouseleave | 鼠标离开事件 | mouseup | 鼠标抬起事件 |
| mousedown | 鼠标按下事件 | keydown | 键盘按下事件 |
| keyup | 键盘抬起事件 | keypress | 键盘释放事件 |
【 mouseout(enter) 和 mouseleave(over)的区别 】
- 不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件（不能冒泡，不能向外层元素传递）
- 只有在鼠标指针离开被选元素时，才会触发mouseleave事件
- mouseleave/mouseover这一组更常用
<html>
<head>
<meta charset="utf-8">
<title>一般事件title>
<style>
div{
height: 50px;
margin: 10px;
color: white;
}
#dj{
background: palegoldenrod;
}
#sj{
background: palegreen;
}
#sbmove{
width: 600px;
height: 200px;
margin: 50px auto;
background: paleturquoise;
}
#sbpass{
width: 600px;
height: 200px;
margin: 50px auto;
background: palevioletred;
}
#sbdownup{
background: cadetblue;
}
#qm{
width: 600px;
height: 300px;
margin: 50px auto;
}
#sr{
width: 600px;
height: 300px;
}
style>
head>
<body>
<div id="dj">单击事件div>
<div id="sj">双击事件div>
<div id="sbmove">鼠标移动相关事件div>
<div id="sbpass">鼠标经过/离开事件div>
<div id="sbdownup">鼠标按下抬起事件div>
<textarea id="qm">textarea>
<textarea id="sr">textarea>
<script>
// 事件类型
// 一般事件——————————————————————————————
// 1. 单击事件:click
var dj=document.getElementById('dj');
// 事件函数
function changeBG1(){
// 修改背景颜色
dj.style.backgroundColor='saddlebrown';
}
dj.addEventListener('click',changeBG1,false);
// 2. 双击事件:dblclick
var sj=document.getElementById('sj');
// 事件函数
function changeBG2(){
// 修改背景颜色
sj.style.backgroundColor='green';
}
sj.addEventListener('dblclick',changeBG2,false);
// 3. 鼠标移动事件:mousemove
var sbmove=document.getElementById('sbmove');
// 事件函数
function change1(){
console.log('#########'+Math.random());
}
sbmove.addEventListener('mousemove',change1,false);
// 4. 鼠标进入事件:mouseenter
// 事件函数
function changeBG3(){
sbmove.style.backgroundColor='blueviolet';
}
sbmove.addEventListener('mouseenter',changeBG3,false);
// 5. 鼠标移出事件:mouseout
// 事件函数
function changeBG4(){
sbmove.style.backgroundColor='darkblue';
}
sbmove.addEventListener('mouseout',changeBG4,false);
// 6. 鼠标经过事件:mouseover
var sbpass=document.getElementById('sbpass');
// 事件函数
function changeBG5(){
sbpass.style.backgroundColor='purple';
}
sbpass.addEventListener('mouseover',changeBG5,false);
// 7. 鼠标离开事件:mouseleave
// 事件函数
function changeBG6(){
sbpass.style.backgroundColor='plum';
}
sbpass.addEventListener('mouseleave',changeBG6,false);
// 8. 鼠标按下事件:mousedown 鼠标抬起事件:mouseup
var sbdownup=document.getElementById('sbdownup');
// 事件函数
function changeBG7(){
sbdownup.style.backgroundColor='gray';
}
function changeBG8(){
sbdownup.style.backgroundColor='goldenrod';
}
sbdownup.addEventListener('mousedown',changeBG7,false);
sbdownup.addEventListener('mouseup',changeBG8,false);
// 9. 键盘按下事件 keydown
var qm=document.getElementById('qm');
// 事件函数
function changeBG9(){
console.log('#########'+Math.random());
qm.style.backgroundColor='skyblue';
}
qm.addEventListener('keydown',changeBG9,false);
// 10. 键盘抬起事件 keyup (对所有按键都有效)
// 事件函数
function changeBG10(){
console.log('#########'+Math.random());
qm.style.backgroundColor='peachpuff';
}
qm.addEventListener('keyup',changeBG10,false);
// 11. 键盘释放事件 keypress (仅对输入型按键有效，数字字母标点回车等)
var sr=document.getElementById('sr');
// 事件函数
function changeBG11(){
console.log('#########'+Math.random());
sr.style.backgroundColor='darkseagreen';
}
sr.addEventListener('keypress',changeBG11,false);
script>
body>
html>
三、页面事件
| 关键字 | 释义 | 关键字 | 释义 |
|---|---|---|---|
| onabort | 页面终止事件（网页没有完全加载的情况下关闭网页） | onunload | 页面退出完毕事件（仅IE浏览器 XP系统可用） |
| onload | 页面加载完毕事件 （主要针对旧版浏览器。新版本浏览器均在最后执行js代码） |
onbeforeunload | 页面即将退出事件（新版本浏览器不支持） |
| oncopy | 内容复制事件 | oncut | 内容剪切事件 |
| onscroll | 页面滚动事件 | onresize | 页面大小调整事件 |
| onselect | 页面内容选中事件(仅表单元素有效) | onselectstart | 页面内容选中开始事件(任意元素) |
<html>
<head>
<meta charset="utf-8">
<title>页面事件title>
<style>
#mytxt{
width: 600px;
height: 100px;
color: darkred;
font-size: 20px;
}
#gd{
width: 300px;
height: 3000px;
background: #EEE8AA;
}
#sun{
height: 300px;
color: #000000;
}
style>
head>
<body>
<input type="text" name="username" value=""/>
<textarea id="mytxt">自我陈述textarea>
<div id="gd">页面滚动div>
<input type="text" name="username1" value="锄禾日当午，汗滴禾下土"/>
<br /><br />
<div id="sun">锄禾日当午，汗滴禾下土div>
<script>
// 事件类型
// 页面事件————————————————————————————————————————
// 1. unload 页面退出完毕（仅IE xp系统可用）
window.onunload=function(){
// 信息提示
alert(页面即将退出);
}
// 2. onbeforeunload（新版本浏览器不支持）
window.onbeforeunload=function(){
return '页面即将关闭，确定退出吗吗吗吗？？';
}
// 3. onload 页面加载完毕才会运行的代码
window.onload=function(){
var input=document.getElementsByName('username');
console.log(input);
}
// 4. oncopy 内容复制事件
var mytxt=document.getElementById('mytxt');
// 事件函数
function showTxt(){
console.log('内容已复制');
}
mytxt.addEventListener('copy',showTxt,false);
// 5. oncut 内容剪切事件
var mytxt=document.getElementById('mytxt');
// 事件函数
function showTxt2(){
console.log('内容已剪切');
}
mytxt.addEventListener('cut',showTxt2,false);
// 6. onscroll 页面滚动事件
// 页面滚动时都会触发
window.onscroll=function(){
console.log('正在拖动滚动条');
}
// 7. onresize 页面大小调整事件
// 每次调整页面大小都会触发
window.onresize=function(){
console.log('页面大小已调整');
}
// 8. onselect 页面内容选中事件 （仅表单元素有效）
var input2=document.getElementsByName('username1')[0];
// 事件函数
function showTxt3(){
alert('内容已选中');
}
// 选中表单中内容时触发
input2.addEventListener('select',showTxt3,false);
// 9. onselectstart 页面内容选中开始事件
var sun=document.getElementById('sun');
// 事件函数
function showTxt4(){
alert('要选啦啦啦');
}
// 开始选中的时候就触发
sun.addEventListener('selectstart',showTxt4,false);
// 添加禁止选中操作（只能用DOM0实现）
sun.onselectstart=function(){
return false;
}
script>
body>
html>
四、表单事件
| 关键字 | 释义 |
|---|---|
| onblur | 失去焦点事件 |
| onfocus | 获取焦点事件 |
| onchange | 表单值改变事件 |
| onsubmit | 提交表单事件 |
| onreset | 重置表单事件 |
<html>
<head>
<meta charset="utf-8">
<title>事件类型title>
head>
<body>
<form id="form1" action="http://www.baidu.com">
<table border="1px" width="500px">
<tr>
<td>用户名：td>
<td><input type="text" name="username3" value="" />td>
tr>
<tr>
<td>昵称：td>
<td><input type="text" name="nickname" value="" />td>
tr>
<tr>
<td>颜色：td>
<td>
<select name="bgColor">
<option value="">请选择颜色option>
<option value="red">红色option>
<option value="orange">橙色option>
<option value="yellow">黄色option>
<option value="green">绿色option>
<option value="blue">蓝色option>
<option value="random">随机option>
select>
td>
tr>
<tr>
<td>提交td>
<td><input type="submit" value="提交表单" />td>
tr>
<tr>
<td>重置td>
<td><input type="reset" value="重置表单" />td>
tr>
table>
form>
<script>
// 表单事件————————————————————————————————————————
// 1. onfocus 获取焦点
var uername3=document.getElementsByName('username3')[0];
// 事件函数
function focusBG(){
uername3.style.backgroundColor='paleturquoise';
}
uername3.addEventListener('focus',focusBG,false);
// 2. onblur 失去焦点
// 事件函数
function blurBG(){
uername3.style.backgroundColor='wheat';
}
uername3.addEventListener('blur',blurBG,false);
// 3. onchange 表单值改变
var bgcolor=document.getElementsByName('bgColor')[0];
// 获取表格
var tab=document.getElementsByTagName('table')[0];
// 事件函数
function formBG(){
// 获取当前选中的颜色值
var tabcolor=bgcolor.value;
if(tabcolor=='random'){
// 随机颜色
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
tab.style.backgroundColor='rgb('+r+','+g+','+b+')';
}else{
tab.style.backgroundColor=tabcolor;
}
}
tab.addEventListener('change',formBG,false);
// 4. onsubmit 提交表单
var form1=document.getElementById('form1');
// 使用DOM0方式实现
form1.onsubmit=function(){
// 验证表单
// 验证是否填写用户名
if(uername3.value==''){
alert('用户名不能为空');
var userinfo=document.createTextNode(' 请填写用户名');
uername3.parentNode.appendChild(userinfo);
return false;
}else{
return true;
}
}
// 5. onreset 重置表单
form1.onreset=function(){
// 重置提示
var result=window.confirm('确认重置表单吗？');
return result;
}
script>
body>
html>