jquery的事件处理之单击事件的几种处理方法 bind，unbind，click，unclick，trigger

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>
posted on 2017-01-21 22:22 Sharpest 阅读(696) 评论(0) 收藏举报