How to make Component event design?

Component Event Rule

Component Event naming conventions were created to make components similar to components when creating components, creating components for users to use components without recharging them.The basic concept was based on the DOM events in W3C, adding the experience we built.

beforeXXX And XXX Event

Separate two events.

: In some cases, when an event is created, the event must occur after the function has been activated, and in some cases the event must occur before proceeding. For example, Suppose we make a checkbox component. And Checkbox has change event. Change events are events that occur after being changed from [] to [V].Change events usually change the status of the changed state to the server, as shown below.

const checkbox = new CheckBox("#id");
checkbox.on("change", ({type})  => {
	fetch("/change",{
		body: JSON.stringify({type})
	}).then( e => {
		console.log("success");
	});
});

However, if you need to handle the logic of change event after confirming a certain condition before changing from [] to [V], you can handle it in change event as below.

checkbox.on("change", ({type})  => {
	if( condition ){
		fetch("/change",{
			body: JSON.stringify({type})
		}).then( e => {
			console.log("success");
		});
	} else {
		// Logic to change to [V] -> []
	}
});

However, since the change event has already been changed from [] to [V], the logic to be passed back from [V] to []should be added. So change the change event to an event that occurs before the change from[]to[V]. **Then the logic to return is no longer needed ** Of course, unlike the initial logic, you have to think that it has changed since it was before the state changed.

checkbox.on("change", ({type})  => {
	if( condition ){
		type = type == 1 ? 2 : 1; // It has not changed yet and must be changed from 1 to 2.
		fetch("/change",{
			body: JSON.stringify({type})
		}).then( e => {
			console.log("success");
		});
	}
});

Next, I created a FileUpload component. The component has a upload event that occurs when the file is uploaded.

const fileUpload = new FileUpolad("#id");
fileUpload.on("upload", {files}  => {
	notifier(`${getFileCount(files)} file(s) uploaded`);
});