JavaScript_javascript 기술의 사용자 정의 이벤트 사용 분석

이 기사의 예에서는 JavaScript의 맞춤 이벤트 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

웹 프론트엔드 개발에서는 많은 사람들이 js의 커스텀 이벤트를 사용하지 않을 수도 있지만, 상대적으로 큰 프로젝트를 수행하는 경우, 특히 여러 사람이 공동으로 개발하는 경우 커스텀 이벤트가 매우 중요합니다. 그렇다면 js의 사용자 정의 이벤트는 무엇입니까? 먼저 예를 살펴보겠습니다.
프런트엔드 개발자 A는 다음과 같은 기능을 캡슐화합니다.

코드 복사 코드는 다음과 같습니다.

function move(){
Alert(a); //N개의 코드를 나타냅니다
}

잠시 후 프런트엔드 개발자 B는 A를 기반으로 이 기능을 강화할 것이므로 다음과 같이 작성합니다.

코드 복사 코드는 다음과 같습니다.

function move(){
Alert(a); //N개의 코드를 나타냅니다
Alert(b); //N개의 코드를 나타냅니다
}

문제를 발견하셨나요? B는 A의 변수, 함수 등과 관련된 이름 지정 및 충돌 문제에 주의해야 합니다. 잠시 후 프런트엔드 개발자 C도 이 기능을 강화할 예정입니다.

코드 복사 코드는 다음과 같습니다.

function move(){
Alert(a); //N개의 코드를 나타냅니다
Alert(b); //N개의 코드를 나타냅니다
Alert(c); //N개의 코드를 나타냅니다
}

이때는 매우 답답할 것이고, C로 코드를 작성하는 것도 쉽지 않을 것이라 확신합니다. 이 문제를 해결하는 방법은 다음과 같이 서로 영향을 주지 않고 동일한 이벤트를 요소에 추가할 수 있다는 것을 알고 있습니다.

코드 복사 코드는 다음과 같습니다.

window.addEventListener('click',function(){

경고(1);
} ,거짓);
window.addEventListener('클릭',function(){
경고(2);
} ,거짓);

페이지를 클릭하면 1과 2가 모두 팝업되며, 다음 방법을 사용하여 함수를 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.addEventListener('move',function(){

경고(3);
} ,거짓);
window.addEventListener('move',function(){
경고(4);
} ,거짓);

이런 식으로 move();를 실행하면 3번과 4번이 팝업됩니다. 여기서 이동은 실제로는 함수인 커스텀 이벤트입니다
이벤트 핸들러에 매개변수를 전달하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

//매개변수가 있는 함수를 매개변수가 없는 함수로 캡슐화

함수 createFunction(obj, strFunc) {
var args = []; //이벤트 핸들러에 전달된 매개변수를 저장할 args를 정의합니다.
If (!obj) obj = window; //전역 함수인 경우 obj=window; //이벤트 핸들러에 전달된 매개변수 가져오기
for (var i = 2; i //매개변수 없는 함수를 사용하여 이벤트 핸들러 호출을 캡슐화합니다.
반환 함수() {
          obj[strFunc].apply(obj, args) // 지정된 이벤트 핸들러에 매개변수 전달
}
}
함수 클래스1() {
}
class1.prototype = {
표시: 함수() {
This.onShow();
},
onShow: 함수() { }
}
함수 objOnShow(userName) {
Alert("안녕하세요," userName);
}
함수 테스트() {
var obj = new class1();
var userName = "테스트";
​ obj.onShow = createFunction(null, "objOnShow", userName);
Obj.show();
}

"이벤트 메커니즘은 매개변수 정보 없이 함수 이름만 전달하기 때문에 매개변수를 전달할 수 없습니다." "이 문제를 해결하려면 반대 방향으로 생각해 볼 수 있습니다. 매개변수를 전달하는 방법에 대해 생각하고 매개변수 없이 이벤트 핸들러를 작성하는 방법을 고려하십시오. 이 프로그램은 매개변수가 있는 이벤트 핸들러를 기반으로 작성되었으며 여기서 "프로그램"은 createFunction.함수를 교묘하게 사용합니다. 매개변수가 있는 함수를 매개변수 없는 함수로 캡슐화하는 Apply 함수입니다. 마지막으로 맞춤 이벤트의 다중 바인딩을 구현하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

// 맞춤 이벤트에서 다중 바인딩을 지원하도록 설정
//매개변수가 있는 함수를 매개변수가 없는 함수로 캡슐화
함수 createFunction(obj, strFunc) {
var args = []; //이벤트 핸들러에 전달된 매개변수를 저장할 args를 정의합니다.
If (!obj) obj = window; //전역 함수인 경우 obj=window; //이벤트 핸들러에 전달된 매개변수 가져오기
for (var i = 2; i //매개변수 없는 함수를 사용하여 이벤트 핸들러 호출을 캡슐화합니다.
반환 함수() {
          obj[strFunc].apply(obj, args) // 지정된 이벤트 핸들러에 매개변수 전달
}
}
함수 클래스1() {
}
class1.prototype = {
표시: 함수() {
          if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
}
},
AttachOnShow: 함수(_eHandler) {
If (!this.onShow) { this.onShow = [] }
This.onShow.push(_eHandler);
}
}
함수 objOnShow(userName) {
Alert("안녕하세요," userName);
}
함수 objOnShow2(testName) {
Alert("표시:" testName);
}
함수 테스트() {
var obj = new class1();
var userName = "당신의 이름";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "테스트 메시지"));
Obj.show();
}

AttachOnShow 메소드의 기본 아이디어는 배열을 푸시하는 것임을 알 수 있습니다. 실제로 이벤트 실행이 완료된 후 이벤트 처리 기능을 제거할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

//매개변수가 있는 함수를 매개변수가 없는 함수로 캡슐화
함수 createFunction(obj, strFunc) {
var args = []; //이벤트 핸들러에 전달된 매개변수를 저장할 args를 정의합니다.
If (!obj) obj = window; //전역 함수인 경우 obj=window; //이벤트 핸들러에 전달된 매개변수 가져오기
for (var i = 2; i //매개변수 없는 함수를 사용하여 이벤트 핸들러 호출을 캡슐화합니다.
반환 함수() {
          obj[strFunc].apply(obj, args) // 지정된 이벤트 핸들러에 매개변수 전달
}
}
함수 클래스1() {
}
class1.prototype = {
표시: 함수() {
          if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
}
},
attachmentOnShow: function(_eHandler) { // 이벤트 첨부
If (!this.onShow) { this.onShow = [] }
This.onShow.push(_eHandler);
},
detachOnShow: function(_eHandler) { // 이벤트 제거
If (!this.onShow) { this.onShow = [] }
This.onShow.pop(_eHandler);
}
}
함수 objOnShow(userName) {

Alert("안녕하세요," userName);
}
함수 objOnShow2(testName) {
Alert("표시:" testName);
}
함수 테스트() {
var obj = new class1();
var userName = "당신의 이름";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "테스트 메시지"));
Obj.show();
obj.detachOnShow(createFunction(null, "objOnShow", userName));
Obj.show(); // 하나를 제거하고 나머지 하나를 표시합니다
obj.detachOnShow(createFunction(null, "objOnShow2", "테스트 메시지"));
Obj.show(); // 둘 다 제거하고 둘 다 표시하지 않음
}

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.