DougCarroll
Esri Contributor
since ‎07-04-2014
14 Badges Earned
Welcome Back! Welcome!
View All Badges Earned
4 weeks ago
124 Posts created
4 Kudos given
3 Solutions
9 Kudos received

My Ideas

(0 Idea Submissions)

Latest Contributions by DougCarroll

POST
0
1
113
POST
1
0
161
POST
1
0
404
IDEA
0
0
388
IDEA
0
0
391
IDEA
0
0
154
POST
1
0
311
BLOG
1
0
3354
BLOG


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
0
402
POST
0
0
682
Activity Feed
Contact Me
Online Status
Offline
Date Last Visited
4 weeks ago