Jquery의 바인딩 이벤트 메소드 요약(bind() 및 on())
- 高洛峰원래의
- 2016-12-08 16:46:231040검색
一.bind()
사용법: $(selector).bind(event,data,function)
event: 요소에 하나 이상의 이벤트가 추가되었습니다. click, dblclick 등
단일 이벤트 처리: $(selector).bind("click",data,function);
다중 이벤트 처리: 1. 공백을 사용하여 여러 이벤트 분리 $(selector).bind("click dbclick mouseout",data,function);
과 같은 이벤트 2. 중괄호를 사용하여 $(selector).bind(와 같은 여러 이벤트를 유연하게 정의합니다. {event1:function, event2:function, ...})
3. 공간 분리 방법: 바인딩은 비교적 엄격하며 동일한 함수를 호출하는 여러 이벤트를 처리하는 데 적합합니다.
중괄호 대안: 바인딩이 더 유연하며 함수를 이벤트에 별도로 바인딩할 수 있습니다.
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>
은 모든 버전에 적용 가능하지만 jquery1.7 버전부터 공식 홈페이지에 접속하기 바인드() 함수 대신 on()을 사용하는 것을 권장합니다.
2.ON():
간단한 설명
on()은 지정된 요소에 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 함수를 실행하도록 지정합니다. on() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트에 의해 생성된 새 요소)에서 작동합니다.
사용
$(selector).on(event,childselector,data,function)
이벤트: 요소에 하나 이상의 이벤트가 추가되었습니다. 예를 들면 다음과 같습니다. click, dblclick 등
단일 이벤트 처리: $(selector).on("click",childselector,data,function);
다중 이벤트 처리:
1. $(selector).on("click dbclick mouseout",childseletor,data,function);
과 같이 여러 이벤트를 구분하려면 공백을 사용하세요. 2. 여러 이벤트를 유연하게 정의하려면 중괄호를 사용하세요. $(selector ).on({event1:function, event2:function, ...},childselector);
3. 공간 분리 방법: 바인딩은 상대적으로 엄격하며 함수를 이벤트에 개별적으로 바인딩할 수 없습니다. 여러 이벤트를 처리하는 데 적합합니다.
중괄호 대안: 바인딩이 더 유연하며 이벤트에 함수를 별도로 바인딩할 수 있습니다.
childSelector: 선택적; 이벤트 핸들러 추가, 일반적으로 선택기의 하위 요소입니다.
기능: 필수, 바인딩 이벤트가 발생하는 경우;
<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>Jquery 버전
jquery1.7 이상부터 적용됩니다. 바인드(), 라이브() 바인딩 이벤트 방법;
같은 점:
1. 둘 다 단일 요소와 다중 이벤트 바인딩을 지원합니다. 🎜>
2. 둘 다 전달됩니다. 이벤트 버블링 방법은 이벤트 응답을 위해 이벤트를 문서에 전달합니다. 비교 및 연결:1. 기존 요소에 대한 이벤트. 그러나 live(), on() 및 Delegate()는 모두 향후 새로 추가되는 요소에 대한 이벤트 설정을 지원합니다. 는 다음과 같습니다. 2 jquery1.7 버전 이전의 .bind() 함수 버전 1.7 출시 이후 공식에서는 더 이상 바인드() 사용을 권장하지 않습니다. 이 함수도 버전 1.7에 새로 추가된 함수입니다. 마찬가지로 을 사용하여 live() 함수를 버전 1.9에서 삭제했습니다. 3. () 기능이 있지만 실행 속도, 유연성 및 CSS 선택기 지원 측면에서 live() 기능이 위임보다 우수합니다. 구체적인 상황을 알고 싶다면 여기를 클릭하세요: 4.bind()는 모든 버전의 Jquery를 지원합니다. live()는 jquery1.4.2+를 지원합니다. on()은 jquery1.7+를 지원합니다. 해당 프로젝트는 낮은 버전이므로 Delegate()를 사용하는 것이 좋습니다. 상위 버전의 jquery에서는 대신 on()을 사용할 수 있습니다. 위 내용은 제 개인적인 의견일 뿐입니다.