addEventListener method JavaScript

<
head
>

    
<
script
 
type
=
"text/javascript"
>

        
var
 capturedButton = 
null
;
        
var
 changeTimer = 
0
;

        
function
 ChangeInput (increase, delay) {
            
var
 myInput = 
document
.
getElementById
 (
"myInput"
);
                
// parse the current value
            
var
 value = 
Number
 (myInput.
value
);
            
if
 (
isNaN
 (value)) {
                value = 
0
;
            }
                
// direction
            
var
 dir = increase ? 
1
 : -
1
;
                
// the new value
            
var
 step = 
1
;
            value += dir * step;
            
if
 (value < 
0
) {
                value = 
0
;
            }
            
if
 (value > 
100
) {
                value = 
100
;
            }
            myInput.
value
 = value;

            changeTimer = 
setTimeout
 (
function
 () {ChangeInput (increase, 
100
)}, delay);
        }

        
function
 OnButtonDown (button, increase) {
                
// capture mouse up
            capturedButton = button;
            
if
 (
window
.
addEventListener
) {  
// all browsers except IE before version 9
                
window
.
addEventListener
 (
"mouseup"
, OnButtonUp, 
true
);
            }
            
else
 {
                
if
 (button.
setCapture
) {    
// IE before version 9
                    button.
attachEvent
 (
"onlosecapture"
, OnButtonLoseCapture);
                    button.
setCapture
 ();
                }
            }

                
// initialy a longer delay
            ChangeInput (increase, 
500
);
        }
        
        
function
 OnButtonUp () {
            
if
 (changeTimer) {
                
clearTimeout
 (changeTimer);
                changeTimer = 
0
;
            }

            
if
 (capturedButton) {
                
if
 (
window
.
removeEventListener
) {   
// all browsers except IE before version 9
                    
window
.
removeEventListener
 (
"mouseup"
, OnButtonUp, 
true
);
                }
                
else
 {
                    
if
 (capturedButton.
releaseCapture
) {    
// IE before version 9
                        capturedButton.
detachEvent
 (
"onlosecapture"
, OnButtonLoseCapture);
                        capturedButton.
releaseCapture
 ();
                    }
                }
                capturedButton = 
null
;
            }
        }

        
function
 OnButtonLoseCapture () {
            OnButtonUp ();
        }

        
function
 Init () {
            
var
 incButton = 
document
.
getElementById
 (
"incButton"
);
            
var
 decButton = 
document
.
getElementById
 (
"decButton"
);
            
if
 (incButton.
addEventListener
) {   
// all browsers except IE before version 9
                incButton.
addEventListener
 (
"mousedown"
, 
function
 () {OnButtonDown (incButton, 
true
)}, 
false
);
                decButton.
addEventListener
 (
"mousedown"
, 
function
 () {OnButtonDown (decButton, 
false
)}, 
false
);
            }
            
else
 {
                
if
 (incButton.
attachEvent
) {    
// IE before version 9
                    incButton.
attachEvent
 (
"onmousedown"
, 
function
 () {OnButtonDown (incButton, 
true
)});
                    decButton.
attachEvent
 (
"onmousedown"
, 
function
 () {OnButtonDown (decButton, 
false
)});
                    incButton.
attachEvent
 (
"onmouseup"
, OnButtonUp);
                    decButton.
attachEvent
 (
"onmouseup"
, OnButtonUp);
                }
            }
        }
    
</
script
>

</
head
>

<
body
 
onload
=
"Init ()"
>

    
<
input
 
id
=
"myInput"
 
size
=
"3"
 
value
=
"50"
 
/>

    
<
button
 
id
=
"incButton"
>
Increase
</
button
>

    
<
button
 
id
=
"decButton"
>
Decrease
</
button
>

</
body
>