By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,626 Members | 1,750 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,626 IT Pros & Developers. It's quick & easy.

How to add event to mouseover without replace the existing one

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.