Jquery 이벤트를 추가하는 방법에는 여러 가지가 있습니다.

jquery 이벤트를 추가하는 방법은 다음과 같습니다. 1. 태그에서 직접 JavaScript를 사용합니다. 코드는 다른 라이브러리나 파일을 도입하지 않고도 간결하고 이해하기 쉽습니다. 2. "onclick", "onmouseover" 및 기타 방법을 사용하여 재구성합니다. 관리 및 공유가 더 쉬운 별도의 JavaScript 파일 3. 여러 이벤트 핸들러를 단일 요소에 바인딩할 수 있는 ".bind()" 바인딩 이벤트 4. 위임된 이벤트 핸들러를 지원하는 ".on()" 바인딩 이벤트 코드 복잡성.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

jQuery는 이벤트 핸들러를 추가하는 다양한 방법을 제공하며 그 중 네 가지가 있습니다.

1. 레이블에서 직접 JavaScript를 사용하세요

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

장점:

• 코드가 간단하고 이해하기 쉽습니다

• 다른 라이브러리나 파일을 도입할 필요가 없습니다

단점:

• 유지 관리 및 재사용에 도움이 되지 않음

• 높은 결합도, JavaScript 및 HTML 코드가 혼합되어 있음

2. onclick ` / `onmouseover` 등

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```

장점:

• 태그에서 직접 JavaScript를 사용하는 것에 비해 코드를 별도의 JavaScript 파일로 재구성할 수 있어 관리 및 공유가 더 쉽습니다.

• 체인 지원

단점:

• 설정할 이벤트와 핸들러가 많은 경우 이 방법은 장황해지고 유지 관리가 어려울 수 있습니다.
  

• 객체 메서드는 객체 자체의 수명 주기에 대한 이벤트에 의존합니다.

3 `.bind()`를 사용하여 이벤트를 바인딩합니다

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```

장점:

• 여러 이벤트 핸들러를 단일 요소에 바인딩할 수 있습니다
  

• `$.bind()` `$.unbind()` 메소드를 사용하여 이벤트 등록/바인딩 해제 프로세스를 모니터링할 수 있습니다

단점:

• `.bind()`는 jQuery 버전 3.0에서 더 이상 사용되지 않으므로`를 사용하는 것이 좋습니다. on()`

4. `.on()`을 사용하여 이벤트 바인딩

다음은 jQuery의 `.on()` 메서드를 사용한 이벤트 바인딩에 대한 샘플 코드입니다.

```javascript
$(document).on('click', '#myButton', function() {
  // 事件处理程序
});
```

`.on( )` 메소드 세 개의 매개변수를 허용할 수 있습니다. 첫 번째 매개변수는 수신/바인딩될 이벤트 유형입니다. 두 번째 매개변수는 응답 요소 세트를 제한하는 데 사용되는 선택적 선택기 문자열 또는 DOM 노드입니다. 세 번째 매개변수는 이벤트가 발생할 때 발생하는 콜백 함수입니다. 수행할 작업입니다.

장점:

• `.on()` 메서드를 사용하면 뛰어난 유연성으로 문서/요소에 대한 여러 이벤트 핸들러를 추가할 수 있습니다.
  

• 추가된 이벤트 핸들러는 `off()` 메소드를 통해 제거할 수 있습니다.

• `.on()` 메서드는 위임된 이벤트 핸들러도 지원하므로 많은 수의 요소를 조작하거나 요소를 동적으로 추가할 때 코드의 복잡성이 크게 줄어듭니다.

단점:

• 연결된 이벤트 및 요소 수에 따라 많은 이벤트 핸들러를 직접 바인딩하면 성능 문제가 발생할 수 있습니다.
  

• jQuery 버전 1.7 미만에서는 `.on()`을 사용할 수 없습니다. `.bind()`와 같은 다른 메소드를 사용해야 합니다(이 메소드는 향후 더 이상 사용되지 않을 예정입니다). ) 및 `.delegate ()`.

위 내용은 Jquery 이벤트를 추가하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!