在日常写代码的时候 不免有绑定代码,对于新手的我,对JQ中事件的绑定做一个大致的区分。

jQuery on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)

由此扩展开来的几个以前常见的方法有.

bind()
$("p").bind("click",function(){alert("I‘m you friend---MYmingk.");});$("p").on("click",function(){alert("I‘m you friend---MYmingk.");});

delegate()
 $("#div1").on("click","p",function(){$(this).css("background-color","pink");});$("#div2").delegate("p","click",function(){$(this).css("background-color","pink");});

live()
$("#div1").on("click",function(){$(this).css("background-color","pink");});$("#div2").live("click",function(){$(this).css("background-color","pink");});

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

$(document).ready(function(){$("p").on("click",function(){$(this).css("background-color","pink");});$("button").click(function(){$("p").off("click");});
});

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

$(document).ready(function(){$("p").one("click",function(){$(this).animate({fontSize:"+=6px"});});
});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){$("input").select(function(){$("input").after(" Text marked!");});$("button").click(function(){$("input").trigger("select");});
});

多个事件绑定同一个函数

$(document).ready(function(){$("p").on("mouseover mouseout",function(){$("p").toggleClass("intro");});
});

多个事件绑定不同函数

$(document).ready(function(){$("p").on({mouseover:function(){$("body").css("background-color","lightgray");}, mouseout:function(){$("body").css("background-color","lightblue");}, click:function(){$("body").css("background-color","yellow");} });
});

绑定自定义事件

$(document).ready(function(){$("p").on("myOwnEvent", function(event, showName){$(this).text(showName + "! What a beautiful name!").show();});$("button").click(function(){$("p").trigger("myOwnEvent",["Anja"]);});
});        

传递数据到函数

function handlerName(event) {alert(event.data.msg);
}$(document).ready(function(){$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

适用于未创建的元素

$(document).ready(function(){$("div").on("click","p",function(){$(this).slideToggle();});$("button").click(function(){$("<p>This is a new paragraph.</p>").insertAfter("button");});
});

转载于:https://www.cnblogs.com/wymbk/p/5850296.html

JQuery 绑定事件相关推荐

  1. updatepanel失效怎么办_【点滴积累】解决jQuery绑定事件在updatepanel更新后失效的方法...

    背景 接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单.其次就是当使用鼠标点击 ...

  2. jQuery绑定事件的三种常见方式(bind、one、【change、click、keydown、hover】)

    一.bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数. 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> < ...

  3. Jquery绑定事件(bind和live的区别)[转]

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  4. 【JavaScript】jQuery绑定事件

    jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...

  5. 50 jQuery绑定事件 阻止默认事件发生 内置动画 each data

    主要内容 1  阻止后续事件继续执行 return false:  常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...

  6. jQuery绑定事件的方法四种方法

    jq给元素绑定事件的方法有4种, 1.bind()  2.live()  3.live()  4.on()  //on常用 一:bind(type,[data],function(eventObjec ...

  7. 【JQuery】JQuery绑定事件并传参

    文章目录 问题出现 问题分析 解决方法 结论 纠正一个错误   事情是这样的,因为最近在学习前端的知识,学完了需要巩固下知识,所以在网上找的题来做.遇到这样的题.(包含遇到问题的详细过程,觉得例子无趣 ...

  8. jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...

  9. JQuery绑定事件 时如何传递参数

    如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应 ...

最新文章

  1. go slice获取唯一值_Go语言引用传递与值传递
  2. ORACLE导入Excel数据
  3. java 调度服务器,Quartz Scheduler - 使用PostgreSQL服务器调度作业
  4. python爬虫,记录一下爬取过程,列表数据,翻页,post方式,保存字典
  5. binwalk -e mysql_Binwalk的安装和使用
  6. ...python の 学习
  7. C#求空间两点之间的距离
  8. iverilog命令选项解释
  9. Hbase 协处理器 RegionObserver
  10. Linux系统驱动全吗,linux系统需要给硬件安装驱动程序么?谁推荐一下linux系统阿~要驱动最全...
  11. fixed与sticky的区别
  12. WinRAR去除打开后弹出广告的方法
  13. 政府支撑智慧城市建设 楼宇对讲投身社区成长
  14. SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)
  15. 使用 TiUP 部署 DM 集群
  16. 2023浙江工业大学计算机考研信息汇总
  17. 一位程序员工作10年总结的10条建议
  18. 探索瑞芯微RKNanoD芯片获索尼音箱,采用无线连接稳定无延迟
  19. git下载,上传代码到GitLab ; Untracked files (use “git add <file>...“ to include in what will be committed)
  20. 利用talib构造股票因子,并利用数据挖掘算法进行因子筛选

热门文章

  1. SVN自助更新:运维利器Puppet实例讲解
  2. Hibernate查询用法总结
  3. Windows Phone7成为诺基亚核心目标
  4. NLP知识包--语义分析-语义角色标注
  5. 富文本编辑器中空格转化为a_文本编辑器题解
  6. c语言学籍管理实验报告,c语言实验报告(学生学籍管理系统)
  7. Kubeadm installation
  8. PhoneGap跨平台移动应用开发框架体验
  9. 在 Adobe AIR 中为不同屏幕尺寸的多种设备提供支持
  10. java logback 使用_java日志配置之logback的使用