This is a small and simple post to check whether a JavaScript function is registered to an event of a DOM element. For this example we will take a button and click event. We will associate two functions and then will check whether one a function is attached or not.
We will do this using getAttribute method of a DOM element to get the value of onclick attribute. Code goes like below-
That reminds me some attribute or function like eventListenerList. But most of the browser does not support this now. It’s still a recommendation; you can check this here-
http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-EventListenerList
But we can implement something like below-
We will do this using getAttribute method of a DOM element to get the value of onclick attribute. Code goes like below-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function handlerFunction1() {
alert("1");
}
function handlerFunction2() {
alert("2");
}
function fn() {
var functionArray = document.getElementById("test").getAttribute("onclick").split(",");
for(var i=0; i<functionArray.length; i++)
{
if(functionArray[i].indexOf("handlerFunction1()")>=0)
alert("function fn1() is registered with click me function");
}
}
</script>
<title>
</title></head>
<body>
<form method="post" action="about show error message.aspx" id="form1">
<input onclick="handlerFunction1(), handlerFunction2()" value="click me" type="button" id="test" />
<a onclick="fn()" href="#">check fn1() is registered with click button</a>
</form>
</body>
</html>
Now what if the event handlers are added dynamically with addEventListener/attachEvent, in that case the value of document.getElementById("test").getAttribute("onclick") will be null even if there are two functions registered to the event.
That reminds me some attribute or function like eventListenerList. But most of the browser does not support this now. It’s still a recommendation; you can check this here-
http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-EventListenerList
But we can implement something like below-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function handlerFunction1() {
alert("1");
}
function handlerFunction2() {
alert("2");
}
function fn() {
var functionArray = document.getElementById("test").getAttribute("onclick");
if(functionArray!=null)
functionArray=functionArray.split(",");
else
{
if(document.getElementById("test").eventListenerList!=null)
functionArray= document.getElementById("test").eventListenerList["click"];
}
for(var i=0; i<functionArray.length; i++)
{
if(functionArray[i].indexOf("handlerFunction1()")>=0)
alert("function fn1() is registered with click me function");
}
}
function addEventHandler(elem,eventType,handler) {
if(elem.eventListenerList==null)
elem.eventListenerList=new Object();
if(elem.eventListenerList[eventType]==null)
elem.eventListenerList[eventType]=new Array();
elem.eventListenerList[eventType].push(handler);
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
window.onload=function(){
var btn= document.getElementById("test");
addEventHandler(btn,"click",handlerFunction1);
addEventHandler(btn,"click",handlerFunction2);
}
</script>
<title>
</title></head>
<body>
<form method="post" action="about show error message.aspx" id="form1">
<input value="click me" type="button" id="test" />
<a onclick="fn()" href="#">check fn1() is registered with click button</a>
</form>
</body>
</html>
Following is a running snap shot.
No comments:
Post a Comment