jQuery学习笔记6

事件操作

1.页面载入

1. ready(fn);

   当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM就绪能够读取并操纵时立即调用你所绑定的函数。

   (请确保在 元素的onload事件中没有注册函数，否则不会触发+(document).ready()事件。∗∗∗∗可以在同一个页面中无限次地使用(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。)

2. $(fn);

   是$(document).ready() 的简写。

2.事件处理

1. bind(type,[data],function);

   为每个匹配元素的特定事件绑定事件处理函数。

   type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如”click”或”submit”，还可以是自定义事件名。

   data:作为event.data属性值传递给事件对象的额外数据对象

   fn:绑定到每个匹配元素的事件上面的处理函数

   $('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered');});$("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");},   mouseout:function(){$("body").css("background-color","#FFFFFF");}  });

   ​

2. one(type,[data],fn);

   为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数，用完即删。

   在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

   多数情况下，可以把事件处理函数定义为匿名函数。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）

   type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

   data:将要传递给事件处理函数的数据映射

   fn:每当事件触发时执行的函数。

   ​

3. unbind(type,[fn]);

   bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。

   ​

4. on(events,[selector],[data],fn);

   在选择元素上绑定一个或多个事件的事件处理函数。

   on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

   events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。

   selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

   data:当一个事件被触发时要传递event.data给事件处理函数。

   fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

   $("p").on("click", function(){alert( $(this).text() );});function myHandler(event) {alert(event.data.foo);}$("p").on("click", {foo: "bar"}, myHandler);

   ​

5. off(events,[selector],[fn]);

   在选择元素上移除一个或多个事件的事件处理函数。

   ​

6. trigger(type,[data]);
   在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

   你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。

   事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。

   jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。

   $("form:first").trigger("submit")$("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2);});$("p").trigger("myEvent", ["Hello","World!"]);

   ​

7. triggerHandler(type,[data]);

   这个方法会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

   这个方法的行为表现与trigger类似，但有以下三个主要区别：

   * 第一，他不会触发浏览器默认事件。

   * 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

   * 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

   ​

3.事件委派

1. live(type,[data],fn);

   给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

   $('.clickme').live('click', function() { alert("Live handler called."); });

   事件委托

   .live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

   1. 生成一个click事件传递给DOM来处理
   2. 由于没有事件处理函数直接绑定在
      上，所以事件冒泡到DOM树上
   3. 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
   4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
   5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest(‘.clickme’) 能否找到匹配的元素来实现的。
   6. 如果找到了匹配的元素，那么调用原始的事件处理函数。

   由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

   ​

2. die(type,[fn]);

   从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

   如果不带参数，则所有绑定的live事件都会被移除。

   你可以解除用live注册的自定义事件。

   如果提供了type参数，那么会移除对应的live事件。

   如果也指定了第二个参数function,则只移出指定的事件处理函数。

   function aClick() {     $("div").show().fadeOut("slow"); } $("#unbind").click(function () {     $("#theone").die("click", aClick) });

3. delegate(selector,[type],[data],fn)

   指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

   selector:选择器字符串，用于过滤器触发事件的元素。

   type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。

   fn:当事件发生时运行的函数

   ​

   delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。

   以下两段代码是等同的:

   $("table").delegate("td", "hover", function(){    $(this).toggleClass("hover");});

   $("table").each(function(){    $("td", this).live("hover", function(){              $(this).toggleClass("hover");    });    });

   ​

4. undelegate([sel,[type],fn])

   删除由 delegate() 方法添加的一个或多个事件处理程序。

   ​

4.事件切换

1. hover([over,]out); over和out分别代表两个函数

   一个模仿悬停事件的方法。

   $("td").hover( function(){   $(this).addClass("hover"); }, function(){$(this).removeClass("hover");     });

   ​

2. toggle([speed],[easing],[fn]);

   用于绑定两个或多个事件处理器，以响应被选元素的轮流click事件。

   speed: 隐藏/显示 效果的速度。默认是 “0”毫秒。可能的值：slow，normal，fast。”

   easing:(Optional)： 用来指定切换效果，默认是”swing”，可用参数”linear”

   fn:在动画完成时执行的函数，每个元素执行一次。