How to add event to mouseover without replace the existing one

**Lasse Reichstein Nielsen** · Jul 20 '05, 10:35 AM

Re: How to add event to mouseover without replace the existing one

fredrik.celin@b ilia.se (Fredrik Celin) writes:
[color=blue]
> 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('helloA gain')});">
>
> <div id="testDiv" onMouseOver="al ert('hello');"> JaJa!</div>
>
> </body>
>
>
> Here the alert('hello') is replaced with alert('helloAga in'). And I
> don't want that! I want both events.[/color]

You can use the W3C DOM addEventListene r method:
document.getEle mentById("testD iv").
addEventListene r("mouseover",f unction(event){ alert('helloAga in');},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.getEle mentById("testD iv").
attachEvent("on mouseover",func tion(){alert('h elloAgain');});

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 removeEventLise ner and detachEvent does.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

rf · Jul 20 '05, 10:35 AM

Re: How to add event to mouseover without replace the existing one

"Fredrik Celin" <fredrik.celin@ bilia.se> wrote in message
news:fb9654f9.0 309200145.226c3 2c0@posting.goo gle.com...[color=blue]
> If I add an event (to a div for example) with js, it replaces the
> event if there already is one.[/color]

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>
[color=blue]
> How can I add instead of replace this?
>
> Example:
>
> <body onLoad="testDiv .onmouseover =
> (function(event ){alert('helloA gain')});">
>
> <div id="testDiv" onMouseOver="al ert('hello');"> JaJa!</div>
>
> </body>[/color]

Not exactly sure what you are doing here. Yes I do, you are replacing the
div's event handler with another one.
[color=blue]
>
> Here the alert('hello') is replaced with alert('helloAga in'). And I
> don't want that! I want both events.[/color]

Yep. Works as you have specified it.
[color=blue]
> Anybody have a clever approach to this problem?[/color]

Hmmm. See above?

Cheers
Richard.

**Dr John Stockton** · Jul 20 '05, 10:36 AM

Re: How to add event to mouseover without replace the existing one

JRS: In article <fb9654f9.03092 00145.226c32c0@ posting.google. com>, seen
in news:comp.lang. javascript, Fredrik Celin <fredrik.celin@ bilia.se>
posted at Sat, 20 Sep 2003 02:45:41 :-[color=blue]
>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(even t){alert('hello Again')});">
>
> <div id="testDiv" onMouseOver="al ert('hello');"> JaJa!</div>
>
></body>
>
>
>Here the alert('hello') is replaced with alert('helloAga in'). And I
>don't want that! I want both events.
>
>Anybody have a clever approach to this problem?[/color]

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

<div id="testDiv" onMouseOver="al ert('hello');An d()">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.demo n.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.

**Yep** · Jul 20 '05, 10:36 AM

Re: How to add event to mouseover without replace the existing one

Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<oexfpw4t. fsf@hotpop.com> ...
[color=blue][color=green]
> > 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?[/color][/color]
[color=blue]
> 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;
> }[/color]
[color=blue]
> This is perhaps the simplest way to add the event handler.[/color]

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,ar guments);
return g.apply(this,ar guments);
};
}(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.

**Lasse Reichstein Nielsen** · Jul 20 '05, 10:36 AM

Re: How to add event to mouseover without replace the existing one

y-e.perio@em-lyon.com (Yep) writes:
[color=blue]
> The handlers will lose the "this" value, which cannot really be
> wanted.[/color]

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.
[color=blue]
> 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,ar guments);
> return g.apply(this,ar guments);
> };
> }(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).[/color]

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.j s>
(with an example page at:
<URL:http://www.infimum.dk/privat/eventListener.h tml>)

It is tested in Opera 7, Mozilla, IE6 and Netscape 4, and adds
addEventListene r *and* removeEventList ener 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).
[color=blue]
> 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?[/color]

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 - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Yep** · Jul 20 '05, 10:38 AM

Re: How to add event to mouseover without replace the existing one

Lasse Reichstein Nielsen <lrn@hotpop.com > wrote in message news:<llsijgc3. fsf@hotpop.com> ...
[color=blue]
> I also forgot to say that IE's attachEvent fails to set the "this" value
> when calling the handlers too.[/color]

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.
[color=blue]
> It loses the return value of f[/color]

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.
[color=blue]
> and it is harder to extend for newer
> browsers, since it assumes the "on" in front of the event name.[/color]

Now you've lost me. The function is to be used by itself, I don't use
attachEvent nor addEventListene r, only the function - it makes the
script simpler to use and more widely supported.
[color=blue]
> <URL:http://www.infimum.dk/privat/eventListener.j s>[/color]

I like when you're getting serious :-)

Regards,
Yep.

How to add event to mouseover without replace the existing one

How to add event to mouseover without replace the existing one

Comment

Comment

Comment

Comment

Comment

Comment