>  기사  >  웹 프론트엔드  >  jQuery의 세 가지 바인딩/One/Live 이벤트 바인딩을 사용하는 방법을 자세히 설명하세요.

jQuery의 세 가지 바인딩/One/Live 이벤트 바인딩을 사용하는 방법을 자세히 설명하세요.

巴扎黑
巴扎黑원래의
2017-06-25 11:08:041228검색

이 글에서는 jQuery의 세 가지 바인딩/One/Live 이벤트 바인딩 방법을 주로 소개합니다. 도움이 필요한 친구들이 와서 참고하면 좋습니다.

jQuery는 훌륭한 JavaScript 프레임워크입니다. 이전 버전에서는 주로 바인딩() 메서드를 사용했습니다. 새 버전에는 One()과 Live()라는 두 가지 메서드가 더 있습니다. 다음은 이러한 메서드의 사용을 소개합니다.

1.
jquery의 이벤트 모델에는 바인딩과 바인딩 해제라는 두 가지 기본 이벤트 바인딩 기능이 있습니다. 이 두 기능의 의미는 페이지 요소를 일치시키고 관련 이벤트를 처리하는 것입니다. 예를 들어 JS에서 자주 사용하는
onfocus, onblur, onmouseover, onmousedown과 같은 이벤트를 바인드 매개변수로 전달할 수 있습니다.

$("#id").bind('click',function(){alert('tt!')});

bind의 첫 번째 매개변수는 다음을 나타냅니다. 이벤트 유형(참고: 추가할 필요 없음) ), 함수의 코드는 실행하려는 논리 코드입니다. 다중 이벤트 바인딩: 바인딩을 사용하면 여러 이벤트를 바인딩할 수도 있습니다(예:


$( 'a')). bind('click mouseover',function(){

최신 jquery1.4 버전에서는 바인드 방식이 개선되었습니다. 바인드 메소드에 JSON과 유사한 객체를 전달하여 한 번에 바인드할 수 있습니다. 다중

이벤트 처리

함수

$('a').bind({

click:function(){alert('a');},mouseover:function(){alert('a again! ')}

함수 함수에서는 JavaScript 개체를 함수 메서드에 전달할 수도 있습니다. 이 이벤트 개체는 일반적으로 생략할 수 있습니다.

Bind에는 일반적으로 문제를 해결하기 위해 거의 사용되지 않는 매개 변수 데이터도 있습니다. 같은 변수를 같은 방법으로 처리하면

var productname="Sports Shoes";

$('#Area').bind('click',function(){ alert(productname);
});

productname="necklace",

$('#Area').bind('click',function(){alert(productname);
});

변수 productname이 재할당되었으므로 출력 메시지는 모두 "목걸이"입니다. 여기서 이해가 되지 않으면 JavaScript의 변수 범위를 확인하여 이 문제를 해결하려면 데이터 매개변수


var productname ="Sports Shoes";

$를 사용해야 합니다. ('#Area').bind('click',{pn:productname},function(){alert(event.data.pn);
});
productname="목걸이 ",
$('#Area ').bind('click',{pn:productname},function(){
alert(event.data.pn);
});


2.1회 바인딩 일치하는 요소의 각 특정 이벤트(예: 클릭)에 대한 이벤트 핸들러입니다. 이 메소드는 바인딩 메소드와 동일한 매개변수를 가지고 있으며, 일치하는 요소의 이벤트 처리는 한 번만 실행되며, 실행 후에는 다시 실행되지 않습니다. 웹 요청이 다시 시작됩니다.
$('a').one('click',function(){
alert('a');
})

페이지에서 a 요소를 클릭한 후, 사용자는 첫 번째 두 번째 요청을 시작합니다. 그렇지 않으면 요소를 다시 클릭해도 메시지 대화 상자가 팝업되지 않습니다.

3. live


이 방법은 주로 동적으로 추가된 요소를 처리할 수 있으며 나중에 추가된 요소에 이벤트를 바인딩할 수도 있습니다.
$('a').live('click,function(){
alert('show message!');
})

그런 다음 요소를 추가하면

$('body' ).appnend('Another Element');

그런 다음 요소는 이벤트 핸들러 함수 경고도 트리거합니다.

또한 jQuery는 .bind('click')를 단순화하기 위해 .click()과 같은 표준 이벤트 유형을 바인딩하는 몇 가지 간단한 방법도 제공합니다.

이벤트 이름은 총 다음과 같습니다: Blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select , 제출, keydown, keypress, keyup, 오류 등

위 내용은 jQuery의 세 가지 바인딩/One/Live 이벤트 바인딩을 사용하는 방법을 자세히 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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