鼠标事件
onclick：鼠标点击某个对象
ondblclick：鼠标双击某个对象
onmouseover：鼠标移到某个元素之上
onmouseout：鼠标从某元素移开
onmousedown：某个鼠标按键被按两下
onmousemove：鼠标被移动
onmouseup：某个鼠标按键被松开
1
2
3
4
5
6
7
|
<ul>
<li onclick="bbb()">点击变背景颜色</li>
<li>双击有惊喜</li>
<li>鼠标滑过字体变大，鼠标离开字体变小</li>
<li>鼠标按下文字变为红色，松开文字变为绿色，鼠标移动在控制台输出1</li>
</ul>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| var li=document.getElementsByTagName('li');
function bbb(){
li[0].style.background='red';
}
li[1].addEventListener('click',function(){
li[1].style.color='pink';
},false)
li[2].onmouseover=function(){
li[2].style.fontSize='24px';
}
li[2].onmouseout=function(){
li[2].style.fontSize='4px';
}
li[3].onmousedown=function(){
li[3].style.color='red';
}
li[3].onmouseup=function(){
li[3].style.color='green';
}
li[3].onmousemove=function(){
console.log('1');
}
|
表单事件
onfocus：元素获得焦点
onblur：元素失去焦点
onchange：用户改变域的内容
onreset：表单重置时触发
onsubmit：表单提交时触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<form action="inde.html" onreset="fff()" onsubmit="ggg()">
<p>
用户名：获得焦点背景变黄
<input type="text">
</p>
<p>
密码：失去焦点输入框的小写变大写
<input type="text">
</p>
<select name="" id="" onchange="ddd()">
<option value="北京">北京:用户改变域的内容</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<p><input type="reset" value="重置"></p>
<p><input type="submit" value="提交"></p>
</form>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| var ccc=document.getElementsByTagName('input');
ccc[0].onfocus=function(){
ccc[0].style.background='yellow';
}
ccc[1].onblur=function
(){
ccc[1].value=ccc[1].value.toUpperCase();
}
function ddd(){
alert('你改变了内容');
}
function fff(){
alert('表单已重置');
}
function ggg(){
alert('表单已提交');
}
|
键盘事件
onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下或按住
onkeyup：某个键盘按键被松开
1
2
3
|
<p>按下任意键：背景变红，松开变绿<input type="text"></p>
<p>按下并释放背景变黄色：<input type="text" onkeypress="jjj()"></p>
|
1
2
3
4
5
6
7
8
9
10
| var hhh=document.getElementsByTagName('input');
hhh[4].onkeydown=function(){
hhh[4].style.background='red';
}
hhh[4].onkeyup=function(){
hhh[4].style.background='green';
}
function jjj(){
hhh[5].style.background='yellow';
}
|
UI事件
onload：某个页面或图像被完全加载
onresize：窗口或框架被调整尺寸
onsroll：当文档被滚动时发生的事件
在body中加入onload，此页面加载完成触发，或者使用windo.onload；
onresize浏览器窗口改变触发;onscroll文档被滚动触发（滚动条）
1
2
3
|
<div id="gdt">onscroll<br/>文档被滚<br/>动触发<br/>（滚动条）o<br/>nscr<br/>oll<br/>文档被<br/>滚动触<br/>发（滚<br/>动条）<br/>onsc<br/>roll文<br/>档<br/>被滚<br/>动触<br/>发（滚<br/>动条）
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| function kkk(){
alert('页面已加载完成');
}
window.onload=function(){
alert('页面已加载完成');
}
function lll(){
alert('浏览器窗口大小被改变');
}
var gdt=document.getElementById('gdt');
gdt.onscroll=function(){
alert('滚动条触发');
}
|
实例点击查看。
