jQuery中的事件——《锋利的JQuery》

　　虽然利用原生的JavaScript事件能完成一些交互，但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。

1、加载DOM

　　在JavaScript中，通常用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。下面来看看这两种方法的不同之处：

　　1.1 执行时机

　　window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。而通过jQuery的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。jQuery中提供了一个与window.onload相同的方法——load()方法。

$(window).load(function(){ //编写代码 }) 等价于 window.onload = function() { //编写代码 } .

　　1.2 多次使用

　　window.onload方法只能使用一次，再次使用将会被重写。而$(document).ready().可以被多次使用.

　　1.3 简写方式

 /* 第一种 */

 $(document).ready(function() {

       //编写代码

  })

  /* 第一种 */

  $().ready(function() {

       //编写代码

  })

  /* 第三种 */

  $(function() {

       //编写代码

  })

2、事件绑定

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用off()方法。

提示：如需添加只运行一次的事件然后移除，请使用 one()方法。

语法：

$(selector).on(event,childSelector,data,function,map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

　　简写绑定事件：像click、mouseover、mouseout这类常用事件，jQuery为此提供了一套简写方法。

 $("#id").mouseover(function() {

       $(this).next().show();

 }).mouseout(function(){

       $(this).next().hide();

 });

3、合成事件

　　jQuery有两个合成事件——hover()方法和toggle()方法，类似前面讲过的ready()方法，hover()方法和toggle方法都属于jQuery自定义方法。

　　3.1 hover()方法

　　语法结构： hover(enter, leave)；

 $(function(){

      $("#id").hover(functioin(){

            $(this).next().show();

      },function(){

            $(this).next().hide();

      });

 });

　　3.2 toggle()方法

　　语法结构： toggle(fn1,fn2,...fnN);

　　toggle()方法在jQuery中还有另外一个作用：切换元素的可见状态。如果可见，单击会隐藏；反之亦然。

 $(function(){

      $("#id").toggle(function(){

            $(this).next().show();   //$(this).next().toggle();

      }，function(){

            $(this).next().hide();    //$(this).next().toggle();

      })

 })

4、事件冒泡

　　4.1 事件对象

　　由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，jQuery进行了封装，从而使得任何浏览器都能轻松地获取事件对象以及事件的一些属性。

　　4.2 停止事件冒泡

 $("#content").on("click",function(event){   // event： 事件对象

     var txt = $('#msg').html() +  "<p>外层div元素被单击。</p>";

     $('#msg').html(txt);

     event.stopPropagation();    // 停止事件冒泡

 });

　　4.3 阻止默认行为

　　网页中的元素有自己的默认行为，例如，单击超链接会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

 $("#submit").on("click",function(event){

     var username = $("#username").val();    // 获取元素的值

     if(username == ""){    //提示信息

         $("#msg").html("<p>文本框不能为空</p>");   //提示信息

         event.preventDefault();      // 阻止默认行为（表单提交）

     }

 });

附：并非所有主浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript弥补。jQuery不支持事件捕获，如需要，请直接使用原生JavaScript。

5、事件对象的属性

　　5.1 event.type

 $("a").click(function(event){

     alert(event.type);  //获取事件类型

     return false;   // 阻止链接跳转

 });

　　5.2 event.preventDefault()方法：阻止默认行为

　　5.3 event.stopPropagation()方法：阻止事件的冒泡

　　5.4 event.target：获取触发事件的元素

　　5.5 event.relatedTarget：在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素用event.relatedTarget来访问。event.relatedTarget在mouseover中相当于IE的event.fromElement,在mouseout中相当于IE的event.toElement，jQuery对其进行了封装，使之能兼容任何浏览器。

　　5.6 event.pageX和event.pageY：相对于页面文档的坐标

　　5.7 event.which：该方法作用是鼠标点击事件中获取鼠标的左、中、右键，返回数值。

　　5.8 event.metaKey：jQuery也封装event.metaKey属性，返回布尔值。

6、移除事件

　　在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件：

 /* 依次弹出 */

 $("p").on("click",function(){

     alert(1);

   }).on("click",function(){

     alert(2);

   }).on("click",function(){

     alert(3);

   });

　　移除按钮元素上以前注册的事件 —— off()方法

off() 方法通常用于移除通过on()方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one()方法。

语法:

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

7、模拟事件

　　7.1 常用模拟

 $("#btn").trigger("click");    //页面加载完毕后，立即执行点击事件

 $("#btn").click();   //和上面效果一样

　　7.2 触发自定义事件

　　trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称事件。

 $('#btn').on("myClick",function(){    //定义一个自定义事件

     alert("自定义事件执行");

 });

 $('#btn').trigger("myClick");   // 触发自定义事件

　　7.3 传递数据

　　trigger(type,[data])方法有俩个参数，第一个参数是要触发的事件类型，第二个是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调数来区别这次事件是代码触发还是用户触发。

 $('#btn').on("myClick",fucntion(event,message1,message2){   //获取数据

     $('#test').append("<p>"+message1+message2+"</p>");

 });

 $('#btn').trigger("myClick",["我的自定义","事件"]);  //传递俩个数据

　　7.4 执行默认操作

　　trigger()和triggerHandler()方法都可以触发事件程序执行，但后者不会执行浏览器默认操作。比如：

 /* 仅触发获取焦点事件程序，input不会获取焦点 */

 $('input').triggerHandler("focus");

8、其他用法

　　8.1 绑定多个事件类型：为一个元素一次性绑定多个事件类型

 /* 为一个元素一次性绑定多个事件类型 */

 $('div').on("mouseover mouseout",function(){

     $(this).toggleClass("over");

 });

 /* 和下面的相同 */

 $('div').on("mouseover",function(){

     $(this).toggleClass("over");

 }).on("mouseout",function(){

     $(this).toggleClass("over");

 });

　　8.2 添加事件命名空间，便于管理：为元素绑定的多个事件类型用命名空间规范起来。

 $('div').on("click.plugin",function(){

     $("body").append("<p>click事件</p>");

 });

 $('div').on("mouseover.plugin",function(){

     $("body").append("<p>mouseover事件</p>");

 });

 $('div').on("dblclick.plugin",function(){

     $("body").append("<p>dblclick事件</p>");

 });

 $('button').click(function(){

     $("div").off(".plugin");   //前面添加的事件都会被删除

 });

　　8.3 相同事件名称，不同命名空间执行方法：为元素绑定相同的事件类型，然后以命名空间的不同按需调用。

 $('div').on("click",function(){

     $('body').append("<p>click事件</p>");

 });

 $('div').on("click.plugin",function(){

     $('body').append("<p>click.plugin事件</p>");

 });

 $('button').click(functiion(){

     $('div').trigger("click!");    //注意click后面的感叹号

 });

 /* 当点击<div>，会触发click事件和click.plugin事件。如果只点击<button>，则只触发click事件。注意：trigger（"click"）后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。 */

　　事件部分到此结束，下期更新jQuery中的动画！

巴特西

jQuery中的事件——《锋利的JQuery》

语法:

最新文章

热门文章