Skip navigation
All Places > Esri Technical Support > Blog > 2014 > September
2014
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);
[/code]

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
BScott-Harris-150x150.jpgringing you another member of our support staff! Our Marketing team talked to Desktop analyst Scott Harris about his love for his job and the work he does daily in solving problems and finding solutions.Tell me about yourself. What is your background?

I took my first GIS class when I was pursuing my Bachelor’s degree at Keystone College in Pennsylvania. I did a few projects while I was there, one of which was making some campus maps using ArcView 3.2 (which seems primitive today). I ended up getting my degree in Environmental Resource Management and then spent a bit of time out of the GIS field doing environmental testing. After that I became a GIS tech for the Middle Rio Grande Conservancy District in Albuquerque, New Mexico, where again I was using Esri software. Later, I went back for my Master’s degree in geoenvironmental studies - and then I ended up at Esri.What do you do at Esri?

I’m a Support Analyst on the Desktop Team. It makes really great sense for me because I’ve always been sort of a tech geek. I love computers and even build my own, and did so during college as well. I also felt that having a background in GIS and technology/software would help me in a technical support role. When users call in, generally the first thing we have to do is assess their knowledge of the software and of GIS in general. Then we will walk them through the issue, maybe share screens, and see if there’s a bug of some sort or it’s a user issue.Why Esri? How did you find out about the company and what sparked your interest?

I had an internship with the US Forest Service during my undergraduate years and we were using Esri software, so that was my first real, in-depth introduction to Esri. When I worked for the Middle Rio Grande Conservancy, I attended the Esri User Conference. So it wasn’t just a job I found; I had experience with the products and I knew a lot about what they were doing at the time, so I was interested in building a career here.What do you like best about your job? What’s the coolest thing about working for Esri?

For me, I think the best part is the good feeling you get when you solve a user issue. There’s a little rush when you figure something out before you move onto the next task. That happens a couple times a day. Plus, all of my co-workers are all really knowledgeable and helpful and I’ve learned a lot from them. My mentor, in particular, has taught me quite a bit.You moved here from Seattle to work for Esri. What does Redlands have that Seattle doesn’t?

When I got my interview with Esri and we took the trip into Redlands, we decided it was a great place for both of us, and we’re hoping to start a family here when that time comes. I also like that you easily have access to the mountains and the beach, and if you need to go to the city, Los Angeles is a short distance away.Do you have any advice for students looking for a job they will love?

It’s important to get as many experiences as you can, either through an internship or a campus job. You never know where you might make a connection and ultimately get a job, so try not to burn any bridges! You’ll always need your references, too. Also, by any means, don’t give up! It took me a long time to settle down and find a job I love. You might be frustrated for the first couple of years, but you also might find something you love right away.

Thank you for the great advice, Scott!
Katherine D. - Strategic Marketing Intern

Filter Blog

By date: By tag: