开发者需要掌握的JS事件

JavaScript事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。

1.为对象添加事件的2种方式

①：在HTML元素中添加对象的事件

<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" onmouseover = "overtest()";/>
</body>
②：在JS代码中为元素添加事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
window.onload = function(){
document.getElementById("myimg").onmouseover = overtest;
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" id="myimg";/>
</body>

总结：优先使用第二种，将js代码与HTML元素代码分离开，更加方便统一管理维护。

问题：HTML 元素添加事件，与JS添加事件是否可以完全等价？

在实际开发中，如果传参数，使用HTML元素绑定事件，如果不传参数，使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。示例代码如下：

<head>
<title>HTML事件绑定与JS绑定</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionclicktest(o){
alert(o);
}
window.onload = function(){
document.getElementById("mybutton").onclick = function(){
clicktest('次奥');
}
}
</script>
</head>
<body>
<input type="button" id="mybutton" value="点击我！">
<input type="button" value="别碰我！" onclick = "clicktest('次奥')"/>
</body>

2.鼠标移动事件

Mousemove：鼠标移动时触发事件鼠标跟随效果

Mouseover：鼠标从元素外，移动元素之上，信息提示、字体变色

Mouseout：鼠标从元素上，移出元素范围，和mouseover一起使用

3.鼠标点击事件（左键相关事件）

click 鼠标单击事件

dbclick 鼠标双击事件

mousedown/mouseup 鼠标按下、按键弹起 click = mousedown + mouseup;

oncontextmenu 鼠标右键菜单事件（不是浏览器兼容事件）

4.聚焦离焦事件

focus 聚焦页面焦点定位到目标元素

blur 离焦页面焦点由目标元素移开

Demo:

<script type="text/javascript">
window.onload= function(){
//页面加载后，在输入框加入默认值，并以灰色显示
document.getElementById("username").value= "用户名";
document.getElementById("username").style.color="gray";
//聚焦事件
document.getElementById("username").onfocus= function(){
document.getElementById("username").value="";
document.getElementById("username").style.color="black";
}
//离焦事件
document.getElementById("username").onblur=function(){
varname = document.getElementById("username").value;
if(name==""){
document.getElementById("username").value="张三";
document.getElementById("username").style.color="gray";
}
}
}
</script>
</head>
<body>

请输入用户名：<input type="text" id="username"><br/>

</body>

5.键盘事件

使用场景：没有提交按钮，我们一般采用回车进行提交

Demo:

<script type="text/javascript">
window.onload = function(){
document.getElementById("message").onkeypress = function(e){
// 判断用户 按键是否为 回车键
if(e && e.which){
// 火狐浏览器
if(e.which == 13){
alert("提交")
}
}else{
// IE浏览器
if(window.event.keyCode ==13 ){
alert("提交")
}
}
}
}
</script>
<body>

发送消息 <input type="text" name="message" id="message"/>

</body>

IE 中window对象，提供event属性，所以在IE中可以直接使用 event对象

火狐没有全局event对象，必须在发生事件时，产生一个event对象，传递默认方法

6.form的提交、重置事件

submit/reset

onsubmit = "return validateForm" 对表单进行校验

7.改变事件

onchange 制作select联动效果 ---- 省市联动

重点： onclick 、onchange 、onblur、 onsubmit

8.默认事件的阻止和传播阻止

使用场景极为常见，超链接用户点击后，取消了不发生跳转。

<script type="text/javascript">
// 阻止默认事件发生
functionconfirmDel(e){
varisConfirm = window.confirm("确认删除吗？");
if(!isConfirm){// 用户选择了取消
// 阻止默认事件
if(e && e.preventDefault){
// 火狐
e.preventDefault();
}else{
// IE
window.event.returnValue = false;
}
}
}
// 阻止事件冒泡
functionaclick(e){
alert("a");
if(e && e.stopPropagation){
// 火狐浏览器
e.stopPropagation();
}else{
// IE 浏览器
window.event.cancelBubble = true;
}
}
functiondivclick(){
alert("div");
}
</script>
<body>
<h1>默认事件</h1>
<!-- 删除时，询问用户是否删除，然后再跳转-->
<a href="del?id=1" onclick="confirmDel(event);">这是一个链接</a>
<h1>事件传播</h1>
<!-- 事件冒泡传播 -->
<div onclick="divclick();"><a href="#" onclick="aclick(event);">这个链接 会触发两个事件执行</a></div>
</body>

HTML DOM Event对象

提供preventDefault()用于阻止默认事件的发生，该方法IE 不支持，在IE中使用 returnValue

提供stopPropagation()用与阻止事件传播，该方法IE不支持，在IE中 cancelBubble