jQuery에서 바인딩() 메서드를 사용하는 방법

이 글은 jQuery에서 이벤트 바인딩의 bin() 메소드에 대해 공유할 것입니다. 이는 모든 사람의 학습에 도움이 되기를 바랍니다.

jQuery에서 이벤트를 처리하는 가장 중요한 두 가지 방법은 이벤트 바인딩 바인딩() 메서드와 이벤트 제거 unbind() 메서드입니다. 이는 요소 그룹의 하나 이상의 이벤트에 코드를 추가하는 것입니다. 자세히 바인딩() 메소드

bind() 메소드

bind() 메소드를 사용하는 방법은 선택한 요소에 하나 이상의 이벤트 핸들러를 추가하고 이벤트 발생 시 실행할 함수를 지정하는 것입니다.

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

event: 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트는 공백으로 구분할 수 있으며 유효한 이벤트여야 합니다.

data: 함수에 전달되는 추가 데이터를 나타냅니다.

function: 이벤트가 발생했을 때 실행되는 함수를 말합니다.

Example

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});

Result

링크를 클릭하면 해당 링크가 클릭 이벤트에 바인딩되므로 상자가 팝업되어 표시됩니다. 클릭 시 콘텐츠, jQuery 클릭된 요소는 익명 함수 내의 "this" 키워드에 자동으로 할당되어 해당 요소를 활성화한 요소에 액세스할 수 있으며 동시에 여러 이벤트가 트리거될 수 있습니다

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});

결과

길이와 너비가 100px인 분홍색 div 요소를 만듭니다. 이 div의 경우 "event"라는 매개변수와 함께 익명 함수를 사용하여 mousemove 이벤트를 바인딩합니다. 마우스가 롤오버되면 페이지에서 마우스 커서가 현재 어디에 있는지 알려주는 pageX 및 pageY 속성에 액세스할 수 있습니다. 상자 왼쪽 상단에 표시된 대로. div 요소의 다른 위치로 커서를 이동하면 다양한 값이 업데이트되어 표시되는 것을 볼 수 있습니다. 또한, 바인딩() 메서드는 데이터를 통해 자체 데이터를 전달하고 이벤트 개체가 이에 액세스하도록 할 수도 있고 설정할 수도 있습니다. 이벤트를 바인딩할 때 이벤트가 호출될 때 이 값을 읽을 수 있습니다.

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>

result

값을 키와 값의 맵으로 바인딩() 메서드의 보조 매개변수로 전달하고 여러 번 전달합니다. 쉼표 값으로 구분합니다. 우리는 이벤트 객체의 데이터 속성을 사용합니다. 이 속성에는 전달된 각 값에 대한 하위 속성이 포함되어 있습니다. 즉, event.data.message를 사용하여 메시지 매개변수의 값에 액세스할 수 있습니다. 이벤트 핸들러에서 "text" 변수의 값이 변경되었음에도 프로그램 실행 결과는 여전히 "Hello, world!"입니다. jQuery 이벤트 바인딩.

위 내용은 jQuery에서 바인딩() 메서드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!