473,320 Members | 1,695 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to add event to mouseover without replace the existing one

If I add an event (to a div for example) with js, it replaces the
event if there already is one. How can I add instead of replace this?

Example:

<body onLoad="testDiv.onmouseover =
(function(event){alert('helloAgain')});">

<div id="testDiv" onMouseOver="alert('hello');">JaJa!</div>

</body>
Here the alert('hello') is replaced with alert('helloAgain'). And I
don't want that! I want both events.

Anybody have a clever approach to this problem?
Jul 20 '05 #1
6 11307
fr***********@bilia.se (Fredrik Celin) writes:
If I add an event (to a div for example) with js, it replaces the
event if there already is one. How can I add instead of replace this?

Example:

<body onLoad="testDiv.onmouseover =
(function(event){alert('helloAgain')});">

<div id="testDiv" onMouseOver="alert('hello');">JaJa!</div>

</body>
Here the alert('hello') is replaced with alert('helloAgain'). And I
don't want that! I want both events.


You can use the W3C DOM addEventListener method:
document.getElementById("testDiv").
addEventListener("mouseover",function(event){alert ('helloAgain');},false);

If the browser is an old IE, which doesn't have the W3C DOM method, it
can have a similar method called attachEvent:

document.getElementById("testDiv").
attachEvent("onmouseover",function(){alert('helloA gain');});

Finally, if none of these are available, you will have to make your own:

function myAddEvent(elem,type,func) {
var newfunc = func;
if (elem["on"+type]) {
var oldfunc = elem["on"+type];
newfunc = function(event) {
var ret1 = oldfunc(event);
var ret2 = func(event);
return ret1 && ret2;
}
}
elem["on"+type] = newfunc;
}

This is perhaps the simplest way to add the event handler. You can
also build more elaborate versions that allow you to remove the event
handler again, as removeEventLisener and detachEvent does.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
rf

"Fredrik Celin" <fr***********@bilia.se> wrote in message
news:fb**************************@posting.google.c om...
If I add an event (to a div for example) with js, it replaces the
event if there already is one.
No, it does not. The event is handled by your event handler and then passed
up the DOM to the parent, et cetera.

Try:
<body onclick="alert('body');">

<div onclick="alert('div');">text to click on.

</div

</body>
How can I add instead of replace this?

Example:

<body onLoad="testDiv.onmouseover =
(function(event){alert('helloAgain')});">

<div id="testDiv" onMouseOver="alert('hello');">JaJa!</div>

</body>
Not exactly sure what you are doing here. Yes I do, you are replacing the
div's event handler with another one.

Here the alert('hello') is replaced with alert('helloAgain'). And I
don't want that! I want both events.
Yep. Works as you have specified it.
Anybody have a clever approach to this problem?


Hmmm. See above?

Cheers
Richard.
Jul 20 '05 #3
JRS: In article <fb**************************@posting.google.com >, seen
in news:comp.lang.javascript, Fredrik Celin <fr***********@bilia.se>
posted at Sat, 20 Sep 2003 02:45:41 :-
If I add an event (to a div for example) with js, it replaces the
event if there already is one. How can I add instead of replace this?

Example:

<body onLoad="testDiv.onmouseover =
(function(event){alert('helloAgain')});">

<div id="testDiv" onMouseOver="alert('hello');">JaJa!</div>

</body>
Here the alert('hello') is replaced with alert('helloAgain'). And I
don't want that! I want both events.

Anybody have a clever approach to this problem?


function And() { return <something> }
function Moreover() { Alert('Agin') ; return <something> }

<div id="testDiv" onMouseOver="alert('hello');And()">JaJa!</div>

<body onload = "And = Moreover">

might do it. It's probably not clever, though.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #4
Yep
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<oe**********@hotpop.com>...
If I add an event (to a div for example) with js, it replaces the
event if there already is one. How can I add instead of replace this?
function myAddEvent(elem,type,func) {
var newfunc = func;
if (elem["on"+type]) {
var oldfunc = elem["on"+type];
newfunc = function(event) {
var ret1 = oldfunc(event);
var ret2 = func(event);
return ret1 && ret2;
}
}
elem["on"+type] = newfunc;
} This is perhaps the simplest way to add the event handler.


The handlers will lose the "this" value, which cannot really be
wanted. I've come to use something like

function E(obj, evt, func) {
if(obj[evt]) {
obj[evt]=function(f,g){
return function(){
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
}else obj[evt]=func;
}

....and believe that this could easily be extended for old browsers
(apply emulation and arguments as a function property).

I however seem to remember your posting similar code weeks/months ago,
so wonder whether you've found limitations with such a function so as
to come back to the simpler version, or whether you're simply
concerned with backwards compatibility?
Regards,
Yep.
Jul 20 '05 #5
y-*******@em-lyon.com (Yep) writes:
The handlers will lose the "this" value, which cannot really be
wanted.
Correct. That was me simplifying too much.
I also forgot to say that IE's attachEvent fails to set the "this" value
when calling the handlers too.
I've come to use something like

function E(obj, evt, func) {
if(obj[evt]) {
obj[evt]=function(f,g){
return function(){
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
}else obj[evt]=func;
}

...and believe that this could easily be extended for old browsers
(apply emulation and arguments as a function property).
It loses the return value of f, and it is harder to extend for newer
browsers, since it assumes the "on" in front of the event name.

The simple versions here also cannot remove the handler again.
When I really get serious, I use the script:
<URL:http://www.infimum.dk/privat/eventListener.js>
(with an example page at:
<URL:http://www.infimum.dk/privat/eventListener.html>)

It is tested in Opera 7, Mozilla, IE6 and Netscape 4, and adds
addEventListener *and* removeEventListener to an object, either using
attachEvent if it exists, or with the on<event> property. It always
passes the event object as argument, sets the "this" value, and even
tries to normalize the event object in IE (adds the properties: target,
stopPropagation, cancelDefault).
I however seem to remember your posting similar code weeks/months ago,
so wonder whether you've found limitations with such a function so as
to come back to the simpler version, or whether you're simply
concerned with backwards compatibility?


I was simply simplfying too much here. Backwards compatability is an issue,
but I don't always care about Netscape 4 and never about earlier browsers.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6
Yep
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<ll**********@hotpop.com>...
I also forgot to say that IE's attachEvent fails to set the "this" value
when calling the handlers too.
That's very true, and to me this clearly means we shouldn't use
attachEvent in the sort of function we're discussing, since the
obtained behaviors would differ too greatly among user agents.
It loses the return value of f
Another good point; I believe that the approach you have using the
"undefined" property is indeed better, but still we're in a dead end
here if two handlers should return opposite boolean values. My choice
was based on the idea of not altering existing event handlers
behaviors.
and it is harder to extend for newer
browsers, since it assumes the "on" in front of the event name.
Now you've lost me. The function is to be used by itself, I don't use
attachEvent nor addEventListener, only the function - it makes the
script simpler to use and more widely supported.
<URL:http://www.infimum.dk/privat/eventListener.js>


I like when you're getting serious :-)
Regards,
Yep.
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: francophone77 | last post by:
There is a table on a server from which I copied into my local database. I don't want to update this table locally, I want it to be controlled by the table that is on the server on a different...
3
by: Franco, Gustavo | last post by:
How can I remove all event handler from one event without do -=? I won't explain why because is too long, and that the only option left I have right now. I have one event declared for: ...
4
by: Charles Law | last post by:
Is there a way to dynamically remove an event handler from an event without knowing the name of the handler? For example, how can ClassB remove the handler without knowing the name, or how many...
1
by: Stephen | last post by:
I am using mouseover text links to change images in a photo gallery. I would like to disable the onclick event. I do not want the user to be able to click on the link. Any suggestions as to where...
8
bugboy
by: bugboy | last post by:
Am i able to an INSERT into a row that adds to and doesn't replace the current data? I know i can SELECT the data and concat it with the new data in PHP then INSERT it but i was wondering if i can...
1
by: mukeshrasm | last post by:
Hi I want to delete or replace the existing file from directory using PHP. I don't want to rename the file.
0
by: \(O\)enone | last post by:
I'm working on some code which dynamically adds WinForms controls to a form. It's all working well but I'm having to manually call AddHandler repeatedly for each event I am using each time I add...
3
by: optimistx | last post by:
I try to develope a bookmarklet, which hopefully can be activated on almost any http-page (i.e. from any server). The page can have unknown event handlers. The bookmarklet wants to add its own...
4
by: mjvm | last post by:
Hi there, I have a message box that I want to pop up when a user changes data in an existing record. BUT I don't want it to pop up when a new record is being started, Which event should I put this...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.