tutorial events handler in firefox differences with chrome and IE
I have this code:
var inp1 = document.createElement("input");
inp1.type = "button";
inp1.value = " Delete ";
var bott = "boton" + i.toString();
inp1.id = "prueba" + i;
inp1.className = "boton";
inp1.onclick = function() {deleteItem(event)};
function deleteItem(event) {
var tname = event.srcElement || event.target; var tname1 = tname.id;
.... .... ... works for chrome but not firefox
Chosen solution
Thank you for clarifying that, I was a little confused.
Here are a couple of sites that I think are really useful for learning JavaScript:
(1) Mozilla Developer Network - mdn
If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:
(2) QuirksMode
Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html
Read this answer in context 👍 0All Replies (7)
The event is passed to the outer function which in this case is the anonymous function. If you want to pass the event to another function, you need to define the variable name as the parameter to the anonymous function. For example:
inp1.onclick = function(event) {deleteItem(event)};
Does that work in all of your target browsers?
Finally, here is the code:
inp1.className = "boton";
if(navigator.appName=="Microsoft Internet Explorer"){
inp1.onclick = function() {deleteItem(event)};
} else {inp1.onclick = function() {deleteItem(this)};}
function deleteItem(event) {
if(navigator.appName=="Microsoft Internet Explorer") {
var tname = event.srcElement || event.target;
var tname1 = tname.id;
} else {var tname1 = event.id;}
What kind of tutorial are you writing?
Generally speaking, you should never recommend detecting browser capabilities by strings in the navigator properties. It is always better to use object/property/method detection if possible. Otherwise, you may miss crucial changes made in more recent versions of a browser, such as IE9 and later. Also, you should consider using the standardized approach to defining event handlers, which is addEventListener().
Here is an alternative example:
var inp1 = document.createElement("input");
inp1.type = "button";
inp1.value = " Delete ";
inp1.id = "prueba" + i;
// For best results, add element to the document before
// setting event listeners
if (inp1.addEventListener)
inp1.addEventListener("click", deleteItem, false);
else
inp1.onclick = deleteItem;
function deleteItem(evt){
if (!evt) evt = window.event; // old IE
var tgt = evt.target || evt.srcElement;
alert(tgt.id); //for debug/test only
return false; //for debug/test only
...
By the way, this was my test page for the suggested new bits:
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<p><button id="clicktest">Click me!</button></p>
<script type="text/javascript">
var btn = document.getElementById("clicktest");
if (btn.addEventListener)
btn.addEventListener("click", deleteItem, false);
else
btn.onclick = deleteItem;
function deleteItem(evt){
if (!evt) evt = window.event; // old IE
var tgt = evt.target || evt.srcElement;
alert(tgt.id);
return false;
}
</script>
</body>
</html>
Hello jscher2000, thank you for your answers, I really appreciate them very much. I am new with javascript, ajax and dynamic html. By the way, I am not ready to write a tutorial, I am looking for a tutorial to learn more.
Chosen Solution
Thank you for clarifying that, I was a little confused.
Here are a couple of sites that I think are really useful for learning JavaScript:
(1) Mozilla Developer Network - mdn
If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:
(2) QuirksMode
Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html
Wonderful! Have a great day!