一、bind()

bing()用来绑定事件，例如：

二、unbind()

unbind()用来解除事件的绑定。例如：

三、on()

on()方法用来绑定事件，例如：

四、off()

off()方法用来解除事件的绑定，例如：

注意：

建议用on()方法绑定事件，效率更高。

五、示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件绑定</title>

      <!--引入jQuery-->

      <script src="../jquery-3.3.1.js"></script>

      <!--javascript-->

      <script>

         $(function(){

               // 正常情况下的鼠标移入背景色变为灰色，移出时变为白色

               // 鼠标移入

              /*  $("#menu li").mouseover(function(){

                   $(this).css("background-color","gray");

               });

               // 鼠标移出

               $("#menu li").mouseout(function(){

                   $(this).css("background-color","white");

               }); */

               //bind()绑定事件

               $("#menu li").bind("mouseover",function(){

                   $(this).css("background-color","gray");

               });

               $("#menu li").bind("mouseout",function(){

                   $(this).css("background-color","white");

               });

               // bind()绑定多个事件

             /*   $("#menu li").bind("click mouseover",function(){

                   $(this).css("background-color","gray");

               }); */

               // bind()绑定多个事件

            /*    $("#menu li").bind({

                   click:function(){$(this).css("background-color","#ccc");},

                   mouseover:function(){$(this).css("background-color","yellow");}

               }); */

               // 解除绑定事件

               //$("#menu li").unbind(); // 解除所有的事件

               //$("#menu li").unbind("click");// 只解除click事件，保留鼠标移入事件

               // on()绑定事件

               // 处理添加背景色效果

               $("#menu").on("mouseover","li",{},function(){

                   $(this).css("background-color","#ccc");

               });

               $("#menu").on("mouseout","li",{},function(){

                   $(this).css("background-color","yellow");

               });

               // off()解除绑定

               $("#menu").off("mouseout","li"); // 只移除moustout事件

         });

      </script>

</head>

<body>

    <input type="button" value="添加" />

    <ul id="menu">

        <li>HTML</li>

        <li>XHTML</li>

        <li>CSS</li>

    </ul>

</body>

</html>

jQuery（十二）；事件绑定的更多相关文章

  1. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  2. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  3. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  4. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  5. jQuery新的事件绑定机制on()

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...

  6. jQuery中是事件绑定方式--on、bind、live、delegate

    概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...

  7. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  8. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

  9. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  10. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

随机推荐

  1. python appium 封装获取toast方法

    获取toast text封装,传入toast 部分文本,返回全部文本 def get_toast_text(self,text): try: toast_loc = (By.XPATH, " ...

  2. 如何使用git 提交作业 收作业

    如何使用git 提交作业 收作业 方法论: 今天就来用一个通俗易懂的自然模型来解释Git的commit,pull和push.不过,我们首先要理解两个名词,remote,local. remote,翻译 ...

  3. jQuery学习笔记（jquery.validate插件）

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

  4. Android调试桥－Android Debug Birdge详解

    原文:http://android.eoe.cn/topic/summary Android调试桥-Android Debug Birdge Android调试桥(adb)是一个多功能的命令行功具,它 ...

  5. tomcat 8080 冲突 急速解决方法 -------屡试不爽

    cmd    输入: netstat -ano|findstr 8080 记住 最后的端口号**** 再输入: taskkill  /pid  ****  /f

  6. ThinkPHP32 MODULE_ALLOW_LIST 存在的bug 不生效

    1)BUG: 假设存在Api Home Admin Member 模块.仅仅想让用户訪问 Api Home,不同意訪问Admin Member. 必须将Admin Member 写在 MODULE_D ...

  7. Android 相关的资源

    源码分析: http://blog.csdn.net/luoshengyang/article/details/8923485 中文博客: 英文博客: https://github.com/andro ...

  8. Android中的MVP架构分解和实现

    1.概述 传统的Android开发架构通常是MVC模式. Model:业务逻辑和实体模型 View:相应于布局文件 Controllor:相应于Activity 单独从逻辑看起来很好,与我们做Web开 ...

  9. UVa 10697 - Firemen barracks

    题目:已知三点.求到三点距离同样的点. 分析:计算几何.分三类情况讨论: 1.三点共线,不成立. 2.多点重叠,有多组解. 3.是三角形,输出中点. 说明:注意绝对值小于0.05的按0计算:负数的四舍 ...

  10. diocp3-服务器的连接上限是到底是多少?diocp3的一个装13测试(8W连接数)

    服务器的连接上限是到底是多少?diocp3开源项目的一个装13测试(8W连接数) 测试DEMO路径 diocp3\samples\ECHO 之前群里说一台服务器最多是High(Word)的连接数655 ...