jQuery를 통해 요소에 클릭 및 더블클릭 이벤트를 추가하는 방법

藏色散人
풀어 주다: 2021-08-27 11:09:30
원래의
2516명이 탐색했습니다.

이전 글 "JavaScript를 사용하여 배열의 마지막 항목 삭제(3가지 방법)"에서 JavaScript를 사용하여 배열의 마지막 항목을 삭제하는 방법을 소개해드렸는데요, 관심 있는 친구들은 가서 배워보세요~

이 글에서 설명하는 중요한 내용은 jQuery를 통해 요소에 클릭 및 더블클릭 이벤트를 추가하는 방법입니다.

이 글에서는 bind() 메소드를 통해 클릭 및 더블클릭 이벤트를 추가하겠습니다. 바인딩() 메서드는 선택한 요소에 하나 이상의 이벤트 핸들러와 이벤트가 발생할 때 실행할 함수를 추가합니다. 또한 선택한 요소의 끝(여전히 내부)에 지정된 콘텐츠를 삽입하는appendTo() 메서드를 사용하여 요소에 결과를 추가합니다. 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>
로그인 후 복사

效果如下:

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

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

参数分别表示:
event必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
로그인 후 복사
  • appendTo()语法是$(content).appendTo(selector)
    코드로 바로 가보겠습니다:

    参数分别表示:
    content必需。规定要插入的内容(可包含 HTML 标签)。
    selector必需。规定把内容追加到哪个元素上。
    로그인 후 복사
    효과는 다음과 같습니다:

    GIF 2021-8-27 금요일 오전 10-58-23.gif

    • bind() 구문은 $(selector).bind(event,data,function,map)

      rrreee
      • appendTo()입니다. 구문은$(content).appendTo(selector)rrreee

        참고: 🎜🎜jQuery 버전 1.7부터 on() 메서드는 선택한 요소에 이벤트 핸들러를 추가하는 데 선호되는 방법입니다. 🎜🎜append() 및appendTo() 메서드는 동일한 작업을 수행합니다. 차이점은 콘텐츠 및 선택기의 위치 지정과 함수를 사용하여 콘텐츠를 추가하는 기능입니다. 🎜🎜마지막으로 "🎜🎜Basic JavaScript Tutorial🎜🎜"을 여러분께 추천드리고 싶습니다~ 모두들 배우신 것을 환영합니다~🎜

    위 내용은 jQuery를 통해 요소에 클릭 및 더블클릭 이벤트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!