이벤트 대 커스텀 이벤트

Question

으로 쉽게 에뮬레이션 할 수 있기 때문에 CustomEvent의 용도는 무엇인가 궁금합니다. CustomEvent는 보통 이벤트 객체에 사용자 정의 데이터를 부착하기 쉬운 경우 존재 이유

var e = new Event("reload"); 
e.detail = { 
    username: "name" 
}; 
element.dispatchEvent(e); 

및

var e = new CustomEvent("reload", { 
    detail: { 
     username: "name" 
    } 
}); 
inner.dispatchEvent(e); 

:

그래서, 차이점은 무엇입니까?

Answer 1

동일하지 않습니다. 당신은 진정한 맞춤 이벤트의 detail 설정할 수 없습니다 :

var event = new CustomEvent('myevent', {detail:123}); 
 
event.detail = 456; // Ignored in sloppy mode, throws in strict mode 
 
console.log(event.detail); // 123 
 

 
var event = new Event('myevent'); 
 
event.detail = 123; // It's not readonly 
 
event.detail = 456; 
 
console.log(event.detail); // 456

예, 당신은 Object.defineProperty를 사용할 수 있습니다. 그러나 요점은 CustomEvent의 인수가 이벤트의 내부 데이터를 설정해야한다는 것입니다. 이제는 내부적으로 사용되지 않는 detail 만 고려합니다. 그러나 미래의 스펙은 새로운 것을 추가 할 수 있으며 속성을 사용하여 내부 데이터를 설정할 수 없을 수도 있습니다.

CustomEvent도 CustomElement.prototype에서 상속됩니다. 이 경우에만 detail과 더 이상 사용되지 않는 initCustomEvent이 추가됩니다. 그러나 다른 이벤트에 상속되지 않는 메서드 나 속성을 여기에 추가 할 수 있습니다. 그러나 나는 이것을 권장하지 않는다. 당신이 소유하지 않은 객체는 수정하면 안된다.

기본적으로 CustomEvent을 사용하여 다른 이벤트와 다르게 이벤트를 분류 할 수 있습니다. [새 맞춤 이벤트 대 새로운 이벤트 ('빌드') ('빌드')]의 old spec