JQuery best practices for exquisite custom events_jquery

I happened to be responsible for the development of a visual editor recently, in which JQuery's custom events were conveniently applied in some places, and achieved good results - streamlining the code while making full use of OO principles.

This article uses an example I encountered in the actual application development process to further explain "When to use JQuery's custom events and how to use them". I hope it can inspire others and at the same time, it can be used as a reply to classmates' emails.

Demo-Ingenious JQuery custom event
JQuery best practice-exquisite custom event
Question: How can you easily trigger the processing logic of its click event for a checkbox X, but Without changing its current selected state?

Answer: Use a custom event handling function to encapsulate the processing logic of the check box click event! Then trigger the custom event.

Have you ever encountered the following application scenarios?
Requirement: For a certain container A, can the user set the presence or absence of its four borders and the border color? "Presence of border" and "change of color" need to be linked.
That is to say, when changing the border, the currently set color is obtained, and when the color is changed, the currently set border is obtained, and reflected in container A in time.

Note: In this example, the border colors are set uniformly. You can write down examples of separate settings~
Core code:

Copy code The code is as follows:

Border setting:
上

bottom
left

Online demo