首页 > 其他分享 >jQuery 事件绑定方法 bind

jQuery 事件绑定方法 bind

时间:2023-06-08 19:32:16浏览次数:42  
标签:jQuery function ... bind 绑定 事件 type click


jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象

事件绑定方法:

1.<type>(function)



$("button").click(function(){
    ...
});



2.bind(map)




$("input[type='text']").bind({
    focus: function(){
        ...
    },
    blur: function(){
        ...
    }
})




3.bind(type, [data,] function)

  注:如果没有第二个参数,则与第一个绑定事件方法相同



$("button").bind(
    "click",
    {
         arg1: "2012"
         arg2: "07"
    },
    function(event){
        ...
        event.data.arg1
        ...
    }
)




4.one(type, [data,] function)

  绑定事件只执行一次,执行完之后绑定失效

5.hover(over, out)

  注:两个参数为鼠标盘旋在对象上方和离开时调用的函数




$("div").hover(
    function(){
        ...
    },
    function(){
        ...
    }
)




6.toogle(function1, function2, ...)

  该方法作用是单击对象时循环调用函数列表中的函数

7.live(type, function)

  该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

 

事件删除方法:

1.unbind([type] [,data])

  该方法删除匹配对象的事件处理程序,与bind方法对应,可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略,将删除匹配对象的所有事件及事件处理程序;如果只有第一个type参数,将删除指定事件类型的时间处理程序。如:


$("#btn").unbind("click");



  如果同时指定两个参数,将删除指定事件类型的指定事件处理程序。如,btn绑定以下函数:

  var btnClick = function(){...};

  则删除btn的该事件处理程序的代码为:



$("#btn").unbind("click", btnClick);



2.die([tyoe] [,function])
  该方法与live方法对应,用于解除live注册的自定义事件。参数与unbind方法类似。

 

模拟操作:

  模拟操作就是模拟用户触发相应的事件,如一个事件触发另一个事件。

1.<type>()

  如触发一个按钮的单击事件:


$("button").click();



2.trigger(type [,data])

  如触发一个按钮的单击事件:



$("button").trigger("click");



3.triggerHandler(type [,data])

  与 trigger 方法不同:

  该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值,而不是可链接的jQuery对象。该方法不会触发事件冒泡

 

jQuery事件对象:

1.事件对象的属性

  type:获得该对象的事件类型,如click, focus, mouseover等

  target:获得事件触发者(DOM对象)

  data:获得调用事件时传入的额外参数集合

  relatedTarget:获得触发鼠标事件的DOM元素

  currentTarget:获得当前DOM元素(等同于this关键字)

  pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置

  result:获得上一个事件处理函数返回的值

  timeStamp:获得事件发生的时间戳

2.事件对象的方法

函数名

说明

例子

preventDefault()

取消元素事件的默认动作

例如:

对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置


//取消事件默认动作
$("a").bind("click", function (e) {
    e.preventDefault(); 
});


isDefaultPrevented()

是否调用过preventDefault()方法


e.isDefaultPrevented()


stopPropagation()

取消事件冒泡


e.stopPropgation();


isPropagationStopped()

是否调用过stopPropagation()方法


e.isPropagationStopped()


stopImmediatePropagation()

取消执行该元素该事件处理函数的后续事件处理函数,

并取消事件冒泡


$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
});

//不会被执行到
$("a").click(function () {
    alert("我被点击了");
});


isImmediatePropagationStopped()

是否调用过stopImmediatePropagation()方法


$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
    alert(e.isImmediatePropagationStopped());
});


例如:要在鼠标移动时获取鼠标的位置:



$(document).mouseover(function(event){
    var msg = event.pageX + " " + event.pageY;
    alert(msg);
});



 

标签:jQuery,function,...,bind,绑定,事件,type,click
From: https://blog.51cto.com/u_16065168/6442472

相关文章

  • jquery:TypeError: $(...).on is not a function
    当发生错误TypeError:$(...).onisnotafunction时,当不存在javascript类冲突的前提下,考虑是否是因为jquery版本过低! 参考:http://stackoverflow.com/questions/15670352/typeerror-on-is-not-a-functionhttp://stackoverflow.com/questions/18958775/typeerror-jquery-on-is-n......
  • java reflection Java 反射,动态绑定
    javareflection,java反射,动态绑定                                       Reflection是Java程序开发语言的特征之一,它允许运行中的Java程序对自身进行检查,或者说“自审”,并能直接操作程序的内部属性。例如,使用它能获得Java类中......
  • jquery Mobile点击显示加载等待效果
    点击某个按钮或链接时,触发等待加载效果:<script><!--$(document).bind("mobileinit",function(){});$(function(){//默认设置,一个小圈圈在转$('#default').live('tap',function(){$.mobile.loadingMessageTe......
  • jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title>......
  • 在intelj idea中Debug启动tomcat时Address already in use:JVM_Bind
    在debug重启web应用时,偶尔会报如下错误:Addressalreadyinuse:JVM_Bind,一看端口占用 打开任务管理器,发现并没有java相关的进程。所以无法通过杀死进程来解除接口占用,可以通过如下方式解决1.编辑服务器配置,EditConfiguration 2.点击Startup/Connection 3.选中debug,......
  • JQuery-XSS漏洞(CVE-2020-11022/CVE-2020-11023)
    JQuery-XSS漏洞(CVE-2020-11022/CVE-2020-11023)详细描述据NVD描述:在大于或等于1.2且在3.5.0之前的jQuery版本中,即使执行了消毒(sanitize)处理,也仍会执行将来自不受信任来源的HTML传递给jQuery的DOM操作方法(即html()、.append()等),从而导致xss漏洞。受影响版本大于等于1.2,小于......
  • WPF学习笔记一 依赖属性及其数据绑定
    本文想通过由浅入深的讲解让读者比较深的理解依赖属性. 首先,我们回顾一下依赖属性的发展历史. 最初,人们提出面向对象编程时,并没有属性这个说法,当时叫做成员变量.一个对象由成员变量和成员函数组成,如下:PublicClassA{PublicintIndex;//成员变量PublicvoidFu......
  • Java动态绑定机制
    Java的动态绑定机制当调用对象方法的时候,该方法会和该对象的内存地址\运行类型绑定当调用对象属性时,没有动态绑定机制,哪里声明,哪里使用packagehspedu.poly_.dynamic_;publicclassDynamicBinding{publicstaticvoidmain(String[]args){Aa=newB(......
  • jquery.serializejson.min.js的妙用
    jquery.serializejson.min.js的妙用关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。而在处理复杂的表单时,......
  • jQuery
    jQueryjQuery常用插件网站jQuery插件库:http://www.jq22.com/jQuery之家http://www.htmleaf.com/jQuery事件/on()绑定多个事件jQuery解绑事件off()jQuery绑定只执行一次事件one()jQuery自动触发事件trigger()和定时器一起使用可以达到自动触发指定事件的效果......