Jquery基础之事件操作详解

2020-05-16 18:46:33易采站长站整理

$(“#btn1”).bind(“click”,function(){alert(“单击事件绑定”);});

bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样,区别在于one()方法绑定的事件只能执行一次。

为按钮绑定一次性事件示例:

<input type=”button” id=”btn1″ value=”单击”>

$(“#btn1”).one(“click”,function(){alert(“单击事件绑定”);});

unbind()方法为元素取消事件绑定,unbind()方法的格式如下:

$(selctor).unbind([type],[data])

unbind()方法是元素bind()方法的反向操作,从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型,第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

示例:


<input type="button" id="btn1" value="click" />

<input type="button" id="btn2" value="removeBind" />

$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

$("#btn2").bind("click", function () {
$("#btn1").unbind("click", fun2);
});

该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

live()方法为元素动态绑定事件,使用该方法绑定事件后,新加对应元素也能触发相应事件。live()方法格式如下:

$(selector).live([type],[data],fun);

live动态绑定示例:

$(“p”).live(“click”,function(){$(this).hide();});

该示例为所有的p元素节点动态添加了click事件,无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作,结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后,所有动态绑定的事件将删除。

trigger()方法在匹配的元素上触发参数中的事件,该方法会触发浏览器默认事件,返回false阻止浏览器默认事件。trigger()方法格式如下:

$(selector).trigger([type],[data]);

trigger()方法示例:

$(“form:first”).trigger(“submit”);

该示例触发第一个from表单的submit操作。

triggerHandler()方法这个方法会触发绑定事件,但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

三、事件

事件处理中已经列出了主要的事件类型如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例,click方法格式如下:绑定事件$(selector).click(functiron(){//函数体}),触发事件$(selector).click()。例: