Jquery 위임(),bind(),live(),on() 바인딩 이벤트 메서드에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Jquery 위임(),bind(),live(),on() 바인딩 이벤트 메서드에 대한 자세한 설명

黄舟

Jun 26, 2017 am 10:02 AM

bindjquerylive제본

머리말

프로젝트에서는 dom 요소를 추가하거나 삭제하기 위해 jquery를 사용하는 경우가 많기 때문에 나중에 참조할 수 있도록 바인딩, 라이브, 위임의 차이점을 간략하게 요약하겠습니다. 앞으로는 정원 친구들을 도와주세요. 기사에 부적절한 내용이 있으면 바로잡아 주시기 바랍니다.

bind()

간략한 설명

　 bind()일치하는 요소에 하나 이상의 이벤트 핸들러를 추가합니다.

사용 방법

　$(selector).bind(event,data,function)

　이벤트： 필수 항목, click, dblclick 등과 같은 요소에 추가된 하나 이상의 이벤트

　　　　　　 단일 이벤트 처리: 예: $("click",data , 기능);

이벤트는 함수에 개별적으로 바인딩되므로 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다. ;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　에 만들 수 있습니다: 바인딩이 더 유연하고 함수를 이벤트에 별도로 바인딩할 수 있습니다. 　　 Data: 선택 사항; 매개변수를 전달해야 합니다.

　 기능: 필수; 바인딩 이벤트가 발생할 때 실행되어야 하는 함수

예

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery中bind()绑定事件方式</title>
    <style type="text/css">
        .container
        {
            width: 300px;
            height: 300px;
            border: 1px #ccc solid;
            background-color: Green;
        }
        .btn-test
        {
            border: 1px #ccc solid;
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            /*********添加单个事件处理*********/

            $(".btn-test").bind("click", function () {
                //显示隐藏div
                $(".container").slideToggle();
            });

            /********添加多个事件处理********/

            //空格相隔方式
            $(".btn-test").bind("mouseout click", function () {
                //显示隐藏div
                $(".container").slideToggle();
            });

            //大括号替代方式
            $(".btn-test").bind({
                "mouseout": function () {
                    alert("这是mouseout事件!");
                },
                "click": function () {
                    $(".container").slideToggle();
                }
            });

            /********删除事件处理********/
            $(".btn-test").unbind("click");

        });
    </script>
</head>
<body>
    <input type="button" value="按钮" class="btn-test" />
    <div class="container">
    </div>
</body>
</html>

코드 보기적용 Jquery 버전

　에 적용되지만, 공식 홈페이지, jbind() 함수 이후 권장됨 query1.7 버전 대신 on()을 사용하세요.
live()

간략한 설명
　

live() 현재 또는 미래의 일치 요소하나 이상의 이벤트 핸들러를 추가하세요.

Usage

　 $(selector). (이벤트,데이터 ,function)

필수; click, dblclick 등과 같은 하나 이상의 이벤트가 요소에 추가됨 　　　S 단일 이벤트 처리: 예,

$(selector).live("click",data,function);　　　 다중 이벤트 처리: 1. 공백을 사용하여
와 같이 여러 이벤트를 구분합니다.
$(선택기).live("click dbclick mouseout",data,function);

　　　　　　2. 중괄호를 사용하세요 $ (selector)와 같은 여러 이벤트를 유연하게 정의합니다 ({event1 : function, event2 : function, ...}) ㅋㅋㅋ　　　　　　　 공백 사이의 바인딩 기능 데이터: 선택 사항; 전달해야 하는 매개변수;
　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中live()绑定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加单个事件处理*********/ $(".btn-test").live("click", function () { //显示隐藏div $(".container").slideToggle(); }); /********添加多个事件处理********/ //空格相隔方式 $(".btn-test").live("mouseout click", function () { //显示隐藏div $(".container").slideToggle(); }); //大括号替代方式 $(".btn-test").live({ "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }); /********删除事件处理********/ $(".btn-test").die("click"); }); </script> </head> <body> <input type="button" value="按钮" class="btn-test" /> <div class="container"> </div> </body> </html>
View Code

适用Jquery版本

　　jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。

delegate()

简要描述

　　delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式　

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

　　childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；

　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　单事件处理：例如 $(selector).delegate(childselector,"click",data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　   大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中delegate()绑定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /***********单元素添加单事件***********/ //按钮绑定单击事件实现div的显示隐藏 $(".header").delegate("#btn-test1", "click", function () { $(".container").slideToggle(); }); /***********单元素添加多事件***********/ //空格相隔方式 $(".header").delegate("#btn-test1", "click mouseout", function () { $(".container").slideToggle(); }); //大括号替代方式 $(".header").delegate("#btn-test1", { "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }); }); </script> </head> <body> <div class="header"> <input type="button" value="按钮1" class="btn-test" id="btn-test1" /> <input type="button" value="按钮2" class="btn-test" id="btn-test2" /> </div> <div class="container"> </div> </body> </html>
View Code

适用Jquery版本
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ry1.4.2# 이상 on()간단한 설명　 on() 지정된 요소에 대해 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. on() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다. 사용방법
　$(selector).on(even t,childselector,data,function)

　이벤트: 필수 ; click, dblclick 등과 같은 하나 이상의 이벤트가 추가되었습니다.

　　　 단일 이벤트 처리: 예: $(selector).on("click",childselector,data ,function);

　　　 다중 이벤트 처리: 1.

$(selector).와 같이 여러 이벤트를 구분하려면 공백을 사용하세요. on(" 클릭 m dbclick 마우스 아웃 ", childseletor, data, function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　   大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

　　childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中on()绑定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加单个事件处理*********/ $(".header").on("click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); /********添加多个事件处理********/ //空格相隔方式 $(".header").on("mouseout click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); //大括号替代方式 $(".header").on({ "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }, ".btn-test"); //删除事件 $(".header").off("click", ".btn-test"); }); </script> </head> <body> <div class="header"> <input type="button" value="按钮" class="btn-test" /> </div> <div class="container"> </div> </body> </html>

View Code

适用Jquery版本
jquery1.7
이상; ry1 .7 버전이 나온 후에는 이 바인드()를 대체하는 데 사용됩니다. 및 live() 바인딩 이벤트 방법 네 가지의 유사점, 차이점, 장점 및 단점 방법 같은 점:

　1. 둘 다 단일 요소 및 다중 이벤트 바인딩을 지원합니다. 2. 모든 이벤트는 이벤트 버블링을 통해 이벤트 응답을 위해 문서로 전달됩니다.
比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中四种方式给未来元素设置事件</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //利用bind()方法，给P标签设置click方法 ======失败没有任何反应======= $(".container p").bind("click", function () { alert("bind()添加单击事件成功!"); }); //利用live()方法.给P标签设置click方法 =======成功调用方法============ $(".container p").live("click", function () { alert("live()添加单击事件成功!"); }); //利用delegate()方法.给P标签设置click方法 =======成功调用方法============ $(".container").delegate("p", "click", function () { //显示隐藏div alert("delegate()添加单击事件成功!"); }); //利用on()方法.给P标签设置click方法 =======成功调用方法============ $(".container").on("click", "p", function () { //显示隐藏div alert("on()添加单击事件成功!"); }); //按钮添加P标签 $(".btn-test").click(function () { $(".container").append("<p>这是新增的段落!</p>"); }); }); </script> </head> <body> <input type="button" class="btn-test" value="添加元素" /> <div class="container"> </div> </body> </html>

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
2.bind() 함수는 jquery1.7 이전과 비교됩니다. 버전 1.7 출시 이후 공식에서는 더 이상 바인딩() 사용을 권장하지 않습니다. 또한 버전 1.7에 새로 추가된 기능인 on()도 사용할 수 있습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 버전 1.9에서 삭제된 live() 함수를 대체하는 데 사용됩니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

3. live() 함수는 Delegate() 함수와 유사하지만 실행 속도, 유연성 및 CSS 선택기 측면에서 live() 함수가 Delegate()보다 떨어집니다. 지원
4.bind()는 모든 버전의 Jquery를 지원합니다. live()는 jquery1.4.2+를 지원합니다. on()은 jquery1.7+를 지원합니다. ㅋㅋㅋ 요약　프로젝트에서 참조하는 jquery 버전이 낮은 경우 jquery의 상위 버전에서는 on()을 대신 사용할 수 있습니다. 위 내용은 제 개인적인 의견일 뿐이므로 자유롭게 의견을 보내주세요.

위 내용은 Jquery 위임(),bind(),live(),on() 바인딩 이벤트 메서드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.