jquery on()方法off()方法
jquery on()方法off()方法
自从jquery1.7以来,关于事件添加到这个版本,使得事件的绑定变的十分简单,用过的jquery的的人都说好,相信对关,开方法爱不释手。下面是我总结出来的开,关的使用语法,希望对小伙伴有帮助。
上()使用场景最多
最简单的写法
$("ul li").on("click",function(){ alert("不响应事件!"); })
- 1
- 2
- 3
同时给多个元素绑定一样的事件
$("ul li,div").on("click",function(){ alert("不响应事件!"); })
- 1
- 2
- 3
同时给元素绑定多个事件
$(".demonstrate").on({ mouseover:function(){ $(this).addClass("over"); }, mouseout:function(){ $(this).removeClass("over"); } },"ul li")
- 1
- 2
- 3
- 4
- 五
- 6
- 7
- 8
实现事件委托
父元素ul li
给目标元素.demostrate
添加事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以,给父元素添加委托事件,不用考虑子元素的数量什么的。$("ul li").on({click:function(){console.log('click','1111');},mouseover: function () {console.log('mouseover','1111');$(this).addClass("over");},mouseout: function () {$(this).removeClass("over");}},".demostrate");
- 1
- 2
- 3
- 4
- 五
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
关闭()解绑事件
最简单的写法
$("ul li").off("click")
- 1
同时给多个元素解绑一样的事件
$("ul li,div").off("click")
- 1
同时给元素解绑多个事件
$(".demonstrate").off("mouseover mouseout","ul li")
- 1
实现事件委托的解绑
父元素ul li
给目标元素.demostrate
移除移除移除移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以,给父元素移除委托事件,不用考虑子元素的数量什么的。$("ul li").off("click mouseover mouseout",".demostrate");
//避免事件叠加 ,jQuery on(绑定事件)前别忘了off(移除事件)
$year.off().on("click",function(){ })
$("#say-hello").off('click').on('click', sayHello);
疑问:解绑后如何再添加进去
jquery on()方法off()方法相关推荐
- jQuery一些常用特效方法使用实例
1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).fadeIn(speed,callback); 实例: $("button").cli ...
- jQuery CSS 操作 - css() 方法
实例 设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
- JQuery 的跨域方法 可跨任意网站
JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...
- javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
- 关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
- 【转】jquery 注册事件的方法
原文链接:http://outofmemory.cn/code-snippet/2123/jquery-zhuce-event-method 1.使用事件名来绑定,可用的事件名有 change,cli ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- [jQuery] 针对jQuery性能的优化方法有哪些?
[jQuery] 针对jQuery性能的优化方法有哪些? show slide animate 等频繁修改 dom 很耗性能,可采用 jquery.transit 插件等使用单个 id 或 class ...
- [jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this
[jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...
- php 获取子孙,jquery如何查找后代元素?jquery获取后代元素方法
在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...
最新文章
- mysql索引 物理文件_MySQL架构和MySQL索引
- SQL数据库面试题以及答案!
- 创建支持依赖注入、Serilog 日志和 AppSettings 的 .NET 5 控制台应用
- python入门(七):CGI编程
- ES常用DSL语句(kibana常用语句)
- WordPress 中文图片 上传 自动重命名
- 《软件体系结构》第三章 软件体系结构风格
- MCSAMCP认证证书
- 如果让markdown的图片变清晰/改变大小
- Express脚手架
- Katana的高性能图形分析库
- Adobe国际认证让科技赋能时尚
- 工业软件巨头解读:西门子是一家软件公司,达索是一家“3D体验”公司
- C语言+EasyX库实现--绘制彩虹
- 深度关注 | 元宇宙如何改写人类社会生活
- python数据分析面试常见问题及答案_十道 Python 面试问题陷阱
- DIY电工维修如何拆卸和安装开关面板插座
- maven中多个子模块的构建顺序
- 计算机一些专业术语,计算机专业术语大全
- 读书笔记之《设计原本》