I have a function whose parameter is a reference the element that called it:
function someFunction(el )
{
...
}
The function is assigned to the onclick event of some elements in the
HTML source:
<input ... onclick="someFu nction(this);" ...>
and dynamically to others:
elRef.onclick = someFunction;
When someFunction() is called from the statically-assigned onclick, el
is a reference to the element. But when it has been added dynamically,
el will be either undefined (IE) or 'event' (Mozilla et al).
To assign the right value to el, I can test if el exists and if it does,
whether its constructor is some type of HTML element or 'Event'. But IE
doesn't support the constructor property for elements (or have I just
not found it yet?) nor does it understand 'Event' the way Mozilla does.
Anyhow, the following test does the job:
function someFunction(el )
{
var el=(!el || (el.constructor && Event == el.constructor) )? this : el;
...
If el is undefined:
- have IE dynamically added event, el is assigned the value of 'this'
If el is defined
- have IE statically added event, el is assigned the value of el
OR
- have Mozilla:
- if el.constructor is Event, have dynamically added event,
el is assigned the value of this
- if el.constructor is not Event, have statically added event,
el is assigned the value of el
It works, but seems long winded and dependent on the vagaries of the two
event models. As a result, I've been using:
var el = (el && el.nodeName)? el : this;
This seems much simpler - if el is defined and has a nodeName, use it.
Otherwise, use this.
Rather than detecting if the function was passed a reference to 'event'
or not, it sees if an element was passed. It works and assigns a
reference to the element whether called from the statically or
dynamically attached function.
Is that reasonable logic, or should the first method be used? Or is
there a better way of doing what I'm after?
Some sample code:
<input type="button" value="Replace onclick" onclick="
replaceOnclick( this);
alert('Old onclick replaced');
">
<script type="text/javascript">
function replaceOnclick( el)
{
// Short version
var el = (el && el.nodeName)? el : this;
// Long version (wrapped for posting)
// var el = ( !el || (el.constructor
&& Event == el.constructor) )? this : el;
el.onclick = replaceOnclick;
alert( el.nodeName + ': new onclick');
}
</script>
--
Rob 4 2268
RobG wrote: <input ... onclick="someFu nction(this);" ...>
and dynamically to others:
elRef.onclick = someFunction;
You need
elRef.onclick = function (evt) {
someFunction(th is);
};
then to have the same as that onclick attribute in the HTML markup creates.
--
Martin Honnen http://JavaScript.FAQTs.com/
RobG wrote: I have a function whose parameter is a reference the element that called it:
function someFunction(el ) { ... }
The function is assigned to the onclick event of some elements in the HTML source:
<input ... onclick="someFu nction(this);" ...>
and dynamically to others:
elRef.onclick = someFunction;
When someFunction() is called from the statically-assigned onclick, el is a reference to the element. But when it has been added dynamically, el will be either undefined (IE) or 'event' (Mozilla et al).
To assign the right value to el, I can test if el exists and if it does, whether its constructor is some type of HTML element or 'Event'. But IE doesn't support the constructor property for elements (or have I just not found it yet?) nor does it understand 'Event' the way Mozilla does.
Another (clearer??) way:
function someFunction() {
var el = someFunction.ar guments[1] ||
someFunction.ar guments[0].target;
...
}
<input ... onclick="someFu nction(null,thi s);" ...>
elRef.onclick = someFunction;
I say that Mozilla/3W way demostrates its big flaw here: it leads to
the left/right arguments' shift in functions depending on how they are
being called: from the program stream or by event listeners. That's a
pain for distributed libraries.
VK wrote: RobG wrote:
I have a function whose parameter is a reference the element that called it:
function someFunction(el ) { ... }
The function is assigned to the onclick event of some elements in the HTML source:
<input ... onclick="someFu nction(this);" ...>
and dynamically to others:
elRef.onclick = someFunction;
When someFunction() is called from the statically-assigned onclick, el is a reference to the element. But when it has been added dynamically, el will be either undefined (IE) or 'event' (Mozilla et al).
To assign the right value to el, I can test if el exists and if it does, whether its constructor is some type of HTML element or 'Event'. But IE doesn't support the constructor property for elements (or have I just not found it yet?) nor does it understand 'Event' the way Mozilla does.
Another (clearer??) way:
function someFunction() { var el = someFunction.ar guments[1] || someFunction.ar guments[0].target; ... }
<input ... onclick="someFu nction(null,thi s);" ...>
elRef.onclick = someFunction;
I don't think that's an improvement - it introduces peculiarities at
both ends. I say that Mozilla/3W way demostrates its big flaw here: it leads to the left/right arguments' shift in functions depending on how they are being called: from the program stream or by event listeners. That's a pain for distributed libraries.
The 'flaw', if there is one, is that there are two models - I can't
comment on whether one is better than the other.
Martin's suggestion is fine, I've used it frequently but it seems a bit
of a hack to use an anonymous function to call another function (I guess
views on that differ).
Incidentally, nice you see you're back contributing :-)
--
Rob
> VK wrote: ... it leads to the left/right arguments' shift in functions depending on...
Correcting myself as a wrong wording and explanation: there is not any
*shift* here. The first argument in each function (3W model) is
reserved for the Event data. You can use it for other purposes but it
will be like sitting on someone place ready to leave at any moment. As
soon as your function is called by an event listener, the first
argument will contain the Event data no matter what kind of argument
your function was really expecting. We may call it "a different
approach" or "an unforseen oops of the chosen model", it's really a
question of preferences :-)
So wrappers from anonymous functions (despite their semi-ugliness)
would be a choice I guess.
the following test does the job: function someFunction(el ) { var el=(!el || (el.constructor && Event == el.constructor) )? this : el;
There must be some surrounding code missing because here (and in the
other variant) you assign window object to el in IE case (this ==
window.self within named function body). That doesn't seem your aim.
Incidentally, nice you see you're back contributing :-)
;-) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: RobG |
last post by:
I am trying to dynamically add an onclick to an element,
however I just can't get the syntax right. consider the
following function:
function doClick (evt,x) {
// do things with evt and x
}
Which is called statically by:
<button onclick="doClick(event,this);">Click me</button>
|
by: David J. Berman |
last post by:
Thanks for any help...!
My error is:
Object reference not set to an instance of an object.
> public int DisplayOrder {
> get {
>>>>>> return (int) ViewState;
> }
|
by: Tim Mulholland |
last post by:
I am trying to create an ASPX page that, based on QueryString inputs,
returns another file, in this case a WMA file. I do not want to do this by
redirect, because these files are not available publicly via the web, or via
a share. So i am returning it by opening a stream, and writing the bytes out
via Response.BinaryWrite().
This is all fine and dandy, but the Save As.. dialog lists the filetype as
ASPX page, and gives the page name......
|
by: puzzlecracker |
last post by:
I have seen these terms used in Gang of 4 but could never thoroughly
understand what it meant I perceive that C++ is both, but apparently
it is only a latter.
Can someone explain it?
thx
|
by: Cookie Jar |
last post by:
I have a situation where I am trying to abstract away not only the
organization of the presentation (via TPL files) but also some of the
finer formatting features (via CSS).
So, for a particular request, I want to be able to select a specific
TPL file to render (easy enough), but I also want to indicate a
specific CSS file to use with the selected TPL.
Can this assignment be done dynamically, i.e. at runtime? I am hoping
I can pass...
| |
by: Ron Goral |
last post by:
Hello
I am new to creating objects in javascript, so please no flames about my
coding style. =) I am trying to create an object that will represent a "div"
element as a menu. I have written several methods that are working fine. The
problem is if I want to dynamically assign an event handler to the object,
the event handler is not called. What am I doing wrong? Below is a sample
HTML doc with everything in place.
<!DOCTYPE HTML PUBLIC...
|
by: Chris |
last post by:
I have a page with mixture of static and dynamically added controls is there
any way of controlling the order which they are added to the page. My submit
button (statically added) appears before some textboxes (dynamically added).
I know I could move it around with CSS but I want to move towards an
accessible site that will display forms in the right order without CSS.
Regards, Chris.
|
by: Martin Larsen |
last post by:
Hi,
When a PHP program links to a library using include or require (or their
_once variations), is the library then linked dynamically or statically?
While it might seem irrelevant from a technical point of view, the
linking method is important when it comes to licencing issues as some
licences, like GPL, differ between those kinds of linking when it comes
to viewing the library as a derivative work of the main program.
|
by: bambr |
last post by:
I'm using following code:
function cloneRow(tBodyId, sourceRowId)
{
var obj = document.getElementById(tBodyId);
if(obj.tagName != 'TBODY')
{
for(var i = 0; i < obj.childNodes.length; i++)
{
if(obj.childNodes.tagName == 'TBODY')
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |