집 >웹 프론트엔드 >JS 튜토리얼 >JQuery_jquery의 Bind() 이벤트 사용 분석

JQuery_jquery의 Bind() 이벤트 사용 분석

WBOY원래의: 2016-05-16 16:01:011110검색

이 글에서는 JQuery의 Bind() 이벤트 사용법을 예시를 통해 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

먼저 정의를 살펴보겠습니다.

.bind( eventType [, eventData], handler(eventObject))

.Bind() 메서드의 주요 기능은 바인딩된 개체에 대한 일부 이벤트 메서드 동작을 제공하는 것입니다. 용어에서 세 가지 매개변수의 의미는 다음과 같습니다.

eventType은 문자열형 이벤트 타입으로, 바인딩해야 하는 이벤트입니다. 이러한 유형에는 다음이 포함될 수 있습니다: 흐림, 초점, focusin, focusout, 로드, 크기 조정, 스크롤, 언로드, 클릭, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 변경, 선택, 제출, keydown, keypress , 키업, 오류. 여기서 주목해야 할 점은 JQuery가 아닌 JavaScript의 이벤트 메서드가 여기에서 사용된다는 것입니다. JQuery의 이벤트 메서드는 모두 JavaScript 앞에 onclick, onblur 등과 같은 추가 "on"이 있다는 것입니다.

eventData 매개변수는 선택 매개변수이지만 평소에는 거의 사용되지 않습니다. 이 매개변수가 제공되면 몇 가지 추가 정보를 이벤트 핸들러 함수에 전달할 수 있습니다. 이 매개변수는 클로저로 인해 발생하는 문제를 처리하는 데 매우 유용하게 사용됩니다. 나중에 예를 들어보겠습니다.

Handler는 바인딩에 사용되는 처리 번호이며 실제로는 데이터 처리 후 해당 메서드인 콜백 함수이기도 합니다.

1. 첫 번째 단순 바인딩() 이벤트---Hello Word

<input id="BtnFirst"type="button"value="Click Me"/>
<script>
$(function () {
 $("#BtnFirst").bind("click",function(){
  alert("Hello World");
 });
})
</script>

페이지를 연 후 'Click Me' 버튼을 클릭하면 'Hello World'가 팝업됩니다. 이것은 가장 간단한 바인딩 이벤트입니다. 매우 간단합니다.

2. 여러 이벤트 바인딩

bind()를 통해 여러 이벤트를 바인딩할 수 있습니다(실제로 이는 JQuery 및 Linq에서 매우 유명한 체인 프로그래밍입니다). 구현된 주요 기능은 클릭하면 "Hello World"가 팝업되고, 버튼을 떠나면 div가 표시된다는 것입니다.

<div>
<input id="BtnFirst"type="button"value="Click Me"/></div>
<div id="TestDiv"style=" width:200px; height:200px; display:none; ">
</div>
<script>
$(function () {
 $("#BtnFirst").bind("click", function () {
  alert("Hello World");
 }).bind("mouseout", function () {
  $("#TestDiv").show("slow");
 });
})
</script>

이 코드 페이지는 버튼을 클릭하면 "Hello World"가 팝업되고, 나가면 div가 표시되므로 이해하기 쉽습니다. JQuery의 애니메이션의 경우 "느림", "빠름" 및 "보통"을 사용할 수 있습니다. 물론 관련 밀리초도 설정할 수 있습니다.

3.bind() 이벤트 객체

핸들러 콜백 함수는 매개변수를 받을 수 있습니다. 이 함수가 호출되면 JavaScript 이벤트 객체가 매개변수로 전달됩니다.

이 이벤트 객체는 일반적으로 필요하지 않고 생략할 수 있는 매개 변수입니다. 이벤트 핸들러 함수를 바인딩할 때 트리거될 때 무엇을 해야 하는지 명확하게 알 수 있고 일반적으로 충분한 정보를 얻을 수 있기 때문입니다. 그러나 때로는 이벤트 초기화 과정에서 사용자 환경에 대한 추가 정보를 얻어야 하는 경우도 있습니다.

JQuery 공식 웹사이트의 예를 들어보세요.

<style> 
 p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
 p.over {background:#ccc;}
 span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
 $("p").bind("click", function(event){
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $("span").text("Click happened! " + str);
 });
 $("p").bind("dblclick", function(){
  $("span").text("Double-click happened in " + this.nodeName);
 });
 $("p").bind("mouseenter mouseleave", function(event){
  $(this).toggleClass("over");
 });
</script>

여기서 주요 기능은 사용자가 p 개체를 클릭할 때 페이지를 기준으로 한 현재 좌표를 스팬 태그에 표시하는 것입니다. 매개변수를 전달합니다.

4.unbind() 이벤트

unbind([type],[data],Handler)는 바인딩()의 반대 작업이며 일치하는 각 요소에서 바인딩된 이벤트를 제거합니다. 매개변수가 없으면 바인딩된 모든 이벤트가 삭제됩니다. 바인딩()으로 등록한 사용자 정의 이벤트를 바인딩 해제할 수 있습니다. 이벤트 유형이 매개변수로 제공되면 해당 유형의 바인딩된 이벤트만 제거됩니다. 바인딩할 때 핸들러가 두 번째 인수로 전달되면 해당 특정 이벤트 핸들러만 제거됩니다.

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </div>
 </div>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer Div");
}
function MyClickInner() {
 alert("Inner Div");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I'm span.");
}
$(function () {
 $("#MySpan").bind("click", foo);
})  
$(function () {
 $("#LooseFocus").unbind("click", foo);
})
</script>

위 코드도 이해하기 쉽습니다. 사용자가 스팬 위에 마우스를 놓으면 해당 스팬의 클릭 이벤트가 취소됩니다. 그래서 결국에는 몸 안에 경고만 뜨게 될 뿐입니다.

마지막으로 one() 이벤트의 사용법을 간단히 이해해 보겠습니다. 실제로 one과 바인딩은 동일하며 둘 다 바인딩 이벤트에 대해 생성됩니다. 하나는 기본적으로 바인딩과 동일하지만, 차이점은 jQuery.event.add를 호출할 때 등록된 이벤트 처리 함수가 약간 조정된다는 점입니다. 들어오는 이벤트 처리 기능을 프록시하기 위해 jQuery.event.proxy라는 이름이 사용되었습니다. 이벤트가 이 에이전트의 함수 호출을 트리거하면 해당 이벤트가 먼저 캐시에서 삭제된 후 등록된 이벤트 함수가 실행됩니다. 다음은 fn에 의해 등록된 이벤트 함수의 참조를 얻는 클로저의 적용입니다.

사용 규칙:

one(type,[data],fn)

일회성 이벤트 핸들러를 일치하는 각 요소에 대한 특정 이벤트(예: 클릭)에 바인딩합니다. 이 이벤트 핸들러는 각 개체에 대해 한 번만 실행됩니다. 그 외의 규칙은 Bind() 함수와 동일합니다. 이 이벤트 핸들러는 기본 동작을 방지하는 데 사용할 수 있는 이벤트 개체를 수신합니다. 기본 동작을 취소하고 이벤트가 버블링되는 것을 방지하려면 이벤트 핸들러가 false를 반환해야 합니다.

bind와 one의 각 코드 구현을 게시하면 독자가 약간 비교할 수 있습니다.

Bind() 코드 구현:

bind : function(type, data, fn) { 
 return type == "unload" &#63; this.one(type,data,fn) : this.each(function(){
 //fn || data, fn && data实现了data参数可有可无 
  jQuery.event.add(this, type, fn || data, fn && data); 
 }); 
}

One() 코드 구현:

one : function(type, data, fn) { 
 var one = jQuery.event.proxy(fn || data, function(event) { 
  jQuery(this).unbind(event, one); 
  return (fn || data).apply(this, arguments);
 //this->当前的元素 
 }); 
 return this.each(function() { 
  jQuery.event.add(this, type, one, fn && data); 
 }); 
}

5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件有可能会触发外面的事件，所以给大伙一个借鉴吧。

这里可以参考一下javascript事件冒泡的文章：《JavaScript 事件冒泡简介及应用》。

简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。

则冒泡实例代码：

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </div>
 </div>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer Div");
 }
 function MyClickInner() {
  alert("Inner Div");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I'm span");
   event.stopPropagation();
 });
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

성명：

이전 기사：자바스크립트 클로저(Closure)_자바스크립트 스킬에 대한 자세한 설명다음 기사：자바스크립트 클로저(Closure)_자바스크립트 스킬에 대한 자세한 설명

JQuery_jquery의 Bind() 이벤트 사용 분석

관련 기사