本章目录

1.事件源

2.事件

3.事件对象

 

 

--概述

    JS的事件处理有3个组成部分：事件源，事件，事件处理程序。

    JavaScript学习_第8章_事件的处理_事件事件处理程序是一段代码，可以是一个函数调用，也可以是更多语句。

    比如网页上有个按钮，点击后能让文字变成蓝色。按钮就是事件源，点击就是一个事件，点击后事件处理程序将文字变成了蓝色。

 

事件源

    事件源就是Html中能够发生事件的元素。任何一个Html元素(节点)都可以是事件源，不只是button,还可以是body,div,p,h1....

   

事件

    事件就是用户的操作。

--和鼠标相关的事件

  • click     单击
  • dblclick  双击
  • contextmenu 文本内容菜单事件(常在事件源body上发生)
  • mouseover 鼠标滑过
  • mouseout  鼠标离开
  • mousedown 鼠标按下
  • mouseup   鼠标抬起
  • mousemove 鼠标移动

 

--和键盘相关的事件

  • keypress 键盘事件
  • keydown  键盘按下
  • keyup    键盘抬起

 

--和文档相关的事件

  • load     加载页面(页面加载完之后触发此事件)
  • unload   关闭页面
  • beforeunload 关闭之前

 

--和表单相关的事件

  • focus   获取焦点
  • blur    失去焦点
  • submit  提交
  • change  改变(表单的内容改变)

 

--其他相关事件

  • scroll  滚动(拉滚动条的操作引起的)
  • selectd 选择(用鼠标选择某个区域)

 

--添加事件的3种方式

  • 第1种

格式：

  1. <tag on事件名 = "事件处理程序" /> 

 注意：on和事件名之间没有空格。

例如：

  1. <input type="button" onclick="show()" value="show"> 
  2. <script> 
  3.     function show() 
  4.     { 
  5.         alert("aaaaa");  
  6.     } 
  7. </script> 

 

  • 第2种

格式：

  1. 对象名.on事件 = "事件处理程序"; 

例如：

  1. <div id="one">wwwwwwww</div> 
  2. <script> 
  3.     var one=document.getElementById("one"); 
  4.     one.onclick=function(){ 
  5.         this.style.backgroundColor="red"; 
  6.     } 
  7. </script> 

    这种方式给对象定义了事件。 

 

  • 第3种

格式：

  1. <script for="事件源id" event="事件">事件处理程序</script> 

文档流执行到事件处理程序时不会执行，只有事件源发生了事件时才会执行。
例如：

  1. <div id="one">wwwwww</div> 
  2. <script for="one" event="onclick"> 
  3.     Var one=document.getElementById("one"); 
  4.     one.style.backgroundColor="red"; 
  5. </script> 

 

--注意：

  • 一个事件源可以加多个事件。
  • 事件返回假可以让事件处理结束。
  • 事件返回假和事件处理函数返回假是有区别的，例如：
  1. <body oncontextmenu="return false">   //事件返回假，可以让事件处理结束 
  2. //所以，写事件处理函数时，可以这样： 
  3. <body oncontextmenu="return test()"> 
  4. <script> 
  5.     function test() 
  6.     { 
  7.         return false; 
  8.     } 
  9. </script> 
  • 由于onload事件是在页面加载完之后触发的，因此事件处理函数可以写在页面的前面，例如：
  1. <script> 
  2.     function test() 
  3.     { 
  4.         var one=document.getElementById("one"); 
  5.         alert(one.innerText); 
  6.     } 
  7. </script> 
  8. <body onload="test()"> 
  9.     <div id="one"> 
  10.         ############ 
  11.     </div> 
  12. </body> 

 

事件对象

--什么是事件对象

    在事件发生时，JS会产生一个对象，用于记录事件的信息以及进行事件处理，这个对象就是事件对象。

    事件对象在ie中是window.event，在火狐中是传给事件处理函数的参数.

 

--事件对象的属性

  • srcElement 事件源元素(事件源对应的对象)

     使用例子：

  1. <div onclick="show()">aaaaaaaa</div> 
  2. <script> 
  3.     function show() 
  4.     { 
  5.         event.srcElement.innerText="abc";//点击div标签后，内容变成abc 
  6.                                           //实际是window.event,但window可以省略
  7.     } 
  8. </script> 

 

  • keyCode 事件发生时键盘按键的asc ii码

     使用例子：

  1. <div onkeyup="show()">aaaaaaaa</div>  
  2. <script>  
  3.     function show()  
  4.     {  
  5.         alert(event.keyCode);//输出键盘上敲击字母的asc ii码  
  6.     }  
  7. </script>  

注意：

1.使用keyup事件只能输出字母，数字键(包括字母，数字，回车，空格，esc键)的ascii码。不能输出活动键(上，下，左，右，ctrl,shift,alt)，也不能输出功能键f1~f12。

2.使用keydown事件可以输出键盘任意按键的ascii。

 

  • clientX, clientY记录事件发生时，鼠标距客户端（浏览器）坐标原点（左上角）的距离
  • screenX, screenY记录事件发生时，鼠标距屏幕坐标原点（左上角）的距离

 使用例子： 

  1. <body onmousemove="test()"> 
  2.     <div id="one"></div> 
  3.     <script> 
  4.         var one=document.getElementById("one"); 
  5.         function test() { 
  6.             var cx=event.clientX;  //clientX 事件属性返回当事件被触发时，
  7.                                 //鼠标指针向对于浏览器页面（或客户区）的水平坐标。 
  8.             var cy=event.clientY; 
  9.             var sx=event.screenX;  //距离屏幕原点的X坐标 
  10.             var sy=event.screenY; 
  11.             var str="clientX="+cx+", clientY="+cy+"; screenX="+sx+", screenY="+sy; 
  12.             one.innerText=str; 
  13.             window.status=str; //状态栏 
  14.             window.document.title=str; //标题 
  15.         } 
  16.     </script> 
  17. </body> 

 

  •  returnValue 事件的返回值

    可以用在事件处理函数中，如：

    在事件处理函数中写上ev.returnValue = false; 可以让事件处理结束 。

 

  • cancelBubble     此值为真的话可以取消弹出菜单

    例如：

  1. <body onclick="one()"> 
  2.     <img src="bbs.gif" onclick="two()"> 
  3.     <script> 
  4.         function one() 
  5.         { 
  6.            alert("body onclick #######"); 
  7.         } 
  8.         function two() 
  9.         { 
  10.             alert("p_w_picpath onclick @@@@@@@@"); 
  11.            window.event.cancelBubble=true;  //如果这个值为true， 
  12.                         //就不会弹出"p_w_picpath onclick @@@@@@@@" 
  13.         } 
  14.     </script> 
  15. </body> 

 

 --关于ie和火狐的事件对象不同，如何处理

    ie的事件对象是window.event。

    而火狐的事件对象是在事件发生时创建，并将该对象作为事件处理函数的实参赋值给处理函数的形参。

    因此写程序要照顾到这两个方面。

    下面就是通常的处理手段：

  1. 对象名.on事件 = function(形参)  
  2. { 
  3.     var ev = 形参 || window.event; //如果在火狐中，形参就有值；
  4.                             //在ie中形参虽然没有值，但可以用window.event 
  5.     将ev作为事件对象使用...... 
  6. } 

     下面是使用例子：

  1. <html> 
  2.     <body> 
  3.         <div id="one"></div> 
  4.     </body> 
  5. </html> 
  6. <script>  
  7.         var one = document.getElementById("one"); 
  8.     window.document.onmousemove = function(e) 
  9.     { 
  10.             var ev = e || window.event; 
  11.         var cx=ev.clientX;  //clientX 事件属性返回当事件被触发时,
  12.                     //鼠标指针向对于浏览器页面（或客户区）的水平坐标。 
  13.             var cy=ev.clientY;  
  14.             var sx=ev.screenX;  //距离屏幕原点的X坐标  
  15.             var sy=ev.screenY;  
  16.             var str="clientX="+cx+", clientY="+cy+"; screenX="+sx+", screenY="+sy;  
  17.             one.innerHTML=str;  
  18.             window.status=str; //状态栏  
  19.             window.document.title=str; //标题 
  20.     }         
  21. </script> 

     注意：

     当事件处理程序中用到事件对象时，为了解决ie火狐兼容性问题，才需要按以下方式写事件处理程序：   

  1. 对象名.on事件 = function(形参)   
  2.     {  
  3.         var ev = 形参 || window.event; //如果在火狐中，形参就有值； 
  4.     //在ie中形参虽然没有值，但可以用window.event  
  5.         将ev作为事件对象使用......  
  6.     }  

    如果没有用到事件对象，可以不写function的形参，也不用定义对象ev。