Events are the main way for JS to interact with the browser. Events are a design pattern called the Observer, a technique for creating loosely coupled code. An object can publish events to indicate that an interesting moment has arrived in the life cycle of the object. The other objects can then observe the object, wait for these interesting moments to arrive and respond by running the code.
The observer pattern consists of two types of objects: the subject and the observer. The subject is responsible for publishing events, and the observer observes the subject by subscribing to these events. A key concept of this pattern is that the subject does not know anything about the observer, that is, it can exist alone and function properly even if the observer does not exist. On the other hand, the observer knows the subject and can register the callback function (event handler) of the event. When it comes to DOM, the DOM element is the subject and your event processing code is the observer.
Events are the most common way to interact with DOM, but they can also be used in non-DOM code--by implementing custom events. The concept behind custom events is to create an object that manages events and lets other objects listen to those events. To put it simply, we hope that when the program is running, there may be many routes. If the program runs to a special place, we hope to immediately run the code in the user registration method and continue to run after the run is completed. This process is called listening.
For example, create a file file, and create a class in it:
function MyEvent(){
;
}
={
addHandler:function(handler)
{
=handler;
},
fire:function()
{
();
},
removeHandler:function()
{
=null;
}
}
A class created above using the idea of js prototype. If readers don’t know much about it, they can view relevant information. The MyEvent type has a separate property handler, which is used to store event handlers (that is, user registration methods). There are three more methods: addHandler(), which is used to register an event handler; fire(), which is used to trigger an event; and removeHandler(), which is used to log out an event handler.
Then we can use it like this, create a new html file and place it in the same directory for easy reference. The code is as follows:
<html>
<head>
<title></title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function init()
{
//Initialize an event object
var myEvent=new MyEvent();
//Registering method
(myMethod);
//Trigger event when running here
();
//How to remove event registration
();
//Trigger event again, it is found that it is invalid
();
}
function myMethod()
{
alert("success");
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="test" />
</body>
</html>
The above comments have already explained one of the usage methods in detail. This is the simplest custom event, but there are still many shortcomings. How to optimize it will be explained in (II).
The observer pattern consists of two types of objects: the subject and the observer. The subject is responsible for publishing events, and the observer observes the subject by subscribing to these events. A key concept of this pattern is that the subject does not know anything about the observer, that is, it can exist alone and function properly even if the observer does not exist. On the other hand, the observer knows the subject and can register the callback function (event handler) of the event. When it comes to DOM, the DOM element is the subject and your event processing code is the observer.
Events are the most common way to interact with DOM, but they can also be used in non-DOM code--by implementing custom events. The concept behind custom events is to create an object that manages events and lets other objects listen to those events. To put it simply, we hope that when the program is running, there may be many routes. If the program runs to a special place, we hope to immediately run the code in the user registration method and continue to run after the run is completed. This process is called listening.
For example, create a file file, and create a class in it:
Copy the codeThe code is as follows:
function MyEvent(){
;
}
={
addHandler:function(handler)
{
=handler;
},
fire:function()
{
();
},
removeHandler:function()
{
=null;
}
}
A class created above using the idea of js prototype. If readers don’t know much about it, they can view relevant information. The MyEvent type has a separate property handler, which is used to store event handlers (that is, user registration methods). There are three more methods: addHandler(), which is used to register an event handler; fire(), which is used to trigger an event; and removeHandler(), which is used to log out an event handler.
Then we can use it like this, create a new html file and place it in the same directory for easy reference. The code is as follows:
Copy the codeThe code is as follows:
<html>
<head>
<title></title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function init()
{
//Initialize an event object
var myEvent=new MyEvent();
//Registering method
(myMethod);
//Trigger event when running here
();
//How to remove event registration
();
//Trigger event again, it is found that it is invalid
();
}
function myMethod()
{
alert("success");
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="test" />
</body>
</html>
The above comments have already explained one of the usage methods in detail. This is the simplest custom event, but there are still many shortcomings. How to optimize it will be explained in (II).