jquery事件绑定方法介绍

更新时间：2022年05月04日 11:37:47 作者：.NET开发菜鸟

这篇文章介绍了jquery事件绑定的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、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事件绑定的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery DOM操作基于命令改变页面
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。
2010-01-01
Jquery插件写法笔记整理
大部分jQuery插件都是这种类型的插件，由于这种插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势
2012-09-09
jQuery数据类型小结(14个)
jQuery除了包含原生JS中的内置数据类型(built-in datatype)，还包括一些扩展的数据类型(virtual types)，如Selectors、Events等，通过本文给大家分享14个jquery数据类型，感兴趣的朋友一起学习吧
2016-01-01
jQuery实现的简单在线计算器功能
这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下
2017-05-05
基于jquery的让textarea自适应高度的插件
jquery extension - auto height text area
2010-08-08
jquery模拟picker实现滑动选择效果
这篇文章主要为大家详细介绍了jquery模拟picker实现滑动选择效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
jQuery选择器querySelector的使用指南
这篇文章主要介绍了jQuery选择器querySelector的使用指南的相关资料,需要的朋友可以参考下
2015-01-01
概述jQuery的元素筛选
这篇文章主要介绍了jQuery的元素筛选，并举例进行说明，希望对大家有所帮助
2016-11-11
jquery插件tooltipv顶部淡入淡出效果使用示例
这是一个加了点淡入淡出效果的顶部tooltip控件，会自动消失,小功能大家参考使用吧
2013-12-12
JQuery radio（单选按钮）操作方法汇总
这篇文章主要介绍了JQuery radio（单选按钮）操作方法汇总,本文讲解了获取选中值、设置选中值、根据Value值设置选中、删除Radio、遍历等内容,需要的朋友可以参考下
2015-04-04