JQ绑定事件(1.9已经废除了live()等绑定事件方法,on()方法是官方推荐的绑定事件的一个方法)

时间:2022-09-03 22:26:20

本文来源:http://www.cnblogs.com/leejersey/p/3545372.html


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

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

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

  1. bind()
  2.   $("p").bind("click",function(){
  3.     alert("The paragraph was clicked.");
  4.   });
  5.   $("p").on("click",function(){
  6.     alert("The paragraph was clicked.");
  7.   });
  8. delegate()
  9.   $("#div1").on("click","p",function(){
  10.     $(this).css("background-color","pink");
  11.   });
  12.   $("#div2").delegate("p","click",function(){
  13.     $(this).css("background-color","pink");
  14.   });
  15. live()
  16.   $("#div1").on("click",function(){
  17.     $(this).css("background-color","pink");
  18.   });
  19.   $("#div2").live("click",function(){
  20.     $(this).css("background-color","pink");
  21.   });

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

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

  1. $(document).ready(function(){
  2.   $("p").on("click",function(){
  3.     $(this).css("background-color","pink");
  4.   });
  5.   $("button").click(function(){
  6.     $("p").off("click");
  7.   });
  8. });

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

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

trigger()绑定

  1. $(selector).trigger(event,eventObj,param1,param2,...)
  1. $(document).ready(function(){
  2.   $("input").select(function(){
  3.     $("input").after(" Text marked!");
  4.   });
  5.   $("button").click(function(){
  6.     $("input").trigger("select");
  7.   });
  8. });

多个事件绑定同一个函数

  1. $(document).ready(function(){
  2. $("p").on("mouseover mouseout",function(){
  3. $("p").toggleClass("intro");
  4. });
  5. });

多个事件绑定不同函数

  1. $(document).ready(function(){
  2. $("p").on({
  3. mouseover:function(){$("body").css("background-color","lightgray");},
  4. mouseout:function(){$("body").css("background-color","lightblue");},
  5. click:function(){$("body").css("background-color","yellow");}
  6. });
  7. });

绑定自定义事件

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

传递数据到函数

  1. function handlerName(event)
  2. {
  3. alert(event.data.msg);
  4. }
  5. $(document).ready(function(){
  6. $("p").on("click", {msg: "You just clicked me!"}, handlerName)
  7. });

适用于未创建的元素

  1. $(document).ready(function(){
  2. $("div").on("click","p",function(){
  3. $(this).slideToggle();
  4. });
  5. $("button").click(function(){
  6. $("<p>This is a new paragraph.</p>").insertAfter("button");
  7. });
  8. });

参考w3cshool.com

JQ绑定事件(1.9已经废除了live()等绑定事件方法,on()方法是官方推荐的绑定事件的一个方法)的更多相关文章

  1. jQuery之防止冒泡事件&comma;冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  2. 第三章 JQuery&colon; HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  3. android data binding jetpack IV 绑定一个方法另一种写法和参数传递

    android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...

  4. android data binding jetpack III 绑定一个方法

    第三篇 给view绑定一下方法响应. (补充:1.被绑定的方法必须是public的.   1.绑定方法可以用主语法.也可以用以下双冒号方式“::” android:onClick="@{pr ...

  5. java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  6. SQL Server 扩展事件(Extented Events)从入门到进阶(2)——在GUI中创建基础扩展事件

    本文属于 SQL Server 扩展事件(Extented Events)从入门到进阶 系列 第一篇文章中提到了如何在Profiler中创建跟踪(trace),并以服务器端(server-side)跟 ...

  7. Thread类的其他方法&comma;同步锁&comma;死锁与递归锁&comma;信号量&comma;事件&comma;条件&comma;定时器&comma;队列&comma;Python标准模块--concurrent&period;futures

    参考博客: https://www.cnblogs.com/xiao987334176/p/9046028.html 线程简述 什么是线程?线程是cpu调度的最小单位进程是资源分配的最小单位 进程和线 ...

  8. layer&period;open参数;layer&period;open关闭事件;layer&period;open关闭刷新;layer&period;open获取子页的值;layer&period;open调用子页面的方法

    父页面 function layerOpen() { layer.open({ type: 2, shade: [0], title: "验收申请", area: ['1024px ...

  9. python 全栈开发,Day42&lpar;Thread类的其他方法&comma;同步锁&comma;死锁与递归锁&comma;信号量&comma;事件&comma;条件&comma;定时器&comma;队列&comma;Python标准模块--concurrent&period;futures&rpar;

    昨日内容回顾 线程什么是线程?线程是cpu调度的最小单位进程是资源分配的最小单位 进程和线程是什么关系? 线程是在进程中的 一个执行单位 多进程 本质上开启的这个进程里就有一个线程 多线程 单纯的在当 ...

随机推荐

  1. JSON Web Token实际应用

    一.JWT认证方式的实现方式 1.客户端不需要持有密钥,由服务端通过密钥生成Token. 2.客户端登录时通过账号和密码到服务端进行认证,认证通过后,服务端通过持有的密钥生成Token,Token中一 ...

  2. vtk renderer &sol; rendering 绘制

    1.在绘制窗口中绘制出物体(静态的)vtkRenderWindow * w=vtkRenderWindow::New();  w->AddRenderer(r);        for(int ...

  3. JS识记

    1.重新按照URL地址加载本页? window.location.reload(); 2.JS中实现命名空间一例? <script type="text/javascript&quot ...

  4. Github学习之路-小试牛刀,练习Git 的基本操作

    一.下子windows客户端. Git 客户端下载地址:http://msysgit.github.io/ 二.打开Git Bash 命令行操作界面. 安装完成后,在开始菜单里找到“Git”-> ...

  5. android 滚动视图(ScrollView)

    为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...

  6. 左右推拽显示对比图 - jQyery封装 - 附源文件

    闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <! ...

  7. 製程能力介紹&lpar;SPC introduction&rpar; &HorizontalLine; Cpk之製程能力解釋

    Cpk之製程能力解釋 Cpk就是綜合考慮精度與準度的製程能力指標. Cpk=(1-Ck)‧Cp 也就是在考慮Cp的同時,再考慮乘上一個(1-Ck)係數,去彌補Cp之不足,此係數最大時為1,也就是(Ck ...

  8. Adobe Fireworks CS6 Mac破解版

    Mac下一款快速建站的软件--Adobe Fireworks CS6,小子这里有时间就分享出来给更多需要的朋友. Adobe Fireworks CS6能让您在弹指间创作精美的网站和移动应用程序设计, ...

  9. ubuntu16&period;04如何安装floodlight并且连接eclipse

    按顺序走,亲测没出错.用的是Luna R版本的eclipse https://floodlight.atlassian.net/wiki/spaces/floodlightcontroller/pag ...

  10. 如何学习 JavaScript?

    转自:https://www.zhihu.com/question/21064817 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要 ...