Community

JavaScript Events – Advocating for On Style Event Programming

729
0
09-29-2014 02:28 AM
Labels (2)
by Anonymous User
Not applicable
0 0 729
‎09-29-2014 02:28 AM
Have you ever created a web application with the ArcGIS API for JavaScript? You may have noticed there are a variety of approaches to event-driven programming: the newer On Style events, the legacy Connect Style events, and events that are plugged directly into the body of an HTML page. Unless you are faced with adopting a legacy application that mixes patterns, it is a good idea to implement one event programming style: On Style.

The On Style events follow the Dojo framework's most recent programming pattern, which I recommend to anyone using JavaScript API version 3.6 or higher. Here is a handy place to read more about working with events in the JavaScript API.



To further understand the On Style events, Figure 1 is a full example using the JavaScript API. The code below uses Dojo's dojo/on module, and as you can see, it makes programming with events easier. A developer could simply switch out the "click" for a different event action such as a "dblclick," a mouse selector, or an event from the JavaScript API.Figure 1
<html>
<head>
<title>Events</title>
<script src="http://js.arcgis.com/3.10"></script>
<script>
require(["dojo/on","dojo/domReady!"], function(on){
  var target = dojo.byId("target-id");
  on(target, "click", function(event){
    alert("test event!");
  });
});
</script>
</head>
<body>
<span id="target-id">Click me!</>
<body>
</html>

live version of Figure 1 here


To take it further, let us look at other event patterns so we can begin taking measures to refactor our applications to use On Style events. Doing so will make transitioning to Dojo 2.0 easier and help extend the shelf life of an application.

Figure 2 shows events wired up directly in the body of the HTML page, and Figure 3 shows the onClick event assigned inside the header of the application. Both of these examples are old and are not recommended (see: Why is using onClick() in HTML a bad practice?). Developers using these two patterns may incur browser compatibility issues and challenges when implementing AMD patterns.Figure 2
<html>
<head>
<title>Events</title>
<script type="text/javascript">
function demoClickEvent(evt){
     console.log(evt.id);
     alert('test event!');
}
</script>
</head>
<body>
<span id="target-id" onclick="demoClickEvent(this)">Click me!</span>
</body>
</html>

live version of Figure 2 here

Figure 3
<html>
<head>
<title>Events</title>
<script type="text/javascript">
window.onload=function(){
    var target = document.getElementById("target-id");
    target.addEventListener('click', function(){
        alert('test event!');
    }, false);
};
</script>
</head>
<body>
<span id="target-id">Click me!</span>
</body>
</html>

live version of Figure 3 here


Refactoring the above code with On Style event patterns may look a bit different until you are familiar with the syntax. However, I highly recommend using On Style events as shown in Figure 1.

Now, let us take a quick look at legacy Connect Style events. These are similar to On Style events but were not implemented with Dojo’s AMD pattern for several years. Thus, it is common to see Connect Style event code like Figure 4.Figure 4

[code language="JavaScript"]
var node = dojo.byId("target-id");
var handle = dojo.connect(node, "onclick", myFunction);


Figure 4's approach is also not recommended because Dojo 2.0 will not support the legacy Connect Style of event handling. Even the more modern Connect Style code, which uses the AMD approach, is slated for deprecation. If you want to see what the Connect Style AMD code looks like, review this Dojo Foundation Documentation.

In summary, I highly recommend that developers move to On Style event programming. Reviewing the other event style options in this post will hopefully help developers know what to look for to make upgrading to On Style Events easier.
Doug C. and Noah S. - Support SDK Team
0 Kudos