JQuery의 Bind() 함수에 대한 심층적인 이해 제공-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JQuery의 Bind() 함수에 대한 심층적인 이해 제공

巴扎黑

Jun 25, 2017 am 11:03 AM

bindjquery이벤트분석하다용법

본 글은 주로 JQuery의 Bind() 이벤트 사용법을 소개하며, Bind() 이벤트의 기능과 특징, 사용법을 예시로 분석합니다. 필요한 친구들이 참고할 수 있습니다

본 글은 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"가 팝업되고, 버튼을 떠나면 p가 표시된다는 것입니다.

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

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

3.bind() 이벤트 객체

Handler 이 콜백 함수는 매개변수를 받을 수 있습니다. 이 함수가 호출되면 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()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </p>
 </p>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer p");
}
function MyClickInner() {
 alert("Inner p");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I&#39;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를 반환해야 합니다.

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

Bind() 코드 구현:

bind : function(type, data, fn) { 
 return type == "unload" ? 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()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </p>
 </p>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer p");
 }
 function MyClickInner() {
  alert("Inner p");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I&#39;m span");
   event.stopPropagation();
 });
</script>

위 내용은 JQuery의 Bind() 함수에 대한 심층적인 이해 제공의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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