HTML elements and events using e4x in FF1.5

peter.staab · Apr 22, 2006

I have been trying to do the following. Using JS I want to create an
input element (text box) and attach a event listener. I have done in
in two different ways. The first is using xml elements directly (as in
e4x) and the second using the dom method createElement (which is much
clunkier to write). I'd prefer the former. I've included a stripped
down example below.

It appears that when creating an input element using the line:

var inputBox = <input type="text" size="30" />

that it does not have the same properties as when it is created with:

var inputBox2 = document.createElement("input");

because when an event listener is attached using addEventListener, an
error is generated on the first, but not the second.

My thoughts on this are either
1. The namespace for the input element is not correct and whether input
can have a listener attached. However, my guess is that it would not
show up in the first div box.

2. There's a bug. I have tried this in the nightly trunk build of FF
(Minefeld 3.0a1). If it does seem like a bug, I can file it.

Peter

The code is below:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

<html>
<head>
<title>Testing events and e4x</title>
<script type="text/javascript e4x=1;">
//<![CDATA[
onload = function()
{
var inputBox = <input type="text" size="30" />

inputBox.addEventListener("focus",function () {alert("hi");},
false);
document.getElementById("out").innerHTML = <form>{inputBox}</form>;
}
//]]>
</script>
</head>
<body>
<h1>Testing events and e4x</h1>
<div id="out"></div>
</body>
</html>

peter.staab · Apr 22, 2006

I realize that I added a older version of the code. Here's a newer one
that shows the two methods mentioned in the original message:

onload = function()
{
var inputBox = <input type="text" size="30" />
// The following line gives an error
//inputBox.addEventListener("focus",function () {alert("hi");},
false);
document.getElementById("out1").innerHTML = <form>{inputBox}</form>;

var inputBox2 = document.createElement("input");
inputBox2.addEventListener("focus",function () {alert("hi");},
false);
var formBox = document.createElement("form");
formBox.appendChild(inputBox2);
document.getElementById("out2").appendChild(formBox);

}

Martin Honnen · Apr 22, 2006

It appears that when creating an input element using the line:

var inputBox = <input type="text" size="30" />

that it does not have the same properties as when it is created with:

var inputBox2 = document.createElement("input");

because when an event listener is attached using addEventListener, an
error is generated on the first, but not the second.

There is no magic to E4X XML objects becoming DOM objects just because
you use them with script inside of the browser. That expression
<input type="text" size="30" />
is part of the JavaScript 1.6 core language respectively of the E4X
extension to ECMAScript and yields an XML object of node kind 'element'.
It is not a DOM HTMLInputElement. To parse X(HT)ML into DOM objects you
need to use DOMParser e.g.

var xmlDocument = new DOMParser().parseFromString(
'<input type="text" size="30" xmlns="http://www.w3.org/1999/xhtml" />',
'application/xml'
);
document.body.appendChild(document.importNode(xmlDocument.documentElement,
true));

or createContextualFragment (which also allows HTML parsing) e.g.

var range = document.createRange();
range.selectNodeContents(document.body);
var documentFragment = range.createContextualFragment(
'<input type="text" size="30">');
document.body.appendChild(documentFragment);

ASM · Apr 22, 2006

Martin Honnen a écrit :

or createContextualFragment (which also allows HTML parsing) e.g.

var range = document.createRange();
range.selectNodeContents(document.body);
var documentFragment = range.createContextualFragment(
'<input type="text" size="30">');
document.body.appendChild(documentFragment);

Can I do :

range.createContextualFragment(
'<input type="text" onclick="alert(\'hello\')" size="30">');

Martin Honnen · Apr 23, 2006

ASM wrote:

Can I do :

range.createContextualFragment(
'<input type="text" onclick="alert(\'hello\')" size="30">');

Why not? Of course that function is a proprietary Mozilla extension to
the W3C DOM Level 2 Range API so while you can use it with Mozilla you
would probably rather look at using e.g.
var div = document.createElement('div');
div.innerHTML =
'<input type="text" onclick="alert(\'hello\')" size="30">';
someElement.appendChild(div.firstChild);
to have some cross browser way of parsing a snippet of HTML markup into
a node or several ones.

I want to Display Excel As HTML In js	2	Feb 24, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Add recipes using JavaScript in table	20	Apr 17, 2023
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
Reversing output of user input by using while loop...	2	Sep 1, 2022

HTML elements and events using e4x in FF1.5

peter.staab

peter.staab

Martin Honnen

ASM

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads