jQuery(六)、事件

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

1 页面载入

　　1、ready(fn)

　　当DOM载入完后绑定一个要执行的函数。

　　这是事件模块中最重要的一个函数，可以极大地提高web应用程序的响应速度。

$(document).ready(function(){......});
// $(document).ready()的简写，同时内部的jQuery代码依然使用$作为别名，而不管全局的$为何
$(function($){.......});

2 事件处理

　　1、on(events, [selector], [data], fn)

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

　　参数：

　　(1) events, [selecrot], [data], fn

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

　　　　selector:一个用于过滤触发事件的选择器字符串。

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

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

　　2、off(events, [selector])

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

　　off()方法移除用 on()绑定的事件处理程序。

　　3、bind(type, [data], fn)

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

　　参数：

　　(1) type, [data], function(eventObject)

　　　　type:含有一个或多个事件类型的字符串，多个用空格分隔。

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

　　　　fn:函数。false值也可以做为一个函数的简写，返回false。

　　(2) events：一个或多个事件类型的字符串和函数的数据映射。

// 同时绑定多个事件类型/处理程序
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},
  mouseout:function(){$("body").css("background-color","#FFFFFF");}
});

　　4、one(type, [data], fn)

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

　　5、trigger(type, [data])

　　在每一个匹配的元素上触发某类事件。

　　参数：

　　(1) type, [data]

　　　　type:一个事件对象或者要触发的事件类型

　　　　data:传递给events.data的附加参数

　　6、triggerHandler(type, [data])

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

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

　　　　- 它不会触发浏览器默认事件。

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

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

　　7、unbind(type, [data | fn])

　　bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

var foo = function () {
  // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

3 事件委派

　　1、live(type, [data], fn)

　　jQuery给所有匹配的元素附件一个事件处理函数，即使这个元素时以后再添加进来的也有效。

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

　　事件委托： 绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live的事件处理函数不会绑定在元素上，而是把它作为一个特殊的事件处理函数，绑定在 DOM 数的根节点上。

　　2、die([type, [fn]])

　　从元素中删除先前用 live() 绑定的事件。

　　参数：

　　(1) die() ：异常所有live() 绑定的事件。

　　(2) type,[, fn]

　　　　type:要移除的一个或多个事件类型，多个用空格分隔。

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

　　指定的元素(属于被选元素的子元素)添加一个或多个事件处理函数

　　参数：

　　(1) selector:一个用于过滤的选择器字符串。

　　(2) type:事件类型，多个用空格分隔。

　　(3) data：传递到函数的额外data。

　　(4) fn：函数

　　4、undelegate([selector, [type], fn])

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

　　参数：

　　(1) selector:一个用于过滤的选择器字符串。

　　(2) type:事件类型，多个用空格分隔。

　　(3) fn：函数

　　(4) undelegate()：删除所有用delegate() 方法添加的事件处理程序。

4 事件切换

　　1、hover([over,] out)

　　一个模范鼠标悬停事件的方法。

　　参数：

　　(1) over,out：鼠标移动到一个匹配的元素上面时，会触发over函数，移出是会触发out函数

　　(2) out：移入或移出触发函数

　　2、toggle([speed], [easing], [fn])

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

　　toggle() 如果元素是可见的，切换为隐藏；如果是隐藏的，切换为可见。

　　参数：

　　(1) toggle()：切换显示 / 隐藏

　　(2) fn1, fn2[ ,fn2, fn4, .....]：轮流点击函数

　　(3) spend：隐藏/ 显示 效果的速度。默认为 ‘0’ 毫秒。

　　(4) easing：用来指定切换效果，默认是‘swing’，可用参数‘linear’