经常被忽略jquery方法(1)

一.bind 方法
返回值:jQuerybind(type,[data],fn)
概述
为每个匹配元素的特定事件绑定事件处理函数。

参数
type,[data],function(eventObject)String,Object,FunctionV1.0type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

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

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

type,[data],false String,Object,boolV1.4.3type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

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

false: 将第三个参数设置为false会使默认的动作失效。

eventsStringV1.4一个或多个事件类型的字符串和函数的数据映射来执行他们。

示例
描述:
当每个段落被点击的时候,弹出其文本。

jQuery 代码:
$("p").bind("click", function(){
  alert( $(this).text() );
});描述:
同时绑定多个事件类型

jQuery 代码:
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});描述:
同时绑定多个事件类型/处理程序

jQuery 代码:
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");}, 
  mouseout:function(){$("body").css("background-color","#FFFFFF");} 
});描述:
你可以在事件处理之前传递一些附加的数据。

jQuery 代码:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)描述:
通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:
$("form").bind("submit", function() { return false; })描述:
通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:
$("form").bind("submit", function(event){
  event.preventDefault();
});描述:
通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:
$("form").bind("submit", function(event){
  event.stopPropagation();
});

作者在项目中应用:个人觉得用bind比click方法要好,我们经常会遇到因为某些操作要隐藏HTML元素,如果只是隐藏却没有去除元素绑定的事件,可能会不小心触发隐藏元素里面的事件,就好比你要隐藏一个form,隐藏后form中的input事件有一定可能会被触发。所以建议在显示元素的时候bind元素事件,不显示的时候先用unbind移除元素事件,在隐藏,这样可以减少BUG出现。


二.unbind 方法
返回值:jQuery,unbind(type,[data|fn]])
概述
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。


参数
type,[fn]String,FunctionV1.0type:删除元素的一个或多个事件,由空格分隔多个事件值。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,falseString,boolV1.4.3type:删除元素的一个或多个事件,由空格分隔多个事件值

false:设置为false会使默认的动作失效。

eventObjStringV1.0事件对象。这个 eventObj 参数来自事件绑定函数

示例
描述:
把所有段落的所有事件取消绑定

jQuery 代码:
$("p").unbind()描述:
将段落的click事件取消绑定

jQuery 代码:
$("p").unbind( "click" )描述:
删除特定函数的绑定,将函数作为第二个参数传入

jQuery 代码:
var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

$("p").unbind("click", foo); // ... 再也不会被触发 foo速查表页顶↑

你可能感兴趣的:(JavaScript,html,jquery)