Jquery 위임(),bind(),live(),on() 바인딩 이벤트 메서드에 대한 자세한 설명
머리말
프로젝트에서는 dom 요소를 추가하거나 삭제하기 위해 jquery를 사용하는 경우가 많기 때문에 나중에 참조할 수 있도록 바인딩, 라이브, 위임의 차이점을 간략하게 요약하겠습니다. 앞으로는 정원 친구들을 도와주세요. 기사에 부적절한 내용이 있으면 바로잡아 주시기 바랍니다.
bind()
간략한 설명
bind()일치하는 요소에 하나 이상의 이벤트 핸들러를 추가합니다.
사용 방법
$(selector).bind(event,data,function)
이벤트： 필수 항목, click, dblclick 등과 같은 요소에 추가된 하나 이상의 이벤트
단일 이벤트 처리: 예: $("click",data , 기능);
이벤트는 함수에 개별적으로 바인딩되므로 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다. ; 에 만들 수 있습니다: 바인딩이 더 유연하고 함수를 이벤트에 별도로 바인딩할 수 있습니다. Data: 선택 사항; 매개변수를 전달해야 합니다.
기능: 필수; 바인딩 이벤트가 발생할 때 실행되어야 하는 함수
예
적용 Jquery 버전 에 적용되지만, 공식 홈페이지, jbind() 함수 이후 권장됨 query1.7 버전 대신 on()을 사용하세요. 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：必需；当绑定事件发生时，需要执行的函数； 举例说明 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：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 ry1.4.2# 이상 on()간단한 설명 on() 지정된 요소에 대해 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. on() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다. 사용방법 이벤트: 필수 ; 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：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 이상; ry1 .7 버전이 나온 후에는 이 바인드()를 대체하는 데 사용됩니다. 및 live() 바인딩 이벤트 방법 네 가지의 유사점, 차이점, 장점 및 단점 방법 같은 점: 1. 둘 다 단일 요소 및 다중 이벤트 바인딩을 지원합니다. 2. 모든 이벤트는 이벤트 버블링을 통해 이벤트 응답을 위해 문서로 전달됩니다. 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!<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>
live()<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><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><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><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>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7725
15
1643
14
1397
52
1290
25
1233
29
BTCC 튜토리얼: BTCC 교환에서 MetaMask 지갑을 바인딩하고 사용하는 방법은 무엇입니까?
Apr 26, 2024 am 09:40 AM
MetaMask(중국어로 Little Fox Wallet이라고도 함)는 무료이며 호평을 받는 암호화 지갑 소프트웨어입니다. 현재 BTCC는 MetaMask 지갑에 대한 바인딩을 지원합니다. 바인딩 후 MetaMask 지갑을 사용하여 빠르게 로그인하고 가치를 저장하고 코인을 구매할 수 있으며 첫 바인딩에는 20 USDT 평가판 보너스도 받을 수 있습니다. BTCCMetaMask 지갑 튜토리얼에서는 MetaMask 등록 및 사용 방법, BTCC에서 Little Fox 지갑을 바인딩하고 사용하는 방법을 자세히 소개합니다. MetaMask 지갑이란 무엇입니까? 3천만 명 이상의 사용자를 보유한 MetaMask Little Fox Wallet은 오늘날 가장 인기 있는 암호화폐 지갑 중 하나입니다. 무료로 사용할 수 있으며 확장으로 네트워크에 설치할 수 있습니다.
Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 계정이 정상인지 어떻게 확인하나요?
Mar 21, 2024 pm 10:11 PM
오늘날 정보 폭발 시대에 개인 브랜드와 기업 이미지 구축은 점점 더 중요해지고 있습니다. Xiaohongshu는 중국 최고의 패션 라이프 공유 플랫폼으로서 많은 사용자의 관심과 참여를 이끌어냈습니다. 자신의 영향력을 확대하고 콘텐츠 전파의 효율성을 높이려는 사용자에게 하위 계정 바인딩은 효과적인 수단이 되었습니다. 그렇다면 Xiaohongshu는 어떻게 하위 계정을 연결합니까? 계정이 정상인지 확인하는 방법은 무엇입니까? 이 기사에서는 이러한 질문에 대해 자세히 답변해 드립니다. 1. Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 1. 메인 계정에 로그인: 먼저 Xiaohongshu 메인 계정에 로그인해야 합니다. 2. 설정 메뉴를 엽니다. 오른쪽 상단 모서리에 있는 "나"를 클릭한 다음 "설정"을 선택합니다. 3. 계정 관리 입력: 설정 메뉴에서 "계정 관리" 또는 "계정 도우미" 옵션을 찾아 클릭하세요.
Toutiao에서 Douyin을 바인딩하는 단계 및 방법
Mar 22, 2024 pm 05:56 PM
1. 터우티아오를 엽니다. 2. 오른쪽 하단에 있는 내를 클릭하세요. 3. [시스템 설정]을 클릭하세요. 4. [계정 및 개인정보 설정]을 클릭하세요. 5. [두음] 오른쪽에 있는 버튼을 클릭하면 두음이 바인딩됩니다.
Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao Wrap을 Pinduoduo 플랫폼에 추가하는 방법은 무엇입니까?
Mar 19, 2024 pm 02:30 PM
Cainiao 앱은 다양한 물류 정보를 제공할 수 있는 플랫폼입니다. 여기의 기능은 매우 강력하고 사용하기 쉽습니다. 물류 관련 문제가 있으면 여기에서 해결할 수 있습니다. -정지 서비스는 모든 것을 제 시간에 해결할 수 있습니다. 특급 배송 확인, 특급 배송 발송 등은 모두 문제없이 이루어지며 때로는 모든 정보를 쿼리할 수 있습니다. Pinduoduo에서 구매한 상품이 물류 정보를 표시할 수 없는 경우가 있습니다. 실제로 이를 달성하려면 구체적인 방법이 아래에 정리되어 있으며 누구나 확인할 수 있습니다. Cainiao를 Pinduoduo 계정에 연결하는 방법: 1. Cainiao 앱을 열고 메인 페이지로 이동합니다.
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?
Feb 28, 2024 pm 03:12 PM
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.
Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao 앱을 Pinduoduo에 바인딩하는 방법
Mar 19, 2024 pm 05:16 PM
Cainiao Wrap을 사용할 때 Pinduoduo를 묶는 방법을 알고 계십니까? Cainiao Wrap 앱의 공식 버전은 이 플랫폼에서 일부 Pinduoduo의 물류 정보를 자동으로 동기화하지 않습니다. 주문 번호를 복사하거나 휴대폰에서 확인할 수 있습니다. 특급 배송 정보가 있는 경우. 물론, 이 모든 작업은 수동으로 완료해야 합니다. 자세한 내용을 알고 싶으면 와서 편집자와 함께 살펴보세요. Cainiao 앱을 Pinduoduo에 바인딩하는 방법 1. Cainiao 앱을 열고 메인 페이지 왼쪽 상단에 있는 "패키지 가이드"를 클릭합니다. 2. 인터페이스에는 다양한 쇼핑 웹사이트가 있으며, 계정을 묶을 수 있습니다. 3. 다른 전자상거래 플랫폼을 가져오려면 클릭하세요. 4. 사용자 인증: Pinduoduo를 클릭하여 인터페이스로 이동합니다.
Xiaomi 자동차 앱을 충전 파일 장치에 바인딩하는 방법
Apr 01, 2024 pm 06:52 PM
샤오미에서 출시한 최신 Mi su7 모델 자동차가 각종 핫 검색어를 휩쓸고 있습니다. 우연히 자동차를 사고 싶어하는 많은 사용자들이 샤오미 su7 모델 자동차를 선택했습니다. 그렇다면 샤오미 자동차 앱을 사용하여 자동차를 묶는 방법은 무엇입니까? 충전을 위해 가정용 충전 파일을 사용하기로 결정했다면 이 튜토리얼 가이드가 자세한 소개를 제공할 것입니다. 도움이 되기를 바랍니다. 먼저 Xiaomi 모바일 앱을 열고 오른쪽 하단에 있는 My 버튼을 클릭한 다음 My 인터페이스에서 충전 파일을 묶는 페이지에 들어간 후 스캔 코드를 클릭합니다. 아래 버튼을 누르고 충전 파일의 QR 코드를 스캔하면 QR 코드를 사용하여 충전 파일을 앱에 연결할 수 있습니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
