jquery事件绑定

时间:2022-04-23
本文章向大家介绍jquery事件绑定,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .bind(eventType[,eventData],preventBubble)     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     preventBubble       第三个参数设置为false 将绑定一个函数。防止默认事件,阻止事件冒泡,默认值是true。   .bind(events)     events       一个对象,包含一个或多个DOM事件类型或函数执行他们。

  用法:     $('#foo').bind('click', function() {       alert('User clicked on "foo."');     }); //当点击#foo这个元素的时候弹出 这句话。

    $('#foo').bind('mouseenter mouseleave', function() {       $(this).toggleClass('entered');     }); // 一次可以绑定多个 事件,用逗号隔开,

.delegate()   为所有匹配选择器的元素绑定一个或者多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些匹配到的元素,也包括那些今后可匹配的元素。   .delegate(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .delegate(selector,eventType,eventData,handler(eventObject))     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件触发时执行的函数。   .delegate(selector,events)     selector       选择器字符串,用于过滤器触发事件的元素。     events       一个对象,包含一个或多个DOM事件类型和函数并执行它们。     使用方法:       $("table").delegate("td", "click", function() {         alert($(this).text());       });         每当td的文字被点击时候,要显示一个警告框:       $("body").delegate("a", "click", function() { return false; })           返回false,取消默认的行为,防止从它冒出来的,:       $("body").delegate("a", "click", function(event){           event.preventDefault();       });         要取消默认动作只有通过使用preventDefault方法。

.die()   从元素中删除先前.live()绑定的所有事件。   .die()     这个方法不接受任何参数。   .die(eventType[,handler])     eventType       一个包含一个JavaScript事件类型的字符串,比如click 或keydown。     handler       将来不用执行的函数。   .die(events)       events         包含一个或多个事件类型的一个普通对象.   用法:     $("p").die()       解除所有段落上绑定的live 事件。     $("p").die("click")       解除所有段落上通过live事件绑定的click 事件。

.off()   移除一个事件处理函数。   .off(events[,selector][,handler])     events       一个或多个空格分隔的事件类型和可选的命名空间     selector       一个选择器,当绑定事件处理程序时匹配最初传递给     handler       以前附加的事件处理函数.   .off(events[,selector])     events       一个对象的字符串所代表的一个或多个空格的事件类型和可命名的空间。     selector       一个选择器,当绑定事件处理程序的匹配最初传递给。   .off(event)     event       一个jqery.event对象。   .off()     这个方法不接受任何参数。

  用法:     $("p").off()       移除所有段落上的事件:     $("p").off( "click", "**" )       移除所有段落上的代理事件:

.on()   在选定的元素上绑定一个或多个事件处理函数。   .on(events[,selector][data],handler(eventObject))     events       一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click",     selector       一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。     data       当一个事件被触发时,要传递给事件处理函数的event.data。     handler       事件被触发时,执行的函数。   .on( events [, selector ] [, data ] )     events       一个对象,键是由一个或多个由空格分隔的事件类型及可选的名字空间,值是这些事件类型所对应的事件处理函数。     selector       一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。     data       当一个事件被触发时,要传递给事件处理函数的event.data。   用法:     $('p').on("click",function(){       alert($(this).text());     }) //当点击段落的时候,显示该段落中的文本。

    $('form').on("submit",false)       //取消表单的提交动作。

    $("form").on("submit",function(event){        event.preventDefault();     }) // 通过使用.preventDefault() 仅取消默认的动作。

    $("div").on("click",function(event,person){         alert("Hello,"+person.name);      }) //传递一个data数据给事件处理程序,作为第二个参数。

    $("body").on("click","p"function(){         alert($(this).text());       }) // 当点击该段落时候,显示该段落的文本。

.one()   为一个元素的事件添加处理函数,处理函数在每个元素上每种事件类型最多执行一次。   .one(events[,data],handler(eventObject))     events       一个包含一个JavaScript事件类型的字符串,比如click;     data       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每次事件触发时会执行的函数。     用法:     $( "#foo" ).one( "click", function() {       alert( "This will be displayed only once." );     }); //第一次点击该段落的时候会 弹出警示框。

.trigger()   根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。   .trigger(eventType[,extraParameters])     eventType       一个包含一个JavaScript事件类型的字符串,比如click;     extraParameters       传递给事件处理程序的额外参数。   .trigger(event[,extraParameters])     event       一个jquery.event对象。     extraParameters       传递给事件处理程序的额外参数。   用法:    $('#foo').on('click', function() {     alert($(this).text());     });     若要提交第一个表单但又不想使用 submit() 函数,请尝试如下方法:     $("form:first").trigger("submit");     .triggerHandler()         为一个事件执行附加到元素的所有处理程序。     .triggerHandler( eventType [, extraParameters ] )       eventType         以后包含JavaScript事件类型的字符串,比如click 或 submit。       extraParameters         传递给事件处理程序的额外参数。     .triggerHandler(event[,extraParameters])       event         一个 jQuery .Event 对象.       extraParameters         传递给事件处理程序的额外参数。       $("#old").click(function(){           $("input").trigger("focus");        }); //当点击了这个元素才会触发input 的获得焦点事件。

.unbind()   从元素上删除一个以前附加事件处理程序。   .unbind(eventType[,handler])     eventType       一个包含JavaScript事件类型的字符串,比如click 或 submit。     handler       这个函数今后不在执行。   .unbind(eventType,false)     eventType       一个包含JavaScript事件类型的字符串,比如click 或 submit。     false       解除绑定相应的'return false'函数,这个函数使用.bind( eventType,false )绑定。   .unbind(event)     一个jquery.event对象。   .unbind()     此签名不接受任何参数。   用法:     $('#foo').unbind();       //删除所有事件类型的处理程序。     $('#foo').unbind('click')       //删除所有点击事件。   .undelegate()     删除当前选择器匹配的所有元素的事件处理程序,根据组特定根元素的集合。   .undelegate( selector, eventType )     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个用空格隔开的JavaScript事件类型的字符串,比如"click"或"keydown"。   .undelegate( selector, eventType, handler(eventObject) )     selector       选择器字符串,用于过滤器触发事件的元素。     eventType       一个包含一个或多个用空格隔开的JavaScript事件类型的字符串,比如"click"或"keydown"。     handler(eventObject)       每当事件触发时执行的函数。   .undelegate( selector, events )     selector       选择器字符串,用于过滤器触发事件的元素。     events       一个或多个事件类型和以前绑定的函数组成的一个对象,用来以解除他们(处理程序)。   .undelegate( namespace )     namespace       一个字符串,其中包含一个命名空间,以解除所有事件。   用法:     解除绑定的所有段落都从委托的事件:       $("p").undelegate()     解除绑定的所有段落的所有委托点击事件:       $("p").undelegate( "click" )