JQuery 绑定事件
在日常写代码的时候 不免有绑定代码,对于新手的我,对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 绑定事件相关推荐
- updatepanel失效怎么办_【点滴积累】解决jQuery绑定事件在updatepanel更新后失效的方法...
背景 接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单.其次就是当使用鼠标点击 ...
- jQuery绑定事件的三种常见方式(bind、one、【change、click、keydown、hover】)
一.bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数. 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> < ...
- Jquery绑定事件(bind和live的区别)[转]
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- 【JavaScript】jQuery绑定事件
jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...
- 50 jQuery绑定事件 阻止默认事件发生 内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
- jQuery绑定事件的方法四种方法
jq给元素绑定事件的方法有4种, 1.bind() 2.live() 3.live() 4.on() //on常用 一:bind(type,[data],function(eventObjec ...
- 【JQuery】JQuery绑定事件并传参
文章目录 问题出现 问题分析 解决方法 结论 纠正一个错误 事情是这样的,因为最近在学习前端的知识,学完了需要巩固下知识,所以在网上找的题来做.遇到这样的题.(包含遇到问题的详细过程,觉得例子无趣 ...
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...
- JQuery绑定事件 时如何传递参数
如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应 ...
最新文章
- go slice获取唯一值_Go语言引用传递与值传递
- ORACLE导入Excel数据
- java 调度服务器,Quartz Scheduler - 使用PostgreSQL服务器调度作业
- python爬虫,记录一下爬取过程,列表数据,翻页,post方式,保存字典
- binwalk -e mysql_Binwalk的安装和使用
- ...python の 学习
- C#求空间两点之间的距离
- iverilog命令选项解释
- Hbase 协处理器 RegionObserver
- Linux系统驱动全吗,linux系统需要给硬件安装驱动程序么?谁推荐一下linux系统阿~要驱动最全...
- fixed与sticky的区别
- WinRAR去除打开后弹出广告的方法
- 政府支撑智慧城市建设 楼宇对讲投身社区成长
- SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)
- 使用 TiUP 部署 DM 集群
- 2023浙江工业大学计算机考研信息汇总
- 一位程序员工作10年总结的10条建议
- 探索瑞芯微RKNanoD芯片获索尼音箱,采用无线连接稳定无延迟
- git下载,上传代码到GitLab ; Untracked files (use “git add <file>...“ to include in what will be committed)
- 利用talib构造股票因子,并利用数据挖掘算法进行因子筛选