Introduction to JavaScript custom events_javascript skills

Add a handle inside the Dialog object. The click event handler of the close button will determine whether the handle is a function after calling the close method. If so, it will call and execute the handle. In the openDialog method, after creating the Dialog object, assign the handle to a hidden page cover method, so that the page cover is hidden when the Dialog is closed without causing coupling between the two controls. This interaction process is a simple process of defining events - binding event handlers - triggering events. DOM object events, such as button click events, have a similar principle.

Advanced custom events

The small example given above is very simple, and is far less sophisticated than the DOM itself. This simple event processing has many disadvantages

1. No commonality. If you are defining a control, you have to write a similar structure

2. Event binding is exclusive. Only one close event handler can be bound. Binding a new one will overwrite the previous binding

3. The packaging is not perfect enough. If the user does not know that there is a handle to close_handler, there is no way to bind the event and can only check the source code

Let’s analyze these disadvantages one by one. The first disadvantage is very familiar, and students who have used object-oriented can easily think of the solution - inheritance; for the second disadvantage, a container (two-dimensional array) can be provided to manage all events uniformly. ; The solution to disadvantage three needs to be combined with disadvantage one to add a unified interface to the custom event management object for adding/deleting/triggering events

addHandler方法用于添加事件处理程序，removeHandler方法用于移除事件处理程序，所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件，该方法接收一个至少包含type属性的对象作为参数，触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。

   
       
       
   

   
   

   

   

       
       

Dialog

       

       

   

   

   

   

   
   

最后

这样解决了几个弊端看起来就完美多了，其实可以把打开Dialog显示page cover也写成类似关闭时事件的方式了。当代码中存在多个部分在特定时刻相互交互的情况下，自定义事件就非常有用了。如果每个对象都有其它对象的引用，那么整个代码高度耦合，对象改动会影响其它对象，维护起来困难重重。自定义事件使对象解耦，功能隔绝，这样对象之间实现了高聚合。