집 > 기사 > 웹 프론트엔드 > jQuery 이벤트 처리의 특징(이벤트 이름 지정 메커니즘)에 대해

jQuery 이벤트 처리의 특징(이벤트 이름 지정 메커니즘)에 대해

不言원래의: 2018-07-02 14:41:301298검색

이 글은 주로 jquery 이벤트 처리의 일부 기능과 jquery 이벤트 이름 지정 메커니즘에 대한 관련 지식을 소개합니다. 소개 내용은 매우 상세하며 관심 있는 친구는 함께 읽어야 합니다.

#🎜 🎜# JQuery의 바인딩() 및 unbind()는 이벤트 바인딩 및 취소 메커니즘을 제공하며, 이를 통해 기본적으로 html에서 지원하는 이벤트는 물론 사용자 지정 이벤트도 바인딩할 수 있습니다. JQuery는 프로그래밍에 큰 유연성을 제공하는 사용자 정의 이벤트를 지원합니다. jquery 이벤트 처리의 몇 가지 기능을 함께 배워보겠습니다.

1. JQuery의 이벤트는 반복적으로 바인딩될 수 있으며 덮어쓰여지지 않습니다.

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

버튼1을 클릭하면 이 두 가지 이벤트 처리 기능이 실행됩니다. 어쩌면 위의 바인딩은 다른 익명 함수이며 다른 메모리 공간을 차지한다고 말할 수도 있습니다. 실제로도 그렇긴 하지만, 동일한 처리 기능이라 할지라도 여전히 중복된 바인딩 문제가 발생합니다. Button1을 클릭하면 다음 이벤트 핸들러 함수도 두 번 호출됩니다.

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

대부분의 경우 이벤트 처리 기능은 한 번만 바인딩하면 되므로 JQuery 이벤트의 반복 바인딩 기능은 이벤트가 여러 번 실행되는 경우에도 주의해야 합니다. 버그가 없습니다. 결국 버그가 아닙니다.

2. 여러 이벤트와 처리 기능을 한 번에 바인딩하려면 바인딩을 사용하세요.

여러 이벤트가 동일한 핸들러 함수를 등록해야 하는 경우 다음 코드를 사용하여 단순화할 수 있습니다(이벤트 이름은 공백으로 구분됨).

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

If 각각 이벤트 처리 기능이 다른 경우 다음 방법(json 개체)을 사용할 수 있습니다.

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

3. 이벤트 개체와 맞춤 매개변수를 전달합니다.

일반적으로 jquery를 사용할 때는 이벤트 객체가 거의 필요하지 않으며 이벤트 처리 함수에 사용자 정의 매개변수를 전달할 필요도 없습니다. 그러나 실제로 이 작업이 필요한 경우 JQuery도 이를 지원합니다.

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

eventObject는 IE, FF의 이벤트 객체와 매우 유사하며 이를 통해 이벤트가 발생할 때 더 자세한 정보를 얻을 수 있습니다. 사용자 정의 매개변수를 지정하면 JQuery는 이를 이벤트 객체의 data 속성에 넣습니다. 즉, eventObject.data를 통해 전달한 매개변수 값을 얻을 수 있습니다.

4. 이벤트 취소의 세 가지 형태.

unbind는 이전에 바인딩된 이벤트 처리 기능을 취소하는 데 사용됩니다. 일반적으로 모든 이벤트 취소, 특정 유형의 이벤트 취소, 특정 유형의 이벤트 취소의 세 가지 형태가 있습니다. . 이벤트 처리 기능입니다.

click, mouseup 및 mousedown 이벤트를 버튼1에 바인딩하고 click 이벤트가 2개의 처리 함수에 바인딩되어 있다고 가정합니다.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

$("#button1").unbind(): 버튼1에 바인딩된 모든 이벤트 핸들러를 취소합니다.

$("#button1").unbind("click"): 버튼1에 바인딩된 클릭 유형 이벤트 핸들러만 취소합니다.

이 두 형식은 이해하기 쉽고 일상 프로그래밍에서 가장 일반적으로 사용되는 방식이기도 합니다. 위 코드에서는 클릭 이벤트 처리 함수 2개를 등록했는데, 두 번째 클릭 이벤트 처리 함수를 취소하고 첫 번째 클릭 이벤트 처리 함수를 유지하려면 어떻게 해야 할까요? 익명 함수를 등록하고 있으므로 이를 구현할 방법이 없습니다. 아래 코드는 잘못되어 예상한 결과를 얻지 못합니다.

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

bind와 unbind는 동일한 익명 함수를 사용하지만 이 두 함수는 서로 다른 메모리 공간을 차지하므로 동일한 JavaScript 개체가 아닙니다. 똑똑하다면 바인딩과 바인딩 해제가 서로 다른 기능을 사용하면 목적을 달성할 수 있을까?라고 생각했을 것입니다. 이는 실제로 그렇습니다. 아래 코드는 정확합니다.

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

이것은 unbind를 사용하는 세 번째 형태입니다. 이 접근 방식은 익명 함수의 사용을 허용하지 않고 전역 함수(최소한)를 노출해야 하기 때문에 매우 좋지 않다는 것을 알 수 있습니다. 요구 사항 바인딩을 해제하면 볼 수 있습니다.) JQuery는 개인적으로 이 문제를 해결하기 위해 설계되었다고 생각하는 이벤트 네임스페이스 메커니즘을 제공합니다.

5. 이벤트 네임스페이스.

위에서 언급했듯이 이벤트 네임스페이스는 세 번째 형태의 바인딩 해제에서 발생하는 문제를 해결하기 위한 것입니다. 다음은 JQuery 공식 API 문서의 설명입니다.

바인딩을 해제하기 위해 핸들러에 대한 참조를 유지하는 대신 이벤트의 이름을 지정하고 이 기능을 사용하여 이벤트 범위를 좁힐 수 있습니다. 바인딩 해제 작업 .

소위 이벤트 네임스페이스는 실제로 이벤트를 참조하기 위해 이벤트 유형 뒤에 점 구문으로 별칭을 추가합니다(예: "click.a", 여기서 "a"). 현재 클릭 이벤트입니다. 유형의 별칭인 이벤트 네임스페이스입니다. 점은 네임스페이스를 정의하는 데 사용되므로 사용자 정의 이벤트를 사용하는 경우 이벤트 이름에 점이 포함되어서는 안 됩니다. 그렇지 않으면 예상치 못한 문제가 발생할 수 있습니다. 이런 종류의 문제는 시도할 필요가 없습니다. 가능하면 특수 문자를 사용하십시오. 그렇지 않으면 문제가 발생할 수 있습니다.

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

볼 수 있는 점: 네임스페이스를 사용하면 특정 이벤트 유형에서 이벤트 처리 기능을 보다 우아한 방법으로 취소할 수 있습니다. 여기에서 언급할 가치가 있습니다. 네임스페이스의 사용은 바인딩 해제와 충돌하지 않으며 위의 세 가지 바인딩 해제 형식은 여전히 정상적으로 사용할 수 있습니다. $("#button1").unbind()는 여전히 버튼1의 모든 이벤트를 취소할 수 있으며 $("#button1").unbind("click")은 여전히 모든 클릭 이벤트를 취소할 수 있습니다. 이 호환성 디자인은 훌륭합니다.

使用命名空间还要1个好处：能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

这段代码我们使用2个命名空间a和b，如果我只想要保留第2个click事件处理函数，其余的全部删除。我们可以有2种方式达到目的：

方式1：

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

方式2：

$("#button1").unbind(".a");

很显然方式2更加简单，更加技巧性，虽然代码更不容易看懂，不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码，只有2种情况：要么别人不行，代码写的烂；要么自己不行，知识懂的少。如果不熟悉某种语言，又怎能用它写好代码呢？所以，代码质量、开发效率，和个人技能水平，团队水平紧密相关。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

jQuery 이벤트 처리의 특징(이벤트 이름 지정 메커니즘)에 대해

관련 기사