jquery on()方法off()方法

自从jquery1.7以来,关于事件添加到这个版本,使得事件的绑定变的十分简单,用过的jquery的的人都说好,相信对关,开方法爱不释手。下面是我总结出来的开,关的使用语法,希望对小伙伴有帮助。

上()使用场景最多

  1. 最简单的写法

     $("ul li").on("click",function(){  alert("不响应事件!");  })  
    • 1
    • 2
    • 3
  2. 同时给多个元素绑定一样的事件

     $("ul li,div").on("click",function(){  alert("不响应事件!");  }) 
    • 1
    • 2
    • 3
  3. 同时给元素绑定多个事件

    $(".demonstrate").on({  mouseover:function(){  $(this).addClass("over");  },  mouseout:function(){  $(this).removeClass("over");  }
    },"ul li")  
    • 1
    • 2
    • 3
    • 4
    • 6
    • 7
    • 8
  4. 实现事件委托 
    父元素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

关闭()解绑事件

  1. 最简单的写法

     $("ul li").off("click")  
    • 1
  2. 同时给多个元素解绑一样的事件

     $("ul li,div").off("click") 
    • 1
  3. 同时给元素解绑多个事件

    $(".demonstrate").off("mouseover mouseout","ul li")  
    • 1
  4. 实现事件委托的解绑 
    父元素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()方法相关推荐

  1. jQuery一些常用特效方法使用实例

    1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).fadeIn(speed,callback); 实例: $("button").cli ...

  2. jQuery CSS 操作 - css() 方法

    实例 设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...

  3. JQuery 的跨域方法 可跨任意网站

    JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...

  4. javascript:jquery.history.js使用方法

    javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...

  5. 关于使用jQuery时$(document).ready()方法失效问题

    关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...

  6. 【转】jquery 注册事件的方法

    原文链接:http://outofmemory.cn/code-snippet/2123/jquery-zhuce-event-method 1.使用事件名来绑定,可用的事件名有 change,cli ...

  7. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  8. [jQuery] 针对jQuery性能的优化方法有哪些?

    [jQuery] 针对jQuery性能的优化方法有哪些? show slide animate 等频繁修改 dom 很耗性能,可采用 jquery.transit 插件等使用单个 id 或 class ...

  9. [jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this

    [jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...

  10. php 获取子孙,jquery如何查找后代元素?jquery获取后代元素方法

    在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...

最新文章

  1. mysql索引 物理文件_MySQL架构和MySQL索引
  2. SQL数据库面试题以及答案!
  3. 创建支持依赖注入、Serilog 日志和 AppSettings 的 .NET 5 控制台应用
  4. python入门(七):CGI编程
  5. ES常用DSL语句(kibana常用语句)
  6. WordPress 中文图片 上传 自动重命名
  7. 《软件体系结构》第三章 软件体系结构风格
  8. MCSAMCP认证证书
  9. 如果让markdown的图片变清晰/改变大小
  10. Express脚手架
  11. Katana的高性能图形分析库
  12. Adobe国际认证让科技赋能时尚
  13. 工业软件巨头解读:西门子是一家软件公司,达索是一家“3D体验”公司
  14. C语言+EasyX库实现--绘制彩虹
  15. 深度关注 | 元宇宙如何改写人类社会生活
  16. python数据分析面试常见问题及答案_十道 Python 面试问题陷阱
  17. DIY电工维修如何拆卸和安装开关面板插座
  18. maven中多个子模块的构建顺序
  19. 计算机一些专业术语,计算机专业术语大全
  20. 读书笔记之《设计原本》

热门文章

  1. highcharts饼图
  2. iOS开发中通知(Notification)快速入门及推送通知实现教程
  3. JavaMail操作的总结(2)
  4. 网络自由访问 巧解除Win XP文件共享限制
  5. python基础语法、数据结构、字符编码、文件处理 练习题
  6. 华为交换机几种端口属性
  7. 从业务到技术weibo link card快速接入思考-2014.09.20
  8. android LocalActivityManager说明
  9. C#:Md5和Sha1两种加密方式
  10. 进程之间有8种通信方式