jQuery에서 bind와 live 메소드의 차이점은 무엇입니까?
bind와 live 함수의 차이점을 알고 싶습니다.
나에게 그들은 거의 동일한 것 같습니다.
라이브 / 바인드 방법의 이점을 읽었 지만 차이점에 대해서는 알려주지 않았습니다.
감사!
.bind ()는 호출이 수행 될 때 존재하거나 선택자와 일치하는 요소에 이벤트를 첨부합니다. 나중에 생성되거나 클래스가 변경 되었기 때문에 앞으로 일치하는 요소는 바운드 이벤트를 발생시키지 않습니다.
.live ()는 기존 및 향후 일치하는 요소에 대해 작동합니다. jQuery 1.4 이전에는 click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 이벤트로 제한되었습니다.
요컨대 : .bind()현재 jQuery 객체에서 선택한 항목에만 적용됩니다. .live()현재 일치하는 모든 요소와 향후 추가 할 요소에 적용됩니다.
그들 사이의 근본적인 차이점 live()은 이벤트 버블 링 을 사용 한다는 것입니다 . 즉, 버튼을 클릭하면 해당 버튼이 요소 <p>의 <div>,,에 존재할 수 있습니다 <body>. 따라서 실제로는 실제로 모든 요소를 동시에 클릭하는 것입니다.
live()이벤트 핸들러를 요소가 아닌 문서 에 연결하여 작동합니다 . 해당 버튼을 클릭하면 이전에 설명한 것처럼 문서가 동일한 클릭 이벤트를 수신합니다. 그런 다음 이벤트가 대상으로하는 요소 줄을 검색하고 쿼리와 일치하는 요소가 있는지 확인합니다.
결과는 두 가지입니다. 첫째, 이벤트가 발생하면 암시 적으로 추가되므로 새 요소에 이벤트를 계속 다시 적용 할 필요가 없음을 의미합니다. 그러나 더 중요한 것은 (상황에 따라 다름) 코드가 훨씬 가볍다는 것을 의미합니다! <img>페이지에 50 개의 태그가 있고 다음 코드를 실행하는 경우 :
$('img').click(function() { /* doSomething */ });
... 그 함수는 각 요소에 복사 됩니다. 그러나이 코드가있는 경우 :
$('img').live('click', function() { /* doSomething */ });
... 그런 다음 해당 함수는 문서의 한 위치에만 저장되고 이벤트 시간에 쿼리와 일치하는 모든 항목에 적용됩니다.
그러나 이러한 버블 링 동작으로 인해 모든 이벤트를 이러한 방식으로 처리 할 수있는 것은 아닙니다. Ichiban이 언급했듯이 이러한 지원되는 이벤트는 click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup입니다.
Bind는 호출 할 때 현재 DOM의 모든 일치 항목에 대해 지정된 패턴에 이벤트를 바인딩합니다. Live는 이벤트가 변경 되더라도 현재 DOM 및 DOM의 향후 일치에 대해 지정된 패턴에 이벤트를 바인딩합니다.
예를 들어 $ ( "div"). bind ( "hover", ...)를 바인드하면 해당 시점에 DOM의 모든 "div"에 적용됩니다. 그런 다음 DOM을 조작하고 추가 "div"를 추가하면 해당 hover 이벤트가 바인딩되지 않습니다. bind 대신 live를 사용하면 이벤트가 새 div에도 전달됩니다.
이것에 대한 좋은 읽기 : http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
요즘 (jQuery를 1.7 이후)이 CSTE 연구진를 사용하여 사용되지 않는 () 함수 - http://api.jquery.com/on/
이 시나리오를 상상해보십시오.
- 몇 가지
<img>요소가 있습니다.$('img').bind('click', function(){...});- 추가 이미지 추가 (
get(), 또는html(), 무엇이든 사용) - 새 이미지에는 바인딩이 없습니다 !!
물론 $('img')...2 단계에서 새 이미지가 존재 하지 않았기 때문에 이벤트 핸들러를 이미지에 바인딩하지 않았습니다.
이제 이렇게하면 :
- 몇 가지
<img>요소가 있습니다.$('img').live('click', function(){...});- 추가 이미지 추가 (
get(), 또는html(), 무엇이든 사용) - 새로운 이미지는 어떻게 바인딩이!
마법? 아주 조금. 사실 jQuery는 일반 이벤트 핸들러를 DOM 트리의 상위에있는 다른 요소 (본문? 문서? 알 수 없음)에 바인딩하고 이벤트 버블 링을 허용합니다. 제네릭 핸들러에 도달하면 live()이벤트와 일치하는지 확인 하고 만약 그렇다면 요소가 live()호출 전후에 생성되었는지 여부에 관계없이 시작됩니다 .
그들이 말한 것에 덧붙여, 나는 bind당신이 할 수있는 시간 / 장소 를 고수하고 필요할 live때만 사용 하는 것이 최선이라고 생각 합니다.
이러한 모든 jQuery 메서드는 선택기 또는 요소에 이벤트를 연결하는 데 사용됩니다. 그러나 그들은 모두 서로 다릅니다.
.bind () : 이벤트를 바인딩하는 가장 쉽고 빠른 방법입니다. 그러나 bind ()의 문제는 동일한 선택자와 일치하는 동적으로 추가 된 요소에 대해 작동하지 않는다는 것입니다. bind ()는 미래 요소가 아닌 현재 요소에만 이벤트를 첨부합니다. 그 이상으로 큰 선택을 다룰 때 성능 문제가 있습니다.
.live () : 이 메서드는 bind ()의 단점을 극복합니다. 동적으로 추가 된 요소 또는 향후 요소에 대해 작동합니다. 큰 페이지에서 성능이 좋지 않기 때문에이 메서드는 jQuery 1.7부터 더 이상 사용되지 않으며 사용을 중지해야합니다. 이 방법을 사용하면 연결이 제대로 지원되지 않습니다.
나는 내 자신의 어리 석음으로 인해 약간의 디버그를 한 후에 이것을 추가하고 싶었습니다. 내 페이지의 버튼 클래스에 .live ()를 적용했습니다. 쿼리 문자열에 전달하려는 올바른 ID를 렌더링하고 ajax 호출로 원하는 작업을 수행한다고 가정합니다. 내 앱에는 인벤토리 항목과 관련된 버튼이 동적으로 추가되었습니다. 예를 들어, 주문에 콜라를 추가하려면 카테고리를 'COKE'버튼으로 드릴 다운하십시오. 맨 위에서 다시 드릴 다운하고 'BUDLITE'를 추가합니다. AJAX 호출을 통해 해당 항목을 테이블에 입력 할 때마다.
However, since I bound .live() to the entire class of buttons, it would remember each ajax call I had made and re-fire it for each subsequent button! It was a little tricky because I wasn't exactly clear on the difference between bind and live (and the answer above is crystal about it), so I figured I'd put this here just in case somebody was doing a search on this stuff.
There is a way to get the live effect but its kind of nasty.
$(this).unbind('mouseout').bind('mouseout',function(){ });
this will clear the previous and reset the new. It has seemed to work fine for me over time.
Difference between live and livequery is discussed here .
'developer tip' 카테고리의 다른 글
| 가장 가치있는 .Net Compact Framework 팁, 트릭 및 Gotcha-Avoiders는 무엇입니까? (0) | 2020.11.16 |
|---|---|
| C #의 저장 프로 시저에서 반환 값 가져 오기 (0) | 2020.11.16 |
| Vim에서 커서 아래에있는 모든 현재 용어를 바꿉니다. (0) | 2020.11.16 |
| Silverlight에서 XAML의 날짜 / 시간 서식 지정 (0) | 2020.11.16 |
| 결과를 오늘 날짜와 비교 하시겠습니까? (0) | 2020.11.16 |