보다 유연한 개발을 달성하기 위해 이벤트를 사용자 정의 할 수 있습니다. 이벤트는 제대로 사용될 때 매우 강력한 도구가 될 수 있습니다. 이벤트 기반 개발에는 많은 장점이 있습니다 (나중에 소개).
사용자 정의 이벤트와의 기능은 이벤트, customevent 및 dispatchevent입니다.
이벤트 생성자를 사용하여 이벤트를 직접 사용자 정의하십시오.
var event = new event ( 'build'); // event.elem.AddeventListener ( 'build', function (e) {...}, false); // event.elem.dispatchevent (이벤트)를 발송합니다.Customevent는보다 고도로 사용자 정의 된 이벤트를 만들 수 있으며 일부 데이터를 동반 할 수도 있습니다. 특정 사용량은 다음과 같습니다.
var myevent = new Customevent (EventName, 옵션);
옵션이있는 경우 :
{세부 사항 : {...}, Bubbles : true, cantable : false}세부 사항은 일부 초기화 정보를 저장할 수 있으며 트리거 될 때 호출 할 수 있습니다. 다른 속성은 이벤트에 버블 링이 있는지 여부 및 기타 기능을 정의하는 것입니다.
특정 작업에 따라 브라우저에서 내장 이벤트가 트리거되며 사용자 정의 이벤트는 수동으로 트리거되어야합니다. DispatchEvent 함수는 이벤트를 트리거하는 데 사용됩니다.
요소 .dispatchevent (customevent);
위의 코드는 customevent 이벤트가 요소에서 트리거되었음을 나타냅니다. 함께 사용하십시오 :
// 적절한 이벤트 추가 청취.
맞춤형 이벤트를 사용하여 호환성 문제에주의를 기울이지 만 jQuery를 사용하는 것이 훨씬 간단합니다.
// 맞춤형 이벤트 $ (요소) .on ( 'myCustomevent', function () {}); // 트리거 이벤트 $ (element) .trigger ( 'myCustomevent'); 또한, 사용자 정의 이벤트를 트리거 할 때 더 많은 매개 변수 정보를 전달할 수 있습니다 : $ ( "p") .on ( "mycustomevent", function (event, myName) {$ (this) .Text (myName + ", Hi!JavaScript 사용자 정의 이벤트는 클릭 및 제출과 같은 자체 지속 행사와 다릅니다. 맞춤형 이벤트의 이점을 설명하기 전에 사용자 정의 이벤트의 예를 살펴 보겠습니다.
<div id = "testbox"> </div> // 이벤트 생성 var evt = document.createevent ( 'event'); // 이벤트 유형 정의 evt.initevent ( 'customevent', true, true); // 이벤트 듣기 var obj = document.getElementByid ( 'testbox'); 'testbox'); 'customevent', custole. () {custole.log () {custole.log () {custome.log ', 트리거 된 ');}, false);특정 효과는 데모를 확인할 수 있습니다. 콘솔에 obj.dispatchevent (EVT)를 입력하십시오. 콘솔에서 출력 "Customevent 이벤트가 트리거 된"것을 알 수 있으며, 이는 사용자 정의 이벤트가 성공적으로 트리거되었음을 나타냅니다.
이 과정에서 Createevent 메소드는 빈 이벤트 EVT를 생성 한 다음 Initevent 메소드를 사용하여 이벤트 유형을 합의 된 사용자 정의 이벤트로 정의 한 다음 해당 요소에 리스팅합니다. 그런 다음 DispatchEvent를 사용하여 이벤트를 트리거하십시오.
맞습니다. 커스텀 이벤트의 메커니즘은 일반적인 이벤트와 같습니다. 이벤트 듣기, 콜백 작업 작성 및 이벤트를 트리거 후 콜백 실행과 같습니다. 그러나 차이점은 사용자 정의 이벤트가 미국에 의해 완전히 제어된다는 것입니다. 즉, JavaScript 디커플링이 구현되었음을 의미합니다. 사용자 정의 이벤트 메커니즘을 사용하여 다중 관련이지만 논리적으로 복잡한 작업을 유연하게 제어 할 수 있습니다.
물론, 위의 코드가 IE의 하위 버전에서는 적용되지 않는다고 추측했을 것입니다. 실제로, Createevent ()는 IE8 이하의 IE 버전에서 지원되지 않지만 IE의 개인 fireevent () 방법이 있지만 불행히도 Fireevent는 표준 이벤트의 트리거링 만 지원합니다. 따라서 하나의 특별하고 간단한 방법 만 사용하여 사용자 정의 이벤트를 트리거 할 수 있습니다.
// 유형은 type = 'customevent'와 같은 사용자 정의 이벤트이며, 콜백은 개발자 OBJ [type] = 0; obj [type] ++에 의해 실제로 정의 된 콜백 함수입니다. obj.attachevent ( 'onpropertychange', function (event) {if (event.propertyname == type) {callback.call (obj);}});이 방법의 원칙은 실제로 DOM에 사용자 정의 속성을 추가하고 요소의 PropertyChange 이벤트를 듣는 것입니다. DOM의 특정 속성 값이 변경되면 PropertyChange 콜백이 트리거되고 콜백에서 변경된 속성이 사용자 지정 속성인지 여부가 결정됩니다. 그렇다면 실제로 개발자가 정의한 콜백이 실행됩니다. 이것은 맞춤형 이벤트의 메커니즘을 시뮬레이션합니다.
사용자 정의 이벤트 메커니즘이 표준 이벤트의 청취 및 시뮬레이션 트리거링과 협력 할 수 있도록 여기에 완전한 이벤트 메커니즘이 제공됩니다. 이 메커니즘은 표준 이벤트 및 사용자 정의 이벤트의 모니터링을 지원하고 청취 및 시뮬레이션 트리거 작업을 제거합니다. 코드의 논리를 명확하게하기 위해서는 사용자 정의 이벤트가 'Custom'(예 : CustomTest, Customalert)의 접두사가 있다는 것이 동의합니다.
/ *** @description은 이벤트 청취, 제거 및 시뮬레이션 이벤트 트리거링, 체인 호출 지원**/ (함수 (Window, undefined) {var ev = window = window = window. 1)? _That.element.addeventListener (유형, 콜백, false); else (_that.element.attachevent) { / ** * @supported if ( 'custom')! = -1) {if (iSnan (_THAT.LEMENT))). } var fnev = event = event? ! _that}, /*** 이벤트 청취를 제거하십시오* @param {string} 유형 이벤트 유형 청취* 콜백 콜백 함수* /remove : function (type, 콜백) {var _that = if (_that.element.removeeventListener) _that.element.removeeventListener (유형, 콜백, false)} else (_that.element.detachevent) { / ** * @supported if (type.indexof ( 'custom')! = -1) {// 해당 사용자 지정 속성을 제거하십시오. _TECHEVENT ( 'Callback' + Callback]에 저장된 사용자 정의 이벤트 삭제} else. / *** 다른 사람을위한 지원* / _ that.Element [on ' + type] = null}, / *** 트리거 이벤트 시뮬레이션 트리거 이벤트 유형* @return {return kjs object* / trigger (type) if (_that.element.dispatchevent) {// evt.initevent 유형을 정의합니다 (type, true, true); indexof ( 'custom') {_ element.fireevent. 테스트 케이스 1 (사용자 정의 이벤트 테스트) // 테스트 케이스 1 (사용자 정의 이벤트 테스트) // 이벤트 메커니즘을 소개 // ... // domvar testbox = document.getElementByid ( 'testbox'); // 콜백 함수 1function triggerevent () {console.log ( '사용자 정의 이벤트 customConsole'); 사용자 정의 이벤트 customConsole ');} // 캡슐화 testbox = $ (testbox); // 동시에 두 개의 콜백 함수를 바인딩하고 테스트 박스에 체인 호출을 지원합니다 ('customConsole ', triggerevent) .add ('customConsole ', triggerAgain);전체 코드는 데모입니다.
데모를 열면 콘솔에서 TestBox.Trigger ( 'CustomConsole')를 호출하여 사용자 정의 이벤트를 자체적으로 트리거하십시오. 콘솔이 두 가지 프롬프트를 출력 한 다음 TestBox.Remove ( 'CustomConsole', TriggerAgain)를 입력하여 다음 리스너를 제거하는 것을 알 수 있습니다. 현재 TestBox.Trigger ( 'CustomConsole')를 사용하여 사용자 정의 이벤트를 트리거하십시오. 콘솔은 하나의 프롬프트 만 출력합니다. 즉, 다음 리스너가 성공적으로 제거됩니다. 이벤트 메커니즘의 모든 기능은 정상적으로 작동합니다.