Home > Developer > JavaScript
This two-day reading of the book, "Writing maintainable JavaScript," Today makes a record of the event handling this chapter,
First look at a piece of code:
1<! DOCTYPE html> 23<meta charset= "Utf-8"/>4<title></title>5<style type= "Text/css" >6 #test {7 width:100px;8 height:100px;9 background:red;Ten Position:absolute; One } A</style> - -<body> the<div id= "Test" ></div> -<script> - functionHandleclick (event) { - varTest = document.getElementById (' Test '); +Test.style.left = event.clientx + ' px '; -Test.style.top = event.clienty + ' px '; +Test.classname = ' reveal '; A } at varBTN = document.getElementById (' btn ')); -Document.addeventlistener (' click ', Handleclick); -</script> -</body> -The click in this code is triggered by user behavior, and the user triggers a post-processing Handleclick event, and the code looks reasonable without any problems. When the user clicks, the DOM moves to a specific location, but when the mouse moves to a point, the DOM also needs to move to a specific point? the problem with this code is that the best way to do this is to split the application logic (moving to a specific point) from the event handler.
function Handleclick (event) { movedom (event);} function Movedom (event) { var test = document.getElementById (' test '); = Event.clientx + ' px '; = Event.clienty + ' px '; = ' reveal ';} var btn = document.getElementById (' btn ');d ocument.addeventlistener (function (event) { Handleclick (event);});
This section removed the application logic, regardless of whether the user triggered the click or mouseover only need to call Movedom (), no longer limited to the user's click behavior. Finish this step and look at the next step.
The event object represents the state of the events and contains a variety of event-related information. The event object in this code is uploaded to Handleclick from the anonymous event processing of click and then to Movedom, which is distributed 4 times, but in fact only two attributes of event (ClientX, ClientY) are used in our application logic. What's wrong with that? The first time the event object is passed in as a parameter does not tell us exactly what attributes of the event object are needed in the app, and secondly, when we want to test the application logic separately, we must recreate an event object and pass in as a parameter. Therefore, we can modify the code again:
functionHandleclick (event) {[/backcolor]movedom (Event.clientx, Event.clienty); } functionmovedom (x, y) {varTest = document.getElementById (' Test '); Test.style.left= x + ' px '; Test.style.top= y + ' px '; Test.classname= ' Reveal '; } varBTN = document.getElementById (' btn ')); Document.addeventlistener (' Click ',function(event) {Handleclick (event); }); [BackColor=inherit]movedom (20, 30);//function testing anywhere without dependency on event objects and user behaviornow whether we're clicking or moving the mouse or what we just need to call the Movedom () function directly, we can even move the DOM using the Movedom () function alone, which can be seen splitting the application logic code with the reasonable distribution of event events object (not only the event object as a parameter passed in, all parameters should be visually transparent) can effectively decouple the code , improve code reusability and use occasions.
There are many things that can be perfected in this code, such as defining a global object, mounting an event handler on the global object, and Dom objects passing in as parameters, classname writing to the configuration data .... Let's talk about this later.
JavaScript Event handling
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
