鼠标事件

onclick:鼠标点击某个对象
ondblclick:鼠标双击某个对象
onmouseover:鼠标移到某个元素之上
onmouseout:鼠标从某元素移开
onmousedown:某个鼠标按键被按两下
onmousemove:鼠标被移动
onmouseup:某个鼠标按键被松开

<!--事件实例:-->
<ul>
<li onclick="bbb()">点击变背景颜色</li>
<li>双击有惊喜</li>
<li>鼠标滑过字体变大,鼠标离开字体变小</li>
<li>鼠标按下文字变为红色,松开文字变为绿色,鼠标移动在控制台输出1</li>
</ul>
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:表单提交时触发

<!--事件实例:-->
<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>
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:某个键盘按键被松开

<!--事件实例:-->
<p>按下任意键:背景变红,松开变绿<input type="text"></p>
<p>按下并释放背景变黄色:<input type="text" onkeypress="jjj()"></p>
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文档被滚动触发(滚动条)

<!--事件实例:-->
<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>
function kkk(){
				alert('页面已加载完成');
			}
			window.onload=function(){
				alert('页面已加载完成');
			}
			function lll(){
				alert('浏览器窗口大小被改变');
			}
			var gdt=document.getElementById('gdt');
			gdt.onscroll=function(){
				alert('滚动条触发');
			}

实例点击查看。

        👍赞 1
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...