Jquery에서 on 메소드의 장점은 무엇입니까?

jquery에서 on 메소드의 장점: 1. on() 메소드는 페이지 요소에 동적으로 추가된 이벤트를 바인딩할 수 있으며 추가된 이벤트 핸들러는 현재 및 미래 요소에 적용 가능합니다. 2. on() 메소드는 다음에 할당될 수 있습니다. 하나 이상의 이벤트 핸들러를 추가하면 효율성이 향상될 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

on() 메서드는 선택한 요소와 하위 요소에 하나 이상의 이벤트 핸들러를 추가합니다.

jQuery 버전 1.7부터 on() 메서드는 바인딩(), live() 및 위임() 메서드를 새롭게 대체합니다. 이 방법은 API에 많은 편의성을 제공하며 jQuery 코드 기반을 단순화하므로 권장됩니다.

단일 요소에 대해 별도의 등록 이벤트를 작성하는 것은 번거롭습니다

$("p").click(function(){
  $(this).hide();
});
$("p").mouseenter(function(){
  $(this).css("background","blue");
});

따라서 on

$("p").on({
  click:function(){
    $(this).hide();
  },
  mouseenter:function(){
    $(this).css("background","blue");
  }
});
 
//还可以合并
$("div").on( "mouseenter mouseleave", function(){
    $(this).toggleclass( "current");
})

을 통해 여러 이벤트를 한 번에 등록할 수 있습니다. jQuery로 이벤트를 바인딩하는 방법에는 여러 가지가 있습니다. ) 바인딩 방법에는 2가지가 있습니다.

1. on() 메서드는 페이지 요소에 동적으로 추가되는 이벤트를 바인딩할 수 있습니다.

예를 들어 페이지에 동적으로 추가되는 DOM 요소, .on() 메소드는 등록할 필요가 없습니다. 이 이벤트의 요소가 추가되면 바인딩을 반복할 필요가 없습니다. 일부 학생들은 .bind(), .live() 또는 .delegate() 사용에 익숙할 수 있습니다. 소스 코드를 보면 실제로 .on() 메서드를 호출하고 .live()를 호출하는 것을 알 수 있습니다. 메소드는 jQuery1에서 제거되었습니다.

on() 메서드를 사용하여 추가된 이벤트 핸들러는 현재 및 미래 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.

bind:

function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},

live:

function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},

delegate:

function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

2 on() 메소드는 한 번에 하나 이상의 이벤트 핸들러를 요소에 추가할 수 있으므로 효율성이 향상됩니다

다양합니다. 기사에서 이벤트 바인딩의 효율성을 높이기 위해 이벤트 버블링 및 프록시를 사용할 때 대부분 구체적인 차이점을 나열하지 않는다고 언급했기 때문에 확인하기 위해 작은 테스트를 수행했습니다.

페이지에 5000개의 li이 추가되었다고 가정하고 Chrome 개발자 도구 프로필을 사용하여 페이지 로딩 시간을 테스트합니다.

• 일반 바인딩(그렇게 부르자)

$("li").click(function(){
  console.log(this)
});

$(document).on("click","li",function(){
  console.log(this)
})

바인딩 프로세스의 실행 시간

• 일반 바인딩은 li에 클릭 이벤트를 별도로 등록하는 것과 동일하며, 메모리 사용량은 약 4.2M, 바인딩 시간은 약 72ms입니다.

• .on() 바인딩은 이벤트 프록시를 사용하며 문서에 클릭 이벤트만 등록합니다. 메모리 사용량은 약 2.2M이고 바인딩 시간은 약 1ms입니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 Jquery에서 on 메소드의 장점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!