Javascript Event How to - Add click event handler to anchor element

Question

We would like to know how to add click event handler to anchor element.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){<!--from w  ww.j av a 2  s  .c om-->
    var myArray = [
      {property: "value1"},
      {property: "value2"},
      {property: "value3"}
    ];
    var pageLinks = document.getElementsByTagName("a");
    for (i = 0, len = pageLinks.length; i < len; i++){
        (function(i){
            pageLinks[i].addEventListener("click", function(){
                document.writeln(myArray[i].property);
                document.writeln('<br/>');
            }, false);
        })(i);
    }
}
</script>
</head>
<body>
  <a href="#">link1</a>
  <a href="#">link2</a>
  <a href="#">link3</a>
</body>
</html>

The code above is rendered as follows: