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>
