이 기사에서는 JavaScript의 사용자 정의 이벤트 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
웹 프론트 엔드 개발에서 많은 사람들이 JS 사용자 정의 이벤트를 사용하지 않을 수 있지만, 특히 여러 사람이 함께 발전 할 때 비교적 큰 프로젝트를 수행하는 경우 사용자 정의 이벤트가 매우 중요합니다. 그렇다면 JS의 맞춤형 이벤트는 무엇입니까? 먼저 예를 살펴 보겠습니다.
프론트 엔드 개발자 A는 기능을 캡슐화합니다.
다음과 같이 코드를 복사하십시오 : function mak () {
경고 (a); // 이것은 n 라인 코드를 나타냅니다
}
잠시 후 프론트 엔드 개발자 B는 A를 기반 으로이 기능을 풍부하게하므로 다음과 같이 쓸 것입니다.
다음과 같이 코드를 복사하십시오 : function mak () {
경고 (a); // 이것은 n 라인 코드를 나타냅니다
경고 (b); // 이것은 코드의 n 줄을 나타냅니다
}
문제를 발견 했습니까? B는 변수, 기능 등의 이름 지정 및 충돌 문제에주의를 기울여야합니다.
다음과 같이 코드를 복사하십시오 : function mak () {
경고 (a); // 이것은 n 라인 코드를 나타냅니다
경고 (b); // 이것은 코드의 n 줄을 나타냅니다
경고 (c); // 이것은 코드의 n 줄을 나타냅니다
}
이 시점에서 미쳤을 것입니다. C가 코드를 작성하는 것이 쉽지 않을 것이라고 확신합니다. 이 문제에 대한 해결책은 이벤트를 사용자 정의하는 것입니다. 요소가 서로 영향을 미치지 않고 동일한 이벤트를 추가 할 수 있음을 알고 있습니다.
코드 사본은 다음과 같습니다. window.adeventListener ( 'click', function () {
경고 (1);
} ,거짓);
window.addeventListener ( 'click', function () {
경고 (2);
} ,거짓);
페이지를 클릭하면 1과 2가 팝업 되므로이 방법을 사용하여 기능을 정의 할 수 있습니다.
코드 사본은 다음과 같습니다. window.adeventListener ( 'move', function () {
경고 (3);
} ,거짓);
window.addeventListener ( 'move', function () {
경고 (4);
} ,거짓);
이런 식으로 Move ();, 3 및 4가 팝업됩니다. 여기에서 Move는 사용자 정의 이벤트입니다. 실제로 기능입니다.
매개 변수를 이벤트 처리기에 전달하는 방법을 살펴 보겠습니다.
다음과 같이 코드를 복사하십시오. // 매개 변수를 사용하여 함수를 매개 변수없이 함수로 캡슐화하십시오.
함수 createEfunction (obj, strfunc) {
var args = []; // 전달 된 이벤트 핸들러에 전달 된 매개 변수를 저장하기 위해 Args를 정의합니다
if (! obj) obj = 창; // 글로벌 함수 인 경우 obj = 창;
// 이벤트 핸들러에 전달 된 매개 변수를 가져옵니다
for (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// 매개 변수가없는 함수로 이벤트 핸들러를 사용합니다.
return function () {
obj [strfunc] .apply (obj, args); // 매개 변수를 지정된 이벤트 핸들러로 전달합니다
}
}
함수 class1 () {
}
class1.prototype = {
쇼 : function () {
this.onshow ();
},
Onshow : function () {}
}
기능 objonshow (사용자 이름) {
ALERT ( "hello," + username);
}
기능 test () {
var obj = 새로운 class1 ();
var username = "테스트";
obj.onshow = createEfunction (null, "objonshow", 사용자 이름);
obj.show ();
}
"이벤트 메커니즘은 매개 변수 정보가없는 함수 이름 만 전달하기 때문에 매개 변수를 전달하는 것은 불가능합니다." 이것은 나중에 이야기입니다. "이 문제를 해결하기 위해 매개 변수를 전달하는 방법을 고려하지 않고 매개 변수없이 이벤트 핸들러를 구축하는 방법을 고려하지 않고 반대 아이디어에서 고려할 수 있습니다. 프로그램은 매개 변수가있는 이벤트 핸들러를 기반으로 작성되며 외부 캡슐화입니다." 여기서 "프로그램"은 CreateEfunction 함수로, 적용 함수를 영리하게 사용하여 매개 변수가있는 함수를 매개 변수가없는 함수로 캡슐화합니다. 마지막으로, 사용자 정의 이벤트 용 다중 바인딩을 구현하는 방법을 살펴 보겠습니다.
다음과 같이 코드를 복사하십시오. // 여러 바인딩을 지원할 사용자 정의 이벤트를 활성화하려면
// 매개 변수가있는 함수를 매개 변수없이 함수로 캡슐화
함수 createEfunction (obj, strfunc) {
var args = []; // 전달 된 이벤트 핸들러에 전달 된 매개 변수를 저장하기 위해 Args를 정의합니다
if (! obj) obj = 창; // 글로벌 함수 인 경우 obj = 창;
// 이벤트 핸들러에 전달 된 매개 변수를 가져옵니다
for (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// 매개 변수가없는 함수로 이벤트 핸들러를 사용합니다.
return function () {
obj [strfunc] .apply (obj, args); // 매개 변수를 지정된 이벤트 핸들러로 전달합니다
}
}
함수 class1 () {
}
class1.prototype = {
쇼 : function () {
if (this.onshow) {
for (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
AttachOnshow : function (_ehandler) {
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_ehandler);
}
}
기능 objonshow (사용자 이름) {
ALERT ( "hello," + username);
}
함수 objonshow2 (testname) {
Alert ( "show :" + testName);
}
기능 test () {
var obj = 새로운 class1 ();
var username = "당신의 이름";
obj.attachonshow (CreateEfunction (null, "objonshow", username));
obj.attachonshow (createEfunction (null, "objonshow2", "테스트 메시지"));
obj.show ();
}
AttachOnshow 메소드 구현의 기본 아이디어는 배열을 푸시하는 것입니다. 실제로 이벤트가 실행 된 후 이벤트 핸들러 기능을 제거하고 아래에서 별도로 구현할 수도 있습니다.
다음과 같이 코드를 복사하십시오. // 매개 변수를 사용하여 함수를 매개 변수없이 함수로 캡슐화하십시오.
함수 createEfunction (obj, strfunc) {
var args = []; // 전달 된 이벤트 핸들러에 전달 된 매개 변수를 저장하기 위해 Args를 정의합니다
if (! obj) obj = 창; // 글로벌 함수 인 경우 obj = 창;
// 이벤트 핸들러에 전달 된 매개 변수를 가져옵니다
for (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// 매개 변수가없는 함수로 이벤트 핸들러를 사용합니다.
return function () {
obj [strfunc] .apply (obj, args); // 매개 변수를 지정된 이벤트 핸들러로 전달합니다
}
}
함수 class1 () {
}
class1.prototype = {
쇼 : function () {
if (this.onshow) {
for (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
attachonshow : function (_ehandler) {// 추가 이벤트
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_ehandler);
},
Detachonshow : function (_ehandler) {// 이벤트 제거
if (! this.onshow) {this.onshow = []; }
this.onshow.pop (_ehandler);
}
}
기능 objonshow (사용자 이름) {
ALERT ( "hello," + username);
}
함수 objonshow2 (testname) {
Alert ( "show :" + testName);
}
기능 test () {
var obj = 새로운 class1 ();
var username = "당신의 이름";
obj.attachonshow (CreateEfunction (null, "objonshow", username));
obj.attachonshow (createEfunction (null, "objonshow2", "테스트 메시지"));
obj.show ();
obj.detachonshow (CreateEfunction (null, "objonshow", username));
obj.show (); // 하나를 제거하고 나머지를 표시합니다
obj.detachonshow (createEfunction (null, "objonshow2", "테스트 메시지"));
obj.show (); // 둘 다 제거되고 아무도 표시되지 않습니다
}
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.