So fügen Sie über jQuery Klick- und Doppelklickereignisse zu einem Element hinzu-js-Tutorial-php.cn

So fügen Sie über jQuery Klick- und Doppelklickereignisse zu einem Element hinzu

藏色散人

Freigeben： 2021-08-27 11:09:30

Original

2516 Leute haben es durchsucht

Im vorherigen Artikel „Verwenden Sie JavaScript, um das letzte Element aus dem Array zu löschen (3 Methoden)“ habe ich Ihnen vorgestellt, wie Sie JavaScript verwenden, um das letzte Element aus dem Array zu löschen~

Der wichtige Inhalt, der in diesem Artikel erläutert wird, ist die Methode zum Hinzufügen von Klick- und Doppelklickereignissen zu Elementen über jQuery.

In diesem Artikel werden wir Klick- und Doppelklick-Ereignisse über die Methode bind() hinzufügen. Die bind()-Methode fügt dem ausgewählten Element einen oder mehrere Ereignishandler sowie eine Funktion hinzu, die ausgeführt wird, wenn das Ereignis auftritt. Darüber hinaus fügen wir das Ergebnis dem Element hinzu, indem wir die Methode appendTo() verwenden, die den angegebenen Inhalt am Ende (immer noch innerhalb) des ausgewählten Elements einfügt. bind() 方法添加单击和双击事件。bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。此外，我们还会使用appendTo() 方法将结果添加到元素，appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

下面我们直接上代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".clickable_ele").bind("click", function () {
                $("<h4>调用单击事件</h4>")
                    .appendTo(".res");
            });

            $(".clickable_ele").bind("dblclick", function () {
                $("<h4>调用双击事件</h4>")
                    .appendTo(".res");
            });
        });
    </script>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: #ff311f;
        }

        .clickable_ele {
            font-size: 20px;
            font-weight: bold;
            color: #ff7800;
        }

    </style>
</head>

<body>
<h1>PHP中文网</h1>

<h3>
    如何给一个元素添加单击和双击事件?
</h3>

<div class="clickable_ele">
    可点击的元素
</div>

<div class="res"></div>
</body>
</html>

Nach dem Login kopieren

效果如下：

GIF 2021-8-27 星期五上午 10-58-23.gif

bind()语法是$(selector).bind(event,data,function,map)

参数分别表示：
event必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

Nach dem Login kopieren

appendTo()语法是$(content).appendTo(selector)
Gehen wir direkt zum Code:
```
参数分别表示：
content必需。规定要插入的内容（可包含 HTML 标签）。
selector必需。规定把内容追加到哪个元素上。
```
Nach dem Login kopieren
Der Effekt ist wie folgt:
- bind() Syntax ist $(selector).bind(event,data,function,map)
  
  rrreee
  - appendTo() Die Syntax lautet$(content).appendTo(selector)rrreee
    Hinweis: 🎜🎜Seit jQuery Version 1.7 ist die on()-Methode die bevorzugte Methode, um Ereignishandler zu ausgewählten Elementen hinzuzufügen. Die Methoden 🎜🎜append() und appendTo() erfüllen die gleiche Aufgabe; die Unterschiede sind: die Positionierung des Inhalts und des Selektors sowie die Fähigkeit von append(), Funktionen zum Anhängen von Inhalten zu verwenden. 🎜🎜Abschließend möchte ich „🎜🎜Basic JavaScript Tutorial🎜🎜“ jedem empfehlen ~ Willkommen zum Lernen ~ 🎜
Das obige ist der detaillierte Inhalt vonSo fügen Sie über jQuery Klick- und Doppelklickereignisse zu einem Element hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!