0
点赞
收藏
分享

微信扫一扫

JavaScript 中的事件

目录

一、概念

二、常见的事件

1、点击事件

2、焦点事件

3、加载事件

4、鼠标事件

5、键盘事件

6、选择和改变

7、表单事件

一、概念

某些组件被执行了某些操作后,出发某些代码执行

  • 事件:某些操作,如:单机、双击、鼠标移动、键盘按下等
  • 事件源:组件,如:按钮、文本输入框等
  • 监听器:代码
  • 注册监听:将事件、事件源、监听器结合在一起,当事件源上发生某个事件,则触发某个监听代码

二、常见的事件

1、点击事件

【1】onclick:单击事件

【2】ondblclick:双击事件

2、焦点事件

【1】onblur:失去焦点

  • 一般用于表单验证

【2】onfocus:获取焦点

3、加载事件

【1】onload:一张页面或一张图完成加载

4、鼠标事件

【1】onmousedown:鼠标按钮被按下

  • 定义方法时,定义一个形参,接受event对象

【2】onmouseup:鼠标按键被松开

【3】onmousemove:鼠标被移动

【4】onmouseover:鼠标移动到某个元素上

【5】onmouseout:鼠标从某元素移开

5、键盘事件

【1】onkeydown:键盘按键被按下

【2】onkeyup:键盘按键被松开

【3】onkeypress:键盘按键被按下并松开

6、选择和改变

【1】onchange:域的内容被改变

【2】onselect:文本被选中

7、表单事件

【1】onsubmit:确认按钮被点击

  • 返回false可以阻止表单被提交

【2】onreset:重置按钮被点击

<script type="text/javascript">
//2、加载事件
window.onload = function(){
//1、失去焦点事件
document.getElementById("usname").onblur = function(){
alert("失去焦点");
}
//3、绑定鼠标移动到元素上事件
document.getElementById("usname").onmouseover = function(){
alert("鼠标!!");
}
//4、绑定鼠标点击事件
document.getElementById("usname").onmousedown = function(event){
alert(event.button);
}
//5、绑定键盘按下事件
document.getElementById("usname").onkeydown = function(event){
alert(event.keyCode);
}
//6、表单提交
document.getElementById("usname").onsubmit = function(event){
var flage = false;
return flage;
}
}
</script>

举报

相关推荐

0 条评论