jq父级绑定事件的意义_js、jq事件绑定方式总结——以click事件为例

一、JavaScript点击事件绑定方法

1.1 HTML onclick事件属性

1 click me

1 functionclickMe(this) {2 alert("click me");3 }

1.2 JavaScript onclick事件

1 click me

1 document.getElementById("button").οnclick=clickMe;

1.3 IE4+

1 click me

1

2 alert("click me");3

1.4 IE5/windows attachEvent()方法

1 click me

1 document.getElementById("button2").attachEvent("onclick",clickMe);

1.5 W3C DOM addEventListener()方法

1 click me

1 document.getElementById("button3").addEventListener("click",clickMe);

二、jQuery点击事件绑定方法

2.1 click事件绑定

2.1.1 将函数绑定到click事件

语法:

$(selector).click(function)

实例:

1 click me

1 $("#button2_1").click(function(e){2 alert(e);3 });

2.1.2 触发click事件

语法:

1 $(selector).click()

2.2 dblclick()方法

语法:

$(selector).dblclick(function)

实例:

1 click me

1 $("#button2_7").dblclick(function(e) {2 alert(e);3 });

2.3 bind()方法 unbind()方法

2.3.1 bind()方法 将事件和函数绑定到元素(可添加一个或多个事件,可传递额外数据到函数)

语法(添加一个事件):

$(selector).bind(event,data,function)

语法(添加多个事件):

$(selector).bind({event:function, event:function, ...})

实例:

1 click me

1 $("#button2_2").bind("click", function(e) {2 alert(e);3 });

2.3.2 unbind()方法 取消绑定元素的事件处理程序和函数(可添加一个或多个事件,可传递额外数据到函数)

语法(取消绑定一个事件):

$(selector).unbind(event,function)

语法(取消绑定多个事件):

$(selector).unbind(eventObj)

实例:

1 $("#button2_2").unbind();

2.4 live()方法 die()方法

2.4.1 live()方法 为被选元素附加一个或多个事件处理程序

语法:

$(selector).live(event,data,function)

实例:

1 click me

1 $("#button2_3").live("click", function(e) {2 alert(e);3 });

2.4.2 die()方法 移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

语法:

$(selector).die(event,function)

实例:

1 $("#button2_3").die();

2.5 delegate()方法 undelegate()方法

2.5.1 delegate()方法 为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序

语法:

$(selector).delegate(childSelector,event,data,function)

实例:

1 click me

1 $("body").delegate("#button2_4", "click", function(e) {2 alert(e);3 });

2.5.2 undelegate()方法 为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序

语法:

$(selector).undelegate(selector,event,function)

实例:

1 $("#button2_4").undelegate();

2.6 on()方法 off()方法

2.6.1 on()方法 在被选元素及子元素上添加一个或多个事件处理程序

语法:

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

实例:

1 click me

1 $("#button2_5").on("click", function(e) {2 alert(e);3 });

2.6.2 off()方法 通常用于移除通过 on() 方法添加的事件处理程序

语法:

$(selector).off(event,selector,function(eventObj),map)

实例:

1 $("#button2_5").off("click");

2.7 one()方法 每个元素只能运行一次事件处理器函数

2.7.1 one()方法 为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数

语法:

$(selector).one(event,data,function)

实例:

1 click me

1 $("#button2_6").one("click", function(e) {2 alert(e);3 });

三、jQuery点击事件绑定方法比较

jQuery点击事件方法

适用jQuery版本

是否支持未来新添加元素的事件设置

click

适用所有版本

dblclick

适用所有版本

bind

适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

live

jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

delegate

jquery1.4.2及其以上版本。

on

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式。

one

适用jQuery1.0-jQuery3.1版本

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/520604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VScode 常用快捷键

快捷键说明CtrlTab已打开文件之间选择切换Ctrld双击关键词,依次选中CtrlAlt↓或者CtrlAlt↑垂直批量编辑ShirtAlt↓复制当前行Alt↓或者Alt↑移动当前行Ctrl\切出一个新的编辑器CtrlW关闭窗口CtrlC如果不选中,默认复制一整行CtrlEnd移动到文件结尾CtrlHo…

阿里云文件存储的高性能架构演进之路

10月27日下午,2018中国计算机大会上举办了主题“数据中心计算”的技术论坛,一起探讨解决数据中心所面临的挑战。论坛上,阿里云分布式存储团队高级技术专家田磊磊进行了《阿里云文件存储的高性能架构演进之路》的报告。 专家简介 田磊磊&…

阿里巴巴黄贵谈存储新硬件带来数据库的机遇

10月27日下午,2018中国计算机大会上举办了主题“存储软硬件之国产化挑战与机遇”的技术论坛,共同探讨存储软硬件栈上的关键系统与技术的国产化发展道路。论坛上,阿里数据库资深技术专家黄贵针对存储软硬件国产化进行了《存储新硬件给数据库自…

项目实战Git团队操作_图形化版本

文章目录一、分支思路1. Git命令常用理解记忆2. 分支换分规则3. 线上发布准备二、 实战前期准备2.1. 在远程仓库创建kernel_system项目2.2. 将远程仓库克隆到本地2.3. 本地准备操作三、场景实战模拟提交3.1. Git合并某个分支的某/多次提交到指定分支3.2. Git合并分支3.3. 回滚/…

为什么程序员总是打扮成这样一幅鬼样子

1几千年来,时尚像病毒一样不断进化,横扫世界。它遇神杀神,遇佛杀佛。遇到程序员后,含羞自尽。因为程序员是时尚休止符。因为他们习惯以不变应万变。夏季三大件:格子衫沙滩裤人字拖。冬季三大件:冲锋衣牛仔裤…

text显示下标的字体 unity_请教各位一个问题,脚本显示数组下标越界,求教是什么问题?...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼private GameObject playerSprite;public GameObject [] playerHeroSprite;private int index 0;void Update() {ChangeCharacter();}void ChangeCharacter()//角色切换{if (Input.GetKeyDown(KeyCode.R)){index ;if (index >p…

基础计算机b卷,计算机应用基础B卷.doc

计算机应用基础B卷.doc (6页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.9 积分《计算机应用基础》模拟试卷B (闭卷)一、单项选择题(本大题共40个小题,每题2分&#xff0…

阿里云大数据总监:计算让城市更智能

10月25日,2018中国计算机大会上举办了主题是智慧城市下个十年:智在“数”还是“术”的技术论坛。目前,城市已经具备了丰富多样的大数据积累,成体系的数据管理标准,开放自由的数据流动环境等重要基础,但对于…

创新小组 实战Git团队企操作手册_精华版本

文章目录一、入门试炼1. Git命令理解准则2. Git分支换分思路3. 线上发布准备二、 实战前期准备二、场景实战模拟提交准备3.1. Git合并某个分支的某一/多次提交到指定分支3.2. Git合并分支3.3. 回滚/撤销指定某一/多次提交(建议使用,雁过留声、人过留名)3.4. Git合并…

mybatis 依赖于jdbc_优于jdbc的mybatis框架入门

1.什么是mybatis?MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架。 MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索。 MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJ…

多维度创新打造领先阿里云技术生态

10月26日,2018中国计算机大会上举办了主题是“云计算生态与发展”的技术论坛。论坛上,阿里云技术战略架构师陈绪博士从构建目标、构建基石、构建要点三个方面详细陈述了阿里云开放的技术生态。目前阿里云正在全力打造一个由阿里云引导、驱动、赋能的多赢…

Facebook陷入史上最大危机;华为5G设备欧洲大卖,美国指责欧盟;红帽宣布OpenShift可用于AWS中国……...

关注并标星星CSDN云计算 速递、最新、绝对有料。这里有企业新动、这里有业界要闻,打起十二分精神,紧跟fashion你可以的!每周两次,打卡即read更快、更全了解泛云圈精彩newsgo go go新加坡加入微信计划 (图片来源网络&am…

计算机专业课程群建设,计算机科学与技术专业课程群建设的研究与实践

(内蒙古科技大学 信息工程学院,内蒙古 包头 014010)摘要:课程群建设是近年来高等院校课程建设实践中出现的一项新的课程开发技术,以本计算机专业课程群建设实践为背景,阐述了课程群建设的总体原则,构建了计算机专业课程群体系。关键词:计算机科学与技术专业;课程群;课程建设中图…

阿里云高级总监谈超大规模超高性能分布式快存储系统

新型硬件(如NVRAM、RDMA、GPU/TPU等)及其构建的异构复杂环境,与既有硬件环境的巨大差异,导致传统的算法、数据结构甚至是涉及原则和经验法则等难以为继,对计算智能与大数据处理带来新的挑战和机遇。 10月27日下午&…

git push -u origin master和git push 远程主机名 本地分支名:远程分支名作用

git push git push命令用于将本地分支的更新&#xff0c;推送到远程主机。它的格式与git pull命令相仿。 $ git push <远程主机名> <本地分支名>:<远程分支名>注意&#xff1a;这里的:前后是必须没有空格的。 注意&#xff0c;分支推送顺序的写法是<来源…

最新量子通信芯片曝光!大小仅为现有装置的千分之一

近日&#xff0c;新加坡南洋理工大学&#xff08;NTU-Singapore&#xff09;的Liu Ai Qun教授和Kwek Leong Chuan副教授领导的研究小组在《自然光子学》发表一项令人吃惊的研究成果&#xff1a;他们研究出一种量子通信芯片&#xff0c;大小约为3mm&#xff0c;其体积是目前量子…

如何提高阿里云上应用的可用性(一)

如今&#xff0c;开发并上线一款应用十分方便。因为云计算提供了从最基础的计算资源如服务器网络、数据库服务、中间件PaaS平台到各种应用支撑的云管理服务&#xff0c;同时开源社区的迅猛发展也提供了从数据库、缓存到应用全生命流程中各种必须的组件&#xff0c;所以越来越多…

catalog英文翻译_“目录”的英文翻译是“catalogquot;还是quot;contentsquot;

都是正确的&#xff0c;使用方法不同。1、catalog常用在说明书和产品目录中。解析&#xff1a;catalog英 [ˈktəlɒɡ]美 [ˈktəlɔːɡ] n.目录&#xff0c;一览表&#xff1b;系列&#xff1b;种类&#xff1b;产品样本。v.为…编目录&#xff0c;登记分类&#xff1b;记载…

运营商服务器系统,浪潮服务器助力运营商三大支撑系统上云

【IT168 资讯】继浙江移动、广东移动、福建电信业务系统云化应用改造项目后&#xff0c;浪潮服务器再次中标河南某运营商云资源池项目&#xff0c;中标金额达三千多万。三百多台浪潮双路、四路服务器用于支撑该运营商的BOSS计费系统、CRM系统、经营分析系统、网管应用系统、OA、…

查看git历史记录

查看git历史记录 git log 查看git历史记录简约一条 git log --oneline 查看git历史记录简约一条图形化 git log --oneline --graph 查看git所有分支提交的历史记录简约一条图形化 git log --oneline --all --graph 查看git所有分支最新的4次提交的历史记录简约一条图形化 git …