On Feb 5, 3:10 am, alvinw...@gmail.com wrote:
Hi guys,
I find it frustrating that I need to sniff out IE to make event
handler for the form's select element work across different browsers.
Here's a summary of what I have right now:
You should use feature detection.
var select = /*get the form select element*/
var option = /*get all the option elements*/
if(document.all){
addEvent(select,"change",executeFunction);
}
else{
addEvent(option[i],"click",executeFunction);
}
I don't understand why you are using a different event in different
browsers. Can't you just get the value of the selected option
onchange of the select?
FYI, I am using John Resig's addevent.
I have no idea what that is. Try the following (be careful of IE's
memory leak) which uses a pretty standard addEvent function and makes
IE's this keyword work the same as the W3C event model:
<script type="text/javascript">
function addEvent(el, evType, fn, useCapture) {
if (el.addEventListener) {
el.addEventListener(evType, fn, useCapture);
} else if (el.attachEvent) {
var r = el.attachEvent('on'+evType, function(){fn.call(el);});
} else {
el['on' + evType] = fn;
}
}
function showValue(el){
document.getElementById('d0').innerHTML =
el.options[el.selectedIndex].value;
}
window.onload = function(){
var el = document.forms['f0'].elements['sel0'];
addEvent(el, 'change', function(){showValue(this);}, false);
}
</script>
<form action="" id="f0">
<select name="sel0">
<option value="opt1">opt1
<option value="opt2">opt2
<option value="opt3">opt3
</select>
</form>
<div id="d0"></div>
Incidentally, if you are only adding one handler, it is much simpler
to write
select.onchange = showValue;
And then in the showValue function, 'this' will be a reference to the
select element in both IE and W3C event models.
--
Rob
