Skip to content
Advertisement

JavaScript registering events handlers externally

I have decided to remove all calls to JavaScript event from the html form elements to an external file. In doing this i registered an event for each item. However access the elements attributes using ‘this‘ can no longer be used what I have decided to use is event.target.value for value attribute and event.target.name for name attribute. I think this is not the best implementation since I am getting some adverse results from implementing it.

Under is my implemented code and more on the issue:

JavaScript Inline Event Handler (Before)

<input type="radio" name="rdb_NewUsers" value="1" list="#{'true':'Yes','false':'No'}" onclick="configureItemsForRadioButton(this.value, this.name)"

JavaScript Registered External Event Handler (After)

var configureRadioButtons = {           
            onClick:function(evt){
                evt.stopPropagation();
                console.log(evt.target.value + '||'+evt.target.name);
                configureItemsForRadioButton(evt.target.value, evt.target.name);
                
            }
    }; 
    dojo.connect(dojo.byId("rdbNewUser"), "onclick", configureRadioButtons, "onClick");

The problem I am facing is when I click on any button it actually executes the console.log(evt.target.value + '||'+evt.target.name); even though it is not an registered event for the button. I think using event.target refers to any event executed on the page. What else can be used instead of evt.target.value to refer to the object who fired the event’s value and name.

Advertisement

Answer

After reviewing my code i soon realized i had overlooked something very important. My radio buttons actually carry a different id at run time rdb_NewUserstrue and rdb_NewUsersfalse and i was not registering events for these elements hence the reason the event kept firing on any click event, it was not finding an element with the id rdb_NewUsers. My solution is under:

I query the DOM for all radio buttons and got their Ids and based on the event/radio button clicked i attached a function (all radio buttons are handled by one function). In this way i did not need to hardcode an id for the radio button.

 var configureRadioButtons = {          
            onClick:function(evt){
                evt.stopPropagation();
                //console.log(evt.target.value + '||'+evt.target.name+ '||'+evt.keyCode);
                configureItemsForRadioButton(evt.target.value, evt.target.name);


            }
    };       


var radios = document.querySelectorAll('input[type=radio]');  

for (var i = 0 ; i < radios.length ; i++){
    //console.log(radios[i].id);        
    dojo.connect(document.getElementById(radios[i].id), "onclick",configureRadioButtons, "onClick");
}   
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement