JQuery中DOM事件合成用法实例分析

在JQuery中，DOM事件合成是一种将多个事件绑定到同一个元素上的方式，实现了事件的多重监听与响应。本文将结合示例说明，介绍DOM事件合成的详细用法。

一、基本语法

JQuery中的DOM事件合成基本语法如下：

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

参数说明：

selector: 用于选择事件监听的元素，可以是元素名称，id、class等
event: 事件名称，如click、show、hide等
childSelector: 子元素选择器，用于限定事件监听范围，可选项
data: 事件数据，也可以是对象，可选项
function: 监听事件发生后执行的函数

二、示例说明1

下面是一个常见的示例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery事件合成示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 50px auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="test">点击我试试？</div>
    <script>
        $(document).ready(function() {
            $("#test").on({
                click: function() {
                    $(this).css("background-color", "red");
                },
                mouseover: function() {
                    $(this).css("width", "150px");
                },
                mouseout: function() {
                    $(this).css("width", "100px");
                }
            });
        });
    </script>
</body>
</html>

这个示例使用on方法将click、mouseover和mouseout事件绑定到同一个元素上。当用户点击元素时，元素的背景色变红，鼠标移入元素时，元素的宽度变成150px，鼠标移出元素时，元素的宽度变回100px。

三、示例说明2

下面是另一个示例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery事件合成示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        ul {
            width: 200px;
            margin: 50px auto;
        }
        li {
            list-style-type: none;
            padding: 10px;
            background-color: green;
            color: #fff;
            cursor: pointer;
        }
        li.selected {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
    <script>
        $(document).ready(function() {
            $("li").on("click", function() {
                $(this).addClass("selected").siblings().removeClass("selected");
            });
        });
    </script>
</body>
</html>

这个示例使用on方法将click事件绑定到li元素上。当用户点击一个li元素时，该元素的class为"selected"，其他li元素的class为"selected"都会被移除。

以上，就是本文的JQuery中DOM事件合成用法实例分析的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery中DOM事件合成用法实例分析 - Python技术站

JQuery中DOM事件合成用法实例分析

相关文章