Javascript事件处理

最新推荐文章于 2024-07-20 23:54:17 发布

熔岩上的灌木

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量249

点赞数 1

文章标签： javascript事件 javascript

 
 <script type= 
 "text/javascript" 
 > 
 
 //事件 
 
 //IE,冒泡型事件，DOM事件流，一次捕获过程一次冒泡过程。 
 
 //冒泡事件是从下往上，捕获事件从上往下. 
 
 //DOM还支持文本节点的捕获 
 
 //事件处理函数/监听函数 
 
 var 
  oDiv=document.getElementById( 
 "div1" 
 ); 
 
 oDiv.onclick= 
 function 
 (){ 
 
 alert( 
 "i was clicked" 
 ); 
 
 }; 
 
 <div onclick= 
 "alert('i am clicked')" 
 ></div> 
 
 //为每个可用事件分配多个事件处理函数 
 
 //IE中，attachEnvent(),detachEvent() 
 
 var 
  fnclick1= 
 function 
 (){alert( 
 "clicked" 
 )}; 
 
 vr fnclick2= 
 function 
 (){alert( 
 "also clicked" 
 )}; 
 
 var 
  oDiv=document.getElementById( 
 "div" 
 ); 
 
 oDiv.attachEvent( 
 "onclick" 
 ,fnClick1); 
 
 oDiv.attachEvent( 
 "onclick" 
 ,fnClick2); 
 
 //DOM中，addEventListener(),removeEventListener()这些方法需要三个参数, 
 
 //事件名称，要分配的函数，true表示用于捕获阶段，false表示用于冒泡阶段 
 
 oDiv.addEventListener( 
 "onclick" 
 ,fnclick1, 
 false 
 ); 
 
 oDiv.addEventListener( 
 "onclick" 
 ,fnclick2, 
 false 
 ); 
 
 //事件对象,是window对象的一个属性event 
 
 oDiv.onclick= 
 function 
 (){ 
 
 var 
  oEvent=window.event; 
 
 } 
 
 oDiv.onclick= 
 function 
 (oEvent){} 
 
 //属性和方法，在IE和DOM当中 
 
 //相似性 
 
 //获取事件类型 
 
 var 
  sType=oEvent.type;  
 //返回类似"click"或"mouseover"之类的值。 
 
 function 
  handleEvent(oEvent){ 
 
 if 
 (oEvent.type== 
 "click" 
 ) 
 
 { 
 
 alert( 
 "clicked!" 
 ); 
 
 } 
 
 else 
  if 
 (oEvent.type== 
 "mouseover" 
 ){ 
 
 alert( 
 "mouse over" 
 ); 
 
 } 
 
 } 
 
 oDiv.onclick=handleEvent; 
 
 oDiv.onmouseover=handleEvent; 
 
 //在keydown,keyup事件中，可以使用keyCode属性获取按下的按键的数值代码。 
 
 var 
  iKeyCode=oEvent.keyCode(); 
 
 //例如Enter键为13，空格键为32，回退键为8. 
 
 //检测shift,alt,ctrl键是否被按下， 
 
 var 
  bshift=oEvent.shiftKey; 
 
 var 
  bAlt=oEvent.altKey; 
 
 var 
  bCtrl=oEvent.ctrlKey; 
 
 //获取客户端坐标,客户端区域是显示网页的窗口部分 
 
 var 
  iClientX=oEvent.clientX; 
 
 var 
  iClientY=oEvent.clientY; 
 
 //获取屏幕位置 
 
 var 
  iScreenX=oEvent.screenX; 
 
 var 
  iScreenY=oEvent.screenY; 
 
 // 
 
 //区别 
 
 //获取目标 
 
 //位于事件中心的对象称为目标 
 
 var 
  oTarget=oEvent.srcElement; 
 //IE 
 
 var 
  oTarget=oEvent.target; 
 //DOM 
 
 //获取字符代码 
 
 var 
  iCharCode=oEvent.keyCode; 
 //IE 
 
 var 
  iCharCode=oEvent.charCode; 
 //DOM 
 
 //然后可以用这个值来获取实际的值 
 
 var 
  sChar=string.fromCharCode(oEvent.charCode); 
 
 //如果不确定按下的键当中是否包含字符，可以使用isChar属性进行判断 
 
 if 
 (oEvent.isChar){ 
 
 var 
  iCharcode=oEvent.charCode; 
 
 } 
 
 //3.阻止某个事件的默认行为 
 
 //在用户右键点击页面时，阻止他使用上下文菜单. 
 
 document.body.oncontextmenu= 
 function 
 (oEvent){ 
 
 if 
 (isIE){ 
 
 oEvent=window.event; 
 
 oEvent.returnValue= 
 false 
 ; 
 
 } 
 
 else 
 { 
 
 oEvent.preventDefault(); 
 
 } 
 
 } 
 
 //停止事件复制 
 
 oEvent.cancelBubble= 
 true 
 ; 
 //IE 
 
 oEvent.stopPropagation(); 
 //mozilla 
 
 / 
 
 //事件的类型 
 
 //鼠标事件，键盘事件，HTML事件，突变事件。 
 
 //鼠标事件:click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove 
 
 <html> 
 
 <head> 
 
 <script type= 
 "text/javascript" 
 > 
 
 //打印出鼠标事件的各个类型 
 
 function 
  handleEvent(oEvent){ 
 
 var 
  oTextbox=document.getElementById( 
 "txt1" 
 ); 
 
 oTextbox.value+= 
 "\n" 
 +oEvent.type; 
 
 } 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <p>your mouse to click and double click the red square.</p> 
 
 <div style= 
 "width:100px;height:100px;background-color:red" 
  onmouseover= 
 "handleEvent(event)" 
 
 onmouseout= 
 "handleEvent(event) onmousedown=" 
 handleEvent(event) 
 " onmouseup=" 
 handleEvent(event) 
 " 
 
 onclick=" 
 handleEvent(event) 
 " ondbclick=" 
 handleEvent(event) 
 " id=" 
 div1 
 "></div> 
 
 <p><textarea id=" 
 txt1 
 " rows=" 
 15 
 " cols=" 
 50 
 "></textarea></p>  
 
 </body> 
 
 </html> 
 
 //一个很流行的改变图片的. 
 
 <img src=" 
 image1.jpg 
 " onmouseover=" 
 this 
 .src= 
 'image2.jpg' 
 " onmouseout=" 
 this 
 .src= 
 'image1.jpg' 
 "> 
 
 //事件的属性：坐标属性(clientX,clientY)，type属性，target或srcElement属性，shiftKey,ctrlKey,altKey,button属性 
 
 function handleEvent(oEvent){ 
 
 var oTextbox=document.getElementById(" 
 txt1 
 "); 
 
 oTextbox.value+=" 
 \n 
 "+oEvent.type; 
 
 oTextbox.value+=" 
 \n target is 
 "+(oEvent.target||oEvent.srcElement).id; 
 
 oTextbox.value+=" 
 \n at( 
 "+oEvent.clientX+" 
 , 
 "+oEvent.clientY+" 
 ) on the client 
 "; 
 
 oTextbox.value+=" 
 \n at( 
 "+oEvent.screenX+" 
 , 
 "+oEvent.screenY+" 
 ) on the screen 
 "; 
 
 oTextbox.value+=" 
 \n button down is 
 "+oEvent.button; 
 
 var arrKeys=[]; 
 
 if(oEvent.shiftKey) 
 
 arrKeys.push(" 
 shift 
 "); 
 
 if(oEvent.ctrlKey) 
 
 arrKeys.push(" 
 ctrl 
 "); 
 
 if(oEvent.altKey) 
 
 arrKeys.push(" 
 alt 
 "); 
 
 oTextbox.value+=" 
 \n keys down are 
 "+arrKeys; 
 
 } 
 
 //要触发dbclick事件，在同一个目标上要顺序发生以下事件： 
 
 //mousedown,mouseup,click,mousedown,mouseup.click,dbclick. 
 
 // 
 
 //键盘事件:keydown,keypress,keyup 
 
 //事件属性:keyCode属性,charCode属性(DOM),target或srcElement,shiftKey,ctrlKey,altKey, 
 
 <html> 
 
 <head> 
 
 <script type=" 
 text/javascript 
 "> 
 
 //打印出键盘标鼠事件的各个类型 
 
 function handleEvent(oEvent){ 
 
 var oTextbox=document.getElementById(" 
 txt1 
 "); 
 
 oTextbox.value+=" 
 \n 
 "+oEvent.type; 
 
 oTextbox.value+=" 
 \n target is 
 "+(oEvent.target||oEvent.srcElement).id; 
 
 oTextbox.value+=" 
 \n keycode is  
 "+oEvent.keyCode; 
 
 oTextbox.value+=" 
 \n charcode is  
 "+oEvent.charCode; 
 
 var arrKeys=[]; 
 
 if(oEvent.shiftKey) 
 
 arrKeys.push(" 
 shift 
 "); 
 
 if(oEvent.ctrlKey) 
 
 arrKeys.push(" 
 ctrl 
 "); 
 
 if(oEvent.altKey) 
 
 arrKeys.push(" 
 alt 
 "); 
 
 oTextbox.value+=" 
 \n keys down are 
 "+arrKeys; 
 
 } 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <p>your mouse to click and double click the red square.</p> 
 
 <p><textarea id=" 
 txtInput 
 " rows=" 
 15 
 " cols=" 
 50 
 " onkeydown=" 
 handleEvent(event) 
 " onkeyup=" 
 handleEvent(event) 
 " 
 
 onkeypress=" 
 handleEvent(event) 
 "></textarea></p> 
 
 <p><textarea id=" 
 txt1 
 " rows=" 
 15 
 " cols=" 
 50 
 " ></textarea></p> 
 
 </body> 
 
 </html> 
 
 //用户按一次字符按键时，会按以下顺序发生：keydown,keypress,keyup 
 
 //HTML事件 
 
 //load事件，页面完全载入后，在window对象上触发。img完全载入后在其上触发. 
 
 //unload事件，页面完全卸载后，在window对象上触发. 
 
 //error事件,javascript脚本出错时，在window对象上触发。img指定图像无法载入时，在其上触发. 
 
 //resize事件，scroll事件，focus事件，blur事件。 
 
 window.onload=function(){ 
 
 alert(loaded); 
 
 }       
 
 //与load和unload事件类似，resize事件的处理函数必须使用javascript代码分配给window对象或者HTML中分配给body元素. 
 
 <body onresize=" 
 alert( 
 'resizing' 
 ) 
 "> 
 
 //scroll事件,希望用户在卷动窗口时，确保某些内容一直在屏幕上可见. 
 
 //可与body元素的属性协用,scrollLeft,保存窗口在水平方向上卷动的距离，以及scrollTop，保存窗口在垂直方向上卷动的距离 
 
 window.onscroll=function(){ 
 
 var oWatermark=document.getElementById(" 
 divWatermark"); 
 
 oWatermark.style.top=document.body.scrollTop; 
 
 }   

 </script>

熔岩上的灌木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript事件处理

<script type="text/javascript"> //事件 //IE,冒泡型事件，DOM事件流，一次捕获过程一次冒泡过程。 //冒泡事件是从下往上，捕获事件从上往下. //DOM还支持文本节点的捕获 //事件处理函数/监听函数 varoDiv=document.getElementById
复制链接

扫一扫