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으로 문의하세요.

관련 기사

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

See all articles