jQuery事件绑定（处理，委派，切换）

最新推荐文章于 2024-09-08 18:41:13 发布

darling.0

最新推荐文章于 2024-09-08 18:41:13 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jQuery 事件绑定

本文链接：https://blog.youkuaiyun.com/daliyuan350649623/article/details/53819863

web前端专栏收录该内容

23 篇文章

订阅专栏

本文深入讲解了jQuery中事件处理的方法，包括事件绑定、解除绑定、委托等核心概念，并通过实例展示了如何利用这些方法实现文字提示和图片提示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery事件绑定（处理，委派，切换）

事件处理

bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind(“click”, fn ); 类型：A.click( fn );
unbind(type ) 解绑bind绑定事件
one(type ,fn ) 给当前对象绑定一次事件。
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑
trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger(“submit”) ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。

事件委派

live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。
die(type) 解绑事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //<input id="h01" type="button" value="1只能点击一次，之后失效" /> 
            $("#h01").one("click",function(){
                alert("只能点我一次");
            });

            //<input id="h02" type="button" value="2可以点击多次" />
            //绑定多个事件时，都执行 
            //为了只解绑特定事件，使用事件别名
            $("#h02").bind("click.a",function(){
                alert("可以多次执行");
            });
            $("#h02").bind("click.b",function(){
                alert("可以多次执行222222222222");
            });

            //<input id="h03" type="button" value="3解绑2" />
            //事件全部都会解绑
            $("#h03").click(function(){
                $("#h02").unbind("click.b");
            });
            //<input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />
            $("#h04").live("click",function(){
                //使用live添加的按钮h04自动具备相同的事件
                $("body").append("<input type='button' id='h04'/>");
            });
            //<input id="h05" type="button" value="5 解绑4"/>
            $("#h05").click(function(){
                $("#h04").die("click");
            });
        });
    </script>

</head>
<body>
    <input id="h01" type="button" value="1只能点击一次，之后失效" /> 
    <input id="h02" type="button" value="2可以点击多次" /> 
    <input id="h03" type="button" value="3解绑2" /> 
    <input id="h04" type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" /> 
    <input id="h05" type="button" value="5 解绑4"/> 
</body>
</html>

事件切换

hover(over , out)简化版，鼠标移入和移出，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
toggle( fn , fn , fn ,…) 执行click事件，每点击一次执行一个fn

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02{
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //在两个函数之间切换
            $("#e01").toggle(function(){
                alert("aa");    
            },function(){
                alert("bb");
            });

            //在两个事件切换，代替了mouseover，mouseout
            $("#e02").hover(function(){
                $("#divMsg").html("鼠标移入"); 
            },function(){
                $("#divMsg").html("鼠标移出");
            });
        });
    </script>

</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span> <br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span> <br/>
</body>
</html>

事件案例1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        //a标签的title属性就是在鼠标放上去的时候的提示
        //手动生成提示，并显示
        $(".mytooltip").mouseover(function(){
            //因为各自都有自己的提示数据，所以使用数据绑定处理

            //先得到绑定的数据
            var temp = $(this).data("tishi");//第一次得到的是undefined---false
            if(!temp){
                //绑定数据
                temp = $(this).attr("title");
                $(this).data("tishi",temp);    
                $(this).removeAttr("title");
            }
            //为了让div显示title内容
            //var tt = $(this).attr("title");
            //鼠标移入时，生成提示，再显示
            var $div = $("<div id='tooltip'></div>");
            $div.html(temp);

            //$(this).removeAttr("title");
            //把div加入页面
            $div.appendTo("body").show();
            //设置提示现实的位置
            $div.offset({"left":0,"top":0});

        }).mouseout(function(){
            $("#tooltip").remove();
        }).mousemove(function(event){
            //鼠标移动时，提示信息的位置也随着动
            $("#tooltip").offset({"left":event.pageX,"top":event.pageY});
        });



    });

</script>
</head>
<body>
<p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>

事件案例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
    $(function(){
        var x = 10;
        var y = 20;
        var href;

        $("a[class=tooltip]").mouseover(function(e){
            //1 获取对应标签的自带提示
            //var title = $("a[class=tooltip]").attr("title");
            //this代表的是DOM对象(页面中的元素)
            href = this.href;

            //删除自带提示
            this.href = "";

            //2 创建标签用于自定义提示
            var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>");

            //3 将自定义提示的标签，添加到body标签下
            $("body").append($div);

            //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            }).show(1000);

        }).mouseout(function(){
            this.href = href;
            $("#tooltip").remove();
        }).mousemove(function(e){
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            });
        });
    });
</script>

</head>
<body>
<h3>有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
    </ul>
</body>
</html>