jQuery技术之事件处理

时间：2022-10-19 15:58:45


1：事件流模型

     如果单击一次在HTML页面上的某个按钮，不仅会触发按钮的单击事件，还将触发按钮所属容器(div、span)等的单击事件，同时还将触发父级容器的

单击事件，直至body、html和document，这一动作造成一脸串的事件触发，形成一个事件流。因为事件流模型不同，总体可以分为冒泡型事件流和捕获型

事件流两种

    1.1 冒泡型事件流

          冒泡型事件流将从下到上一级一级的触发事件流。

     1.2 捕获型事件流

          捕获型事件流将从上到下一级一级的触发事件流。

  一般使用的是冒泡型事件流


2：事件类型

      2.1 鼠标事件

          onclick, ondbclick(双击)、onmousedown(按下鼠标左键时触发)、onmouseup(释放鼠标左键)、onmouseover, onmousemove, onmouseout(光标离开某对象范围)

      2.2 键盘事件

       onkeypress: 当键盘上的某个键被按下以后触发此事件

       onkeydown：当键盘上的某个键被按下时触发此事件

       onkeyup：当键盘上的某个按键被释放时触发此事件      

       onkeydown>onkeypress>onkeyup


      2.3 页面事件

          onerror：出现错误时触发此事件

          onload：   页面内容完成时触发此事件

          onresize：当浏览器的窗口大小被改变时触发此事件

          onscroll：浏览器的滚动条位置发生变化时触发

          onunload：当前页面被改变时触发

     

         2.4 表单事件

             onblur：当前元素失去焦点时触发

             onchange：当前元素失去焦点并且元素的内容发生改变时触发此事件

             onfocus：当某个元素获得焦点时触发

             onsubmit：当某个表单被提交时触发此事件


3：处理事件

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClickEvent</title>

<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ClickEvent.js"></script>

<style type="text/css">
div{ margin:20px; background-color:#096; border:solid 1px #000;}
p{ width:80px;  margin:15px; padding:3px; background-color:#FC3; border:solid 1px #960;}
</style>
</head>

<body>
<input type="button" id="btnAdd" value="Add" />
<div id="div">
</div>
</body>

</html>


ClickEvent.js
// JavaScript Document


/* 页面加载事件处理程序 */
window.onload = function(){
  var btnAdd = document.getElementById("btnAdd");
  btnAdd.onclick = btn_onclick;
  btnAdd.onmousedown = btn_onmousedown;
  btnAdd.onmouseup = btn_onmouseup;
}

/* 鼠标单击事件处理程序 */
function btn_onclick(){
  document.getElementById("div").innerHTML += "<p>Click</p>";
}

/* 鼠标按下事件处理程序 */
function btn_onmousedown(){
  document.getElementById("div").innerHTML += "<p>MouseDown</p>";
}

/* 鼠标弹起事件处理程序 */
function btn_onmouseup(){
  document.getElementById("div").innerHTML += "<p>MouseUp</p>";
}


效果：

jQuery技术之事件处理


4：jQuery中的事件

    4.1 DOM的载入事件

        jQuery提供了一个DOM加载完成的事件，即ready事件，ready事件是一个可以在DOM加载完成后执行的事件，该事件可以绑定多个响应函数，这个事件

是window.onload事件的替代品，ready事件是在所有DOM标记就绪时就被触发，而不一定与之关联的其他资源文件也能就绪。

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ReadyEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ReadyEvent.js"></script>

<style type="text/css">
div{ margin:20px; background-color:#096; border:solid 1px #000; }
p{ width:120px;  margin:15px; padding:3px; background-color:#FC3; border:solid 1px #960;}

</style>
</head>

<body>
<div id="show"></div>
<input />
</body>
</html>


ReadyEvent.js
// JavaScript Document


/* document 对象加载成功 */
$(document).ready(function(){
  $("#show").append("<p>document Ready</p>");
});

/* window 加载成功 */
$(window).ready(function(){
  $("#show").append("<p>window Ready</p>");
});

/* ID 属性为show的DIV标签加载成功 */
$("#show").ready(function(){
  $("#show").append("<p>#show Ready</p>");
});

/* html 标签加载成功 */
$("html").ready(function(){
  $("#show").append("<p>html Ready</p>");
});

/* body 标签加载成功 */
$("body").ready(function(){
  $("#show").append("<p>body Ready</p>");
});

/* input 标签加载成功 */
$("input").ready(function(){
  $("#show").append("<p>input Ready</p>");
});


效果图：

jQuery技术之事件处理

根据执行结果，不难发现，程序中特意乱序排列的事件绑定代码，这里按代码中的排序输出，说明ready事件没有先后顺序，它们是在同一时刻触发的，

也就是说，不管把ready事件绑定到哪个DOM上面，都将在所有DOM元素上加载完成的时候触发。

 

    4.2 键盘事件

        

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KeyboardEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/KeyboardEvent.js"></script>
<style type="text/css">

body{ padding:0 25px; }
div{ margin:20px 0; background-color:#096; border:solid 1px #000;}
p{ width:120px;  margin:15px; padding:3px; background-color:#FC3; border:solid 1px #960;}
#content{ width:350px; height:65px; border:solid 1px #ccc;}

</style>
</head>

<body>
<h2>键入文本内容：</h2>
<!-- 接收输入内容的文本域 -->
<textarea id="content">
</textarea>
<!-- 打印执行结果 -->
<div id="show">
</div>
</body>
</html>


KeyboardEvent.js
$(function(){       
$("#content").keydown(function(){
/* 键盘某键被按下时 */
$("#show").append("<p>down " + $("#content").val().length + "</p>");
  })
  .keypress(function(){
/* 键盘某键被按下后 */
$("#show").append("<p>Press " + $("#content").val().length + "</p>");
  })
  .keyup(function(){
/* 键盘某键被松开 */
$("#show").append("<p>Up " + $("#content").val().length + "</p>");
  });  
});


效果图：

   

jQuery技术之事件处理


4.3 鼠标事件

      4.3.1 mousedown和mouseup事件

            

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>TrendsButtonEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/TrendsButtonEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
div{ margin:20px 0; background-color:#096; border:solid 1px #000;}
p{ width:120px; margin:15px; padding:3px; background-color:#FC3; border:solid 1px #960;}
</style>
</head>

<body>

<!-- 图片按扭 -->
<img id="btnEvent" src="Images/btn1.jpg" width="122" height="121" />
<!-- 显示提示信息 -->
<div id="show">
</div>

</body>
</html>


TrendsButtonEvent.js
$(function(){
$("#btnEvent").mousedown(function(){
/* 鼠标按下事件 */
$(this).attr("src","Images/btn2.jpg");
$("#show").html("<p>鼠标按下</p>");
  })
  .mouseup(function(){
/* 鼠标松开事件 */
$(this).attr("src","Images/btn1.jpg");
$("#show").html("<p>鼠标松开</p>");
  });
});


jQuery技术之事件处理



    4.3.2 mousemove事件、mouseover事件、和mouseout事件

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>MouseMoveEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/MouseMoveEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
#show{ border:solid 1px #000; width:200px; background-color:#ddd; color:#000;}
</style>
</head>

<body>

<!-- 显示提示信息 -->
<div id="show">
<p style="font-weight:700;">提示信息：</p>
</div>

</body>
</html>


MouseMoveEvent.js
// JavaScript Document

$(function(){
  $("#show").mouseover(function(){            
    /* 鼠标进入事件 */
    $(this).append("<p>鼠标进入</p>");
    $(this).css("background-color", "#333");  //修改背景颜色
    $(this).css("color", "#fff");  //修改文本颜色
  })
  .mousemove(function(){
    /* 鼠标移动事件 */
    $(this).append("<p>鼠标移动</p>");
  })  
  .mouseout(function(){
    /* 鼠标离开事件 */             
    $(this).append("<p>鼠标离开</p>");
    $(this).css("background-color", "#ddd");  //修改背景颜色
    $(this).css("color", "#000");  //修改文本颜色
  });
});


效果图：

jQuery技术之事件处理


4.3.3 表单事件

    focus: 控件获得焦点时触发

    blur: 控件失去焦点时触发

    change: 控件值改变时触发

    select: 空间内容被选中时触发

    submit: 表单提交时触发

    focusin: 当前元素或其子元素获得焦点时触发

    focusout: 当前元素或其子元素失去焦点时触发

   focus事件和blur事件：

      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FocusEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/FocusEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
input{ width:180px; border:solid 1px #ccc;  margin:0 0 10px 0; }
input{ font:Arial; font-size:12px; color:#777; }
.input_focus{ font-size:13px; color:#000; border:solid 2px #069; height: 20px;}
</style>
</head>

<body>

<form>
Name:<br />
<input value="zhangsan" /><br />
Age:<br />
<input value="23" /><br />
Sex:<br />
<input value="male" /><br />
Address:<br />
<input value="zhengzhou henan china" /><br />
</form>

</body>
</html>


 

FocusEvent.js
$(function(){
  $("input").focus(function(){
    /* 获得焦点 */
    $(this).addClass("input_focus");
  })
  .blur(function(){
    /* 失去焦点 */
    $(this).removeClass("input_focus");
  });
});

上述代码分别为控件绑定了获得焦点的事件focus和失去焦点的事件blur，并分别将该控件添加或者删除一个类



效果图：

  

jQuery技术之事件处理

jQuery技术之事件处理

 

   change事件：

      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>ChangeEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ChangeEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
input{ width:180px; border:solid 1px #ccc;  margin:0 0 10px 0; }
input{ font:Arial; font-size:12px; color:#777; }
</style>
</head>
<body>

<form>
UserName:<br />
<input name="username" /><br />
Age:<br />
<input /><br />
Sex:<br />
<input /><br />
Address:<br />
<input /><br />
</form>

</body>
</html>


ChangeEvent.js
$(function(){
$("input[name=username]").change(function(){
/* 值改变时触发 */
alert("用户名文本框内容已改变。");
  });
});


效果图：

  

jQuery技术之事件处理


select事件

      

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SelectEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/SelectEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
input{ margin:10px; }
</style>
</head>

<body>

<input id="txtSource" value="SelectEvent" />
<br />
<input id="txtTarget" />

</body>
</html>



SelectEvent.js
$(function(){
  $("#txtSource").select(function(){
    /* 值被选中时触发 */
    var selection = document.selection;  //获得页面的 selection 对象
    if (selection && selection.type == 'Text') {
      /* 如果 selection 对象不为 null ，并且 type 属性为 Text ，执行该代码 */
      var word = selection.createRange();  //创建一个 TextRange 对象
      var text = word.text;  //获得 TextRange 对象的 text 属性
      $("#txtTarget").val(text);  //设置目标文本框中的值
    }
  });
});


chrom、IE不支持此方法

效果图：

 

jQuery技术之事件处理

submit事件

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SubmitEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/SubmitEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>

<body>

<form action="http://www.baidu.com" method="post">
<input type="text" /><br />
<input type="submit" value="Submit" />
</form>

</body>
</html>


SubmitEvent.js
$(function(){
  $("form[action='http://www.baidu.com']").submit(function(){
    /* 表单提交事件触发 */
    alert("表单提交事件触发！");
  });
});


效果图：

jQuery技术之事件处理


focusin和focusout事件

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ChildrenFocusEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ChildrenFocusEvent.js"></script>

<style type="text/css">
body{ padding:20px; }
td{ font-size:13px; padding:3px; }
input{ margin:0 5px; }
</style>
</head>

<body>

<h2>用户注册</h2>
<form>
<table cellspacing="0" border="0">
<tr>
<td>用户名：</td>
<td><input /><span>6-20位字母、数字、下划线组合</span></td>
</tr>
<tr>
<td>密　码：</td>
<td><input /><span>5-16位任意字符</span></td>
</tr>
<tr>
<td>姓　名：</td>
<td><input /><span>请填写您的直实姓名</span></td>
</tr>
<tr>
<td>年　龄：</td>
<td><input /><span>请填写您的真实年龄</span></td>
</tr>
<tr>
<td>邮　箱：</td>
<td><input /><span>请填写您的电子邮件地址，确认身份时需要</span></td>
</tr>
<tr>
<td>电　话：</td>
<td><input /><span>请填写您的家庭电话或者手机号码</span></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" /></td>
</tr>
</table>
</form>

</body>
</html>


ChildrenFocusEvent.js
$(function(){
  $("td span").css('color','#aaa');  //初始化表格里的span元素内的字体颜色为浅灰

  $("td").focusin(function() {
    /* 子元素获得焦点时 */
      $(this).find("span").
      css('color','#000').
      css('font-weight','600');  //设置当前表格中的span元素颜色为黑色和粗细程度为600
  });

  $("td").focusout(function() {
    /* 子元素失去焦点时 */
      $(this).find("span").
      css('color','#aaa').
      css('font-weight','100');  //设置当前表格中的span元素颜色为浅灰和粗细程度为100
  });
});


效果图：

 

jQuery技术之事件处理

4.3.4 其他事件

    load：当该元素加载就绪后触发

    upload: 当该元素卸载后触发

    error：当该元素发生错误时触发

    resize：当浏览器改变大小时触发

    scroll：当浏览器滚动条位置改变时触发

  

   load和unload事件

     HTML页面的生命周期中包括页面的加载和卸载的过程。

     在页面加载的时候，应用程序可能需要对页面上内容进行初始化，当页面卸载的时候，应用程序可能还需要对页面占用的资源进行销毁，所以

在开发应用程序时经常用到这两个事件

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PageLoadEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/PageLoadEvent.js"></script>

<style type="text/css">
body{ padding:20px; }
</style>
</head>

<body>

<h1>PageLoadEvent</h1>

</body>
</html>


PageLoadEvent.js
$(window).load(function(){
  alert("window Load");
});
$(window).unload(function(){
  alert("window unLoad");
});

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PageLoadEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/PageLoadEvent.js"></script>

<style type="text/css">
body{ padding:20px; }
</style>
</head>

<body>

<h1>PageLoadEvent</h1>

</body>
</html>


PageLoadEvent.js
$(window).load(function(){
alert("window Load");
});
$(window).unload(function(){
alert("window unLoad");
});


在浏览器中运行该页面：


效果图：

   

jQuery技术之事件处理


error事件

    在HTML中，任何时候都可能会出现这样或者那样的错误，所以JavaScript为每个DOM元素提供了一个捕获错误的事件onerror

    同样的，jQuery对其进行了封装，每个jQuery对象都可以绑定一个error事件，来捕获对象执行时发生的错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ErrorEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ErrorEvent.js"></script>

<style type="text/css">
body{ padding:20px; }
</style>
</head>

<body>

<img src="http://www.baidu.com/img/baidu_logo"/>
<hr /><!-- 这里有个水平线 -->
<img src="http://www.baidu.com/img/baidu_logo"/>
<hr /><!-- 这里有个水平线 -->
<img src="http://www.baidu.com/img/baidu_logo.gif"/>

</body>
</html>


页面中3个img标签，src属性都将引用百度网站的Logo图片，中间使用水平线分隔开，但这里故意将前两个img标签的图片路径输入错误，程序在执行到这两个img标签时

应该会各抛出一个错误


ErrorEvent.js
$(function(){
$("img:first").error(function(){
$(this).hide();  //将当前元素隐藏
  });  
});


应用程序将第一个img标签抛出错误的时侯将其隐藏，也就是说第一个图片将不在页面显示。

jQuery技术之事件处理


resize事件

     resize事件是在一个元素大小发生改变的时候触发的事件

     应用程序开发中经常需要检测浏览器窗口的大小变化，所以下面就以windows对象的resize事件为例说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ResizeEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ResizeEvent.js"></script>
<style type="text/css">
body{ padding:30px; }
</style>
</head>

<body>
<h1>请看状态栏信息</h1>
</body>
</html>


   

ResizeEvent.js
$(function(){
$(window).resize(function(){
/* 改变大小时触发 */
var width = $(this).width();  //获得宽度
var height = $(this).height();  //获得高度
var status_msg = "Size : " + width + " * " + height;  //初始化状态栏信息
$(window).attr("status", status_msg);  //设置浏览器状态栏信息
  })
}


scroll事件

   scroll事件是容器对象的滚动条位置变化的事件。HTML中所有可以包含子元素的控件都可以使用该事件，如window、div、td、span等

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ScrollEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/ScrollEvent.js"></script>

<style type="text/css">

body{ padding:20px; }
#myId{ width:300px; height:200px; word-break:keep-all; border:solid 1px #999; overflow:scroll; }

</style>
</head>

<body>

<div id="myId">
应用程序要交互，就需要合理的分析用户的操作，并做出相应的响应。
做为应用程序开发人员，就要根据用户的各种操作，来分析用户的意图，满足用户的需要。所以，合理的对事件进行处理对于所有需要交互的应用程序来说是非常重要的事情。
JavaScript中提供了非常强大的事件机制，可以很好的为应用程序的用户体验服务。但是由于浏览器处理事件机制的差异，写JavaScript程序的时候不得不写很多代码以便达到各浏览器之间的兼容。
不过所幸jQuery对JavaScript进行了封装，使不必再考虑各种浏览器的差异，就可以很轻松的写出功能强大的代码。
</div>

<!-- 用于显示提示信息 -->
<span id="show"></span>


</body>
</html>
word-break:keep-all;

设置中文不换行，这样保证有较长的文本行，使容器具有横向滚动条 

overflow:scroll;

设置div的内容溢出样式为scroll，即内容区域大于容器面积时会显示滚动条

ScrollEvent.js
$(function(){
$("#myId").scroll(function(){
/* 滚动条位置变换时触发 */
var msg = $(this).attr("scrollTop") + " : " + $(this).attr("scrollLeft");
$("#show").html(msg);
  })
});


效果图：

 

jQuery技术之事件处理


5：jQuery事件集合特性

  在传统的js事件机制中，一个事件只能绑定一个事件处理程序，而jQuery实现了集合型的事件机制，也就是说同一个对象的同一个事件，可以为其绑定多个

事件处理程序，这些事件处理程序将一起执行，互不冲突。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>EventSet</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/EventSet.js"></script>

<style type="text/css">
body{ padding:20px; }
#show{ border:solid 1px #888; background-color:#eee; }
</style>
</head>

<body>

<button>Button</button>
<div id="show"></div>

</body>
</html>


EventSet.js
function clickEvent1(){
$("#show").append("<p>ClickEvent1</p>");
}

function clickEvent2(){
$("#show").append("<p>ClickEvent2</p>");
}

/** /
window.onload = function(){
  var btn = document.getElementsByTagName("button")[0];
  btn.onclick = clickEvent1;
  btn.onclick = clickEvent2;  
}
/* */


/**/
$(document).ready(function(){
$("button").
click(clickEvent1).
click(clickEvent2);
});


程序将两个方法作为事件处理程序依次绑定到按钮的单击事件上，还可以绑定更多个事件处理程序，都将会依次全部执行。

效果图：

   

jQuery技术之事件处理


6：jQuery的事件处理

    6.1 绑定事件

         6.1.1 <type>(fn)方法

               $("button").click(function() {});

         6.1.2 bind(map)方法

              可以一次为对象绑定多个事件，参数为"键(事件类型)/值(事件处理程序)"对的集合

             为所有的文本框添加焦点获取和丢失的事件

              $("input[type='text']").bind({

                          focus: function() {},

                         blur: function() {}

              });

            6.1.3 bind(type, [data], fn)方法

                 在为对象绑定事件的同时，为事件处理程序传递额外的参数

                <button>Button</button>

               $(document).ready(function() {
                          $("button").bind("click", 

                                 {

                                       arg1: '2012', 

                                       arg2: '10.1'

                                 },   

                              function(event) {

                                    alert("arg1:" + event.data.arg1 + " arg2: " + event.data.arg2);

                             }

                        );

                });

           程序中为命令按钮的单击事件传入名为arg1和arg2的两个参数，然后在事件处理程序里使用event对象的data属性获取参数集合。

       6.1.4 one(type, [data], fn)方法

               将为对象绑定一个指定类型的一次性的方法处理程序，同样，该方法可以传递参数。

       6.1.5 hover(over, out)方法

              是要绑定在鼠标盘旋到该DOM对象上方的时候的事件处理程序，其中需要两个参数，就是最常用的两个被鼠标盘旋的事件，即mouseover事件和

      mouseout事件

          

$(document).ready(function() {
                   $(".p_box").hover(function() {
                                /** Function Boby**/
                      }, function() {
                               /** Function Body**/
                       }); 
            });
          6.1.6 toggle(fn1, fn2, ...)
               它的作用是在被单击的时候依次循环的调用参数传递过来的函数列表。
<button>Button</button>
                 $(document).ready(function() {
                       $("button").toggle(function() {
                                    $(this).append("1");
                        }, 
                       function() {
                                 $(this).append("2");
                         }, 
                        function() {
                                 $(this).append("3");
                           }
                      );
                 });

             6.1.7 live(type, fn)方法

                 该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

               前面介绍的事件绑定方法只为执行该绑定操作的时候满足条件的对象绑定该事件，而live方法绑定的事件处理程序将响应所有满足条件的对象，

        无论是现在满足条件对象还是未来经过某些操作后满足条件的对象。

            

<button class="btn">Button</button>
<button id="btn2"></button>
            使用bind方法绑定单击事件 
                       $(document).ready(function() { 
                              $(".btn").bind("click", function() {
                                        //绑定单击事件
                                       alert("Click Button");
                             });
                         $("#btn2").addClass("btn"); //添加一个btn类
                      });                           
               使用live方法绑定单击事件
                      $(document).live("click", function() {
                                  //绑定单击事件
                                  alert("Click Button");
                       });
                       $("#btn2").addClass("btn");  //添加一个btn类
                    });

            以上两段代码的执行效果是有区别的，第一段使用bind方法绑定的单击事件，只应用到了第一个按钮中，也就是说单击第二个按钮的时候程序没有反映，

   因为绑定的时候只有第一个按钮具有值为btn的class属性，第二段使用live方法绑定单击事件，两个按钮都将绑定单击事件处理程序，也就是说单击两个按钮

  中的任意一个都会弹出Click Button对话框，除了这两个按钮，如果页面中动态添加btn类的DOM元素，可以直接使用该事件处理程序。


7：删除事件

          jQuery提供了2个删除事件处理程序的方法，分别如下：

            7.1 unbind([type], data)方法

                删除匹配对象的事件处理程序，对应bind方法，它可以删除所有以bind方式绑定的自定义事件处理程序

                $("#btn1").unbind("click");

                $("#btn1").unbind("click", btnClick);

            7.2 die([type][,fn])方法

                  die方法与live方法对应，用于解除用live注册的自定义事件 ， type用于指定要删除的事件类型，fn用于指定要删除的事件处理程序的名称。

 

8：模拟操作

        jQuery模拟用户操作可以有以下3种方法：

           8.1 <type>()方法

                   这个方法绑定事件中的快捷事件，直接使用事件类型作为方法名触发该事件

                  $("button").click();   

           8.2 trigger(type[, data])方法

                 是一个触发器方法，将触发对象的指定类型的事件

                例子1： var op = "click";

                               $("button").trigger(op);

                例子2： $("button").click(function(event, arg1, arg2) {  //为命令按钮绑定了以下事件处理程序

                                           /*Function Body*/

                                 });

                              该事件处理程序需要一些参数，可以使用trigger方法的data参数传递这些参数，代码如下：

                               $("button").trigger("click", ["Value1", "Value2"]); //就可以把字符串"Value1"和字符串"Value2"分别传递给参数arg1和arg2。

              8.3 triggerHandler(type[, data])方法

                    将触发对象的指定事件类型的所有处理程序，该方法和trigger方法的表现行为非常类似，但是二者有以下区别：

                  *该方法不会触发浏览器的默认事件

                  *该方法只触发jQuery对象集合中的第一个元素的事件处理程序

                  *该方法不会触发事件冒泡

                   *该方法返回的是事件处理程序的返回值，而不是可链接的jQuery对象

                    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TriggerEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/TriggerEvent.js"></script>

<style type="text/css">
body{ padding:20px; }
#show{ border:solid 1px #999; background-color:#eee; }
p{ margin:8px; border:dotted 1px #ccc; font-size:13px; }
</style>
</head>

<body>

<div id="buttonParent">
<button name="第1个按扭">Button</button>
<button name="第2个按扭">Button</button>
</div>
<hr /><!-- 这是一个水平线 -->
<input type="button" value="触发" />
点击该按扭触发前面两个Button的单击事件
<br /><br /><!-- 这是2个换行符 -->
<div id="show">
</div>

</body>
</html>
TriggerEvent.js
$(function(){
$("button").click(function(){
var msg = "<p>" + $(this).attr("name") + 
"被单击了（第一个事件处理程序执行）</p>";
$("#show").append(msg);
  });

$("button").click(function(){
var msg = "<p>" + $(this).attr("name") + 
"被单击了（第二个事件处事程序执行）</p>";
$("#show").append(msg);
  });

$("#buttonParent").click(function(){
var msg = $("#show").html() +
"<p>按扭父容器DIV被单击了</p>";
$("#show").html(msg);
  });
});

$(function(){
$("input[type='button']").click(function(){
$("button").triggerHandler("click");
  });
});


程序执行的有问题，虽然只是触发了集合中的第一个对象的click事件，但是也冒泡触发了父级元素的同类事件。

  

jQuery技术之事件处理


9：jQuery事件对象

      jQuery在遵循W3C标准的同时，对事件对象进行了封装，使得事件对象的使用方法具有更好的兼容性。

      在使用jQuery的事件对象时，会将封装后的事件对象作为事件处理程序的第一个参数传入，代码如下：

          $("button").click(function(event) {/*Function Body*/});

                    

               jQuery事件对象的属性

名称

说明

type

获得该事件对象的事件类型，如click、focus、mouseover等

target

获得事件触发者(DOM对象)

data

获得调用事件时传入的额外参数集合

relatedTarget

获得触发鼠标事件的DOM元素

currentTarget

获得当前DOM元素(等同于this关键字)

pageX/pageY

获得鼠标事件中，鼠标光标相对于页面左上角的位置

result

获得上一个事件处理函数返回的值

timeStamp

获得事件发生的事件戳

 

                      jQuery事件对象的方法

名称

说明

preventDefault()

阻止默认的事件行为

isDefaultPrevent()

是否执行过preventDefault()方法

stopPropagation

停止事件冒泡

isPropagationStopped()

是否调用了stopPropagation()方法

stopImmediatePropagation()

中止处理该事件，该方法将停止该事件的其他事件处理程序，并且停止事件冒泡

isImmediatePropagationStopped()

是否调用了stopImmediatePropagation()方法

                 

获得鼠标的位置：

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>EventObject</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/EventObject.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>

<body>
当前鼠标位置是：
<span id="show"></span>
</body>
</html>


EventObject.js
$(function(){
$(document).mousemove(function(event){
/* 鼠标在页面内移动 */
var msg = event.pageX + "  " + event.pageY;  //获得鼠标坐标
$("#show").html(msg);
  });  
});


效果图：

 

jQuery技术之事件处理











  







 



       






















    





   




  










 



 

标签：

相关文章