1、
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之单击事件的几种处理方法</title> 8 <style type="text/css"> 9 .button { 10 width: 100px; 11 float: left; 12 text-align: center; 13 margin: 5px; 14 border: 2px solid; 15 font-weight: bold; 16 } 17 img { 18 margin-left: -150px; 19 margin-top:20px; 20 } 21 22 </style> 23 <script src="jquery-1.5.2.js" type="text/javascript"></script> 24 <script type="text/javascript"> 25 $(document).ready(function(){ 26 /*使用bind，把单击事件同时应用到2个按钮 27 * bind(eventType, data, handler) 28 * eventType： click、double-click、focus、blur 29 * data传递到事件处理函数进行处理的数据 30 * handler，事件处理函数 31 */ 32 $(\'.italic\').bind(\'click\', function(){ 33 alert("You\'ve clicked the " + $(this).text()); 34 }); 35 36 //直接附加事件 37 //$(\'.button\').click(function(){ 38 //alert("You\'ve clicked the " + $(this).text()); 39 //}); 40 41 //利用事件对象的目标属性 42 //$(\'.button\').click(function(event){ 43 //var $target = $(event.target); 44 //if($target.is(\'.bold\')) { 45 //alert("You\'ve clicked the bold button."); 46 //} 47 //else { 48 //alert("You\'ve clicked the italic button."); 49 //} 50 //}); 51 52 //添加双击事件 53 //$(\'.button\').dblclick(function(){ 54 //alert("You\'ve double clicked the " + $(this).text()); 55 //}); 56 57 //自动触发事件，由脚本触发事件而不是用户触发事件 58 //trigger(eventType) 59 $(\'.italic\').trigger(\'click\'); 60 61 /* 62 * 点击之后禁用按钮 63 * unbind(eventType, handler) 将要删除指定事件类型上的指定函数 64 * unbind(eventType) 65 * 对直接附件事件或者通过事件绑定都有效 66 */ 67 //$(\'.button\').unbind(\'click\'); 68 69 70 /* 71 * 处理鼠标事件：同样也可以bind、直接附加（也可以带event） 72 * 但是鼠标按下事件会屏蔽鼠标点击事件 73 */ 74 //$(\'.button\').bind(\'mousedown\', function(){ 75 //alert("The mouse is pressed over " + $(this).text()); 76 //}); 77 $(\'.button\').bind(\'mouseup\', function(){ 78 alert("The mouse is released over " + $(this).text()); 79 }); 80 $(\'.button\').bind(\'mouseover\', function(){ 81 //alert("The mouse is over " + $(this).text()); 82 }); 83 84 //查明哪个鼠标键被按下，好像有问题 85 //$(\'.button\').mousedown(function(event){ 86 //if(event.button==1){ 87 //alert(1); 88 //$(\'p\').text(\'Left mouse button is pressed\'); 89 //} 90 //else { 91 //alert(2); 92 //$(\'p\').text(\'Right mouse button is pressed\'); 93 //} 94 //}); 95 96 //查找鼠标按下时屏幕坐标 97 $(\'img\').mousedown(function(event){ 98 $(\'p\').text(\'Mouse is clicked at (\' + event.screenX + \',\' + event.screenY + ")"); 99 }); 100 }); 101 </script> 102 <body> 103 <span class="bold button">Bold Button</span> 104 <span class="italic button">Italic Button</span><br /> 105 <img src="1.JPG" /> 106 <p></p> 107 </body> 108 </html>