자바스크립트 커스텀 이벤트_javascript 스킬에 대한 사전 연구

또한, "이벤트 메커니즘을 통해 클래스를 독립적인 모듈로 설계하고 이벤트를 통해 외부와 통신할 수 있어 프로그램 개발 효율성이 향상됩니다."저는 C# 프로그래머가 이벤트의 이점을 깊이 이해하고 있다고 믿습니다. 좋아요, 코드는 저렴합니다.
function class1() { // 가장 간단한 이벤트 디자인 패턴
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1()
obj.onShow = function () {
alert( " test " );
}
obj.show()
}
이벤트 핸들러에 매개변수를 전달하는 방법을 살펴보겠습니다.
/ / 매개변수화된 함수를 매개변수 없는 함수로 캡슐화
function createFunction(obj, strFunc) {
var args = [] // 이벤트 핸들러에 전달된 매개변수를 저장할 인수를 정의합니다.
if ( !obj) obj = window; // 전역 함수인 경우 obj=window;
// 이벤트 핸들러에 전달된 매개변수를 가져옵니다.
for ( var i = 2 ; i // 이벤트 핸들러 호출을 캡슐화하기 위해 매개변수 없는 함수를 사용합니다.
return function () {
obj[strFunc].apply(obj, args) // 지정된 이벤트 핸들러에 매개변수 전달
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow ();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " userName); function test() {
var obj = new class1();
var userName = " test " ;
obj.onShow = createFunction( null , " objOnShow " , userName); ();
}

"이벤트 메커니즘은 매개변수 정보 없이 함수 이름만 전달하기 때문에 매개변수를 전달할 수 없습니다." "이 문제를 해결하려면 다음 단계를 따르세요." 매개변수를 전달하는 방법을 고려하는 대신 매개변수 없이 이벤트 핸들러를 작성하는 방법을 고려하십시오. 이 프로그램은 매개변수가 있는 이벤트 핸들러를 기반으로 작성되며 외부 계층입니다. ", 여기서 "프로그램"은 createFunction 함수입니다. 이 함수는 적용 함수를 교묘하게 사용하여 매개변수가 있는 함수를 매개변수 없는 함수로 캡슐화합니다.마지막으로, 사용자 정의 이벤트의 다중 바인딩을 구현하는 방법을 살펴보겠습니다.
// 사용자 정의 이벤트가 다중 바인딩을 지원하도록 합니다
// 매개변수가 있는 함수를 매개변수가 없는 함수로 캡슐화
function createFunction(obj , strFunc) {
var args = []; // 이벤트 핸들러에 전달된 매개변수를 저장할 인수를 정의합니다.
if ( !obj) obj = window; // 전역 함수인 경우
// 이벤트 핸들러에 전달된 매개변수 가져오기
for ( var i = 2 ; i // 매개변수 없는 함수 사용 호출을 캡슐화합니다. 이벤트 핸들러
return function () {
obj[strFunc].apply(obj, args); // 지정된 이벤트 핸들러에 매개변수 전달
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " userName); >}
function objOnShow2(testName) {
alert( " show: " testName)
}
function test() {
var obj = new class1()
var ; userName = " 귀하의 이름 " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName))
obj.attachOnShow(createFunction( null , " objOnShow2 " , " 테스트 메시지 " )); >obj.show();
}
attachOnShow 메서드의 기본 아이디어는 실제로 이벤트 실행이 완료된 후 이벤트 처리를 제거하는 것임을 알 수 있습니다. , 아래에 별도로 구현됩니다.
// 매개변수가 있는 함수를 매개변수가 없는 함수로 캡슐화합니다.
function createFunction(obj, strFunc) {
var args = [] // 저장을 위한 인수를 정의하고 매개변수를 다음으로 전송합니다. 이벤트 핸들러
if ( !obj) obj = window; // 전역 함수인 경우 obj=window
// 이벤트 핸들러에 전달된 매개변수 가져오기
for ( var i = 2 ; i // 이벤트 핸들러 호출을 캡슐화하기 위해
return function () { obj[strFunc ] .apply(obj, args); // 지정된 이벤트 핸들러에 매개변수 전달
}
}
function class1() {
}
class1.prototype = {
show : function () {
if ( this .onShow) {
for ( var i = 0 ; i this .onShow[i](); >}
} },
attachOnShow: function (_eHandler) { // 이벤트 첨부
if ( ! this .onShow) { this .onShow = [] }
onShow . .push(_eHandler);
},
detachOnShow: function (_eHandler) { // 이벤트 제거
if ( ! this .onShow) { this .onShow = [] }
this .onShow .pop(_eHandler);
}
}

function objOnShow(userName) {
alert( " hello, " userName);
}
function objOnShow2( testName) {
alert( " show: " testName);
function test() {
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 " , " test message " ));
obj.show(); // 둘 다 제거하고 아무것도 표시하지 않음
}
먼저 여기서 맞춤 이벤트에 대해 알아봅시다.