轻松学习JavaScript二十八：DOM编程学习之事件处理函数_dom编程中如何指定事件的响应函数并实现之-CSDN博客

本文链接：https://blog.csdn.net/erlian1992/article/details/50425875

在JavaScript语言中可以处理的事件类型可以分为：鼠标事件，键盘事件和HTML事件。对于于每一个事件，它都

有自己的触发范围和方式，如果超出了触发范围和方式，事件处理就会失效。所有的事件处理函数都会有两个部分组

成，on+事件名称，例如click事件的时间处理函数就是：onclick。

JavaScript事件处理函数及其使用列表

一鼠标事件：页面所有元素都可触发

(1)click：当用户单击鼠标按钮或按下回车键时触发。onclick事件是我们最常用的鼠标事件，几乎涵盖了网页中的

很多与用户交互的过程。我们只是看一个简单的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:yellow;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    var div=document.getElementById("test");
    div.οnclick=function(){
          this.style.backgroundColor="red";
    }
}
</script>
</head>

<body>
<div id="test">Click Me</div>
</body>
</html>

点击之前(初始化状态)：

点击之后(也是以后一直保持的状态)：

(2)dblclick：当用户双击主鼠标按钮时触发。这个鼠标事件一般很少用到，我们就不再举例了。

(3)mousedown：当用户按下了鼠标还未弹起时触发。

(4)mouseup：当用户释放鼠标按钮时触发。

onmousedown、onmouseup 以及onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发

onmousedown事件，然后，当鼠标按钮被松开时，会触发onmouseup事件，最后，当鼠标点击完成时，触发onclick

事件。我们来看一个简单的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:yellow;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    var div=document.getElementById("test");
    div.οnmοusedοwn=function(){
          this.style.backgroundColor="blue";
          this.innerHTML="松开鼠标";
     }
     div.οnmοuseup=function(){
           this.style.backgroundColor="yellow";
           this.innerHTML="谢谢";
     }
}
</script>
</head>

<body>
<div id="test">Click Me</div>
</body>
</html>

鼠标未点击之前(初始化状态)：

鼠标点下去不松开：

鼠标松开(最后保持的状态，再次刷新后为初始化状态)：

(5)mouseover：当鼠标移到某个元素上方时触发。

(6)mouseout：当鼠标移出某个元素上方时触发。

这两个事件一般同时使用，也是经常做Web前端开发用到的。比如导航栏的下拉菜单等各种动态效果。我们来看

一个简单的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:#FFFF00;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    var div=document.getElementById("test");
    div.οnmοuseοver=function(){
          this.innerHTML="谢谢";
    }
    div.οnmοuseοut=function(){
           this.innerHTML="把鼠标移上来";
    }
}
</script>
</head>

<body>
<div id="test">Mouse Over Me</div>
</body>
</html>

鼠标放上去之前(初始化状态)：

鼠标放上去之后：

鼠标放下去之后(最后保持的状态，再次刷新后为初始化状态)：

(7)mousemove：当鼠标指针在元素上移动时触发。这个好演示，只是没有什么多大的变化，我们等到实际用到

了在进行详细的演示和了解。

二键盘事件

keydown：当用户按下键盘上任意键时触发，如果按住不放，会重复触发。

keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发。

keyup：当用户释放键盘上的键时触发。

由于浏览器兼容性的问题，在这里就不再举例。详细了解的话可以参考：http://www.jb51.net/article/21592.htm

三HTML事件

(1)load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。

(2)unload：当页面完全卸载后在window上面触发，或当框架集卸载完毕后在框架集上触发。

当用户进入或离开页面时，会触发onload和onunload事件。onload事件可用于检查访客的浏览器类型和版本，以

便基于这些信息来加载不同版本的网页。onload和onunload事件可用于处理 cookies。onload事件我们在前面已经使

用过，就不再进行举例。

(3)select：当用户选择文本框(input或textarea)中的一个或多个字符时触发。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.οnlοad=function(){
    var userName=document.getElementById("userName");
    userName.οnselect=function(){
         alert("你选中了"+this.value);
    }
}
</script>
</head>

<body>
请输入你的英文名：<input type="text" id="userName" />
<p>当输入字段并选中字符时发生的事件。</p>
</body>
</html>

效果：

(4)change：当文本框(input或textarea)内容改变且失去焦点后触发。我们举行一个简单的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.οnlοad=function(){
    var userName=document.getElementById("userName");
    userName.οnchange=function(){
          this.value=this.value.toUpperCase();
    }
}
</script>
</head>

<body>
请输入你的英文名：<input type="text" id="userName" />
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
</html>

未失去焦点之前：

失去焦点之后：

(5)focus：当页面或者元素获得焦点时window及相关元素上触发。

(6)blur：当页面或者元素失去焦点时window及相关元素上触发。

对于上述的两个事件也是在一起使用的事件，我们看一个简单的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.οnlοad=function(){
    var userName=document.getElementById("userName");
    userName.οnfοcus=function(){
         this.style.backgroundColor="yellow";
    }
    userName.οnblur=function(){
         this.style.backgroundColor="red";
    }
}
</script>
</head>

<body>
请输入你的英文名：<input type="text" id="userName" />
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
</body>
</html>

初始化状态：