How to add event to mouseover without replace the existing one

F

Fredrik Celin

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?
 
L

Lasse Reichstein Nielsen

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.
Click to expand...

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('helloAgain');});

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
 
R

rf

Fredrik Celin said:
If I add an event (to a div for example) with js, it replaces the
event if there already is one.
Click to expand...

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

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>
Click to expand...

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.
Click to expand...

Yep. Works as you have specified it.
Anybody have a clever approach to this problem?
Click to expand...

Hmmm. See above?

Cheers
Richard.
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen
in news:comp.lang.javascript said:
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?
Click to expand...

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.
 
Y

Yep

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;
}
Click to expand...
This is perhaps the simplest way to add the event handler.
Click to expand...

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.
 
L

Lasse Reichstein Nielsen

The handlers will lose the "this" value, which cannot really be
wanted.
Click to expand...

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).
Click to expand...

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?
Click to expand...

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
 
Y

Yep

Lasse Reichstein Nielsen said:
I also forgot to say that IE's attachEvent fails to set the "this" value
when calling the handlers too.
Click to expand...

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
Click to expand...

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.
Click to expand...

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>
Click to expand...

I like when you're getting serious :)


Regards,
Yep.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I add React 18 to existing HTML? 2
How do I hide the modal after 5 seconds? 4
How can I add arrows to my FAQ 0
Only one table shows up with the information 2
Add recipes using JavaScript in table 20
I am trying to make an audio player, how do I get the selected file to be playable? 5
JavaScript: how to keep track of the circle in canvas on specific path? 0
I want to simulate social network activity. How to approach the problem? 1

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 218

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top