JQuery中取消已经注册的事件以及合成事件

最新推荐文章于 2023-04-03 17:27:35 发布

原创最新推荐文章于 2023-04-03 17:27:35 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery中取消已经注册的事件以及合成事件

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何使用jQuery为HTML元素注册事件处理器，并演示了如何取消已注册的事件，包括特定事件类型和所有事件。同时，展示了hover合成事件的使用方法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js"></script>
</head>
<body>
    <input type="button" id="btn1" value="注册事件"/>
    <input type="button" id="btn2" value="取消事件" />
    <script type="text/javascript">
        $(function () {
            //为注册时间按钮注册事件
            $("#btn1").click(function () {
                //为注册事件的按钮增加边框
                $(this).css({ "border": "5px solid red" });
            });
            //为取消事件按钮注册事件
            $("#btn2").click(function () {
                //只取消click事件
                $("#btn1").unbind("click");
                //取消所有事件
                $("#btn1").unbind();
            });
            //合成事件，比如hover事件就是mouseover和mouseout的合成事件
            //hover事件需要两个处理函数参数，第一个是mouseover的,第二个是mouseout的
            $("#btn1").hover(function () {
                $(this).css({ "color": "red" });
            }, function () {
                $(this).css({ "color": "black" });
            });
        });
    </script>
</body>
</html>