javascriptNinja/Events.html at master · amsheehan/javascriptNinja · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html />
<html>
<head>
<title>Cross Browser Event Handling</title>
<style type="text/css">
#myDiv
{
    background-color:Blue;
    min-height:200px;
    min-width:200px;
    border-style:solid;
    font-size:large;
    color:White;
}
</style>
</head>
<body>
<h2>
Events
</h2>

<div id="myDiv">
Click inside the blue box to see the co-ordinates.
<div id="display"></div>
</div>
<script type="text/javascript">

    /*
    This function attaches 'theHandler' function to an object
    'theObject', when an event, 'theEvent' occurs.
    'document.myFunction' returns true if the browser supports
    'myFunction'.
    */
    function addEventHandler(theObject, theEvent, theHandler) {
        //check if browser supports DOM Level 2
        if (document.addEventListener) {
            //'addEventListener' attaches 'theHandler' function to
            // 'theEvent' event on the object 'theObject'. When the
            // third argument to addEventListener is false the function
            //supports event bubbling.
            theObject.addEventListener(theEvent, theHandler, false);
        }
        else if (document.attachEvent) { // browser is IE
            // Event names in IE start with 'on'
            theObject.attachEvent("on" + theEvent, theHandler);
        }
    }

    function getEvent(event) {
        // returns the event
        return event ? event : window.event;
    }

    function getTarget(event) {
        //returns the element which caused the event
        return event.target || event.srcElement;
    }

    function preventDefaultBehavior(event) {
        if (event.preventDefault) {
            // DOM Level 2
            event.preventDefault();
        } else {
            // IE
            event.returnValue = false;
        }
    }

    function stopPropogation(event) {
        if (event.stopPropagation) {
            // DOM Level 2
            event.stopPropagation();
        } else {
            // IE
            event.cancelBubble = true;
        }
    }

    function displayCoordinates(event) {
        event = getEvent(event);
        document.getElementById("display").innerHTML = "X Co-ordinate : " + event.clientX + " , Y Co-ordinate: " + event.clientY;
    }

    var myDiv = document.getElementById("myDiv");
    // attach the function 'displayCoordinates' to the 'click' event
    // on the element 'myDiv'
    addEventHandler(myDiv, "click", displayCoordinates);

</script>
</body>
</html>