jquery의 몇 가지 이벤트 귀속 방식
2893 단어 jquery
1.bind() 함수는 이미 존재하는 요소에 대해서만 이벤트를 설정할 수 있다.그러나live(),on(),delegate()는 미래에 새로 추가된 요소의 이벤트 설정을 지원합니다.
2. bind () 함수는 jquery 1.7 버전은 이전에 비교적 추앙을 받았는데 1.7 버전이 나온 후에 정부는bind()를 사용하지 않고 대체 함수는 on()이다. 이것도 1.7 버전에 새로 추가된 함수이다. 마찬가지로 live() 함수를 대체할 수 있고live() 함수는 1.9 버전에서 삭제되었다.3. live () 함수와 delegate () 함수는 유사하지만 live () 함수는 실행 속도, 유연성, CSS 선택기 지원에 있어서delegate () 보다 떨어집니다. 구체적인 상황을 알고 싶으면 이것을 찍으십시오.http://kb.cnblogs.com/page/94469/
4.bind()는 Jquery의 모든 버전을 지원합니다.live () 는 jquery 1을 지원합니다.9-;delegate () 는 jquery 1을 지원합니다.4.2+;on () 은 jquery 1을 지원합니다.7+;
추천합니다.on() 이벤트를 바인딩하는 방법:
1. on 방법은 페이지 요소에 추가된 이벤트를 동적 귀속시킬 수 있습니다
예를 들어 페이지에 동적으로 추가된DOM 요소는 이벤트를 등록한 요소가 언제 추가될지 걱정할 필요도 없고 반복해서 귀속할 필요도 없다
live (),bind (),delegate () 밑바닥은 모두 on () 을 사용합니다
2 .on 방법은 효율을 높일 수 있다
$('li').click(function(){ alert(111);});
$(document).on('click','li',function(){ alert(222222)});//테스트 결과 효율성 향상
3. 온의 사용
-- 여러 이벤트가 하나의 함수를 바인딩합니다.
//
$(function(){
$("p").on('mouseover mouseout',function(){
alert(1111);
});
});-- 여러 이벤트에 여러 함수 바인딩
//
$(function(){
$("a").on({
mouseover:function(){$("t1").css('background-color','red');},
mouseout:function(){$("t2").css('background-color','yellow');},
click:function(){$("t3").css('background-color','blue');}
});
});-- 사용자 지정 이벤트 바인딩
$(document).ready(function(){
$("p").on("myevent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myevent",["helloworld"]);
});
});-- 함수로 데이터 전송
//
function handlerName(event){
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});-- 생성되지 않은 요소에 사용
//
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("This is a new paragraph.
").insertAfter("button");
});
});-- on 메서드로 바인딩된 이벤트를 제거해야 하는 경우
// on off
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off('click');
});
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
