Closed Bug 303744 Opened 19 years ago Closed 19 years ago

addEventListener - registering a second identical event behaves not correctly

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: stefan, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+

multiple identical events on the same object are registered multiple times.

<html><head></head><body>

<div onclick="document.addEventListener('click', function(){alert('clicked!')},
true)">
  clicking twice on this text and then clicking anywhere else results in two
consecutive alert boxes.
</div>

</body></html>

According to DOM Level 2:

f multiple identical EventListeners are registered on the same EventTarget with
the same parameters the duplicate instances are discarded. They do not cause the
EventListener to be called twice and since they are discarded they do not need
to be removed with the removeEventListener method.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Registration-interfaces

Reproducible: Always
I think whenever that onclick handler runs a new anonymous function gets
created. I suspect that no two anonymous functions are the same as each other
regardless of their content.
Summary: addEventListener - registering a second identical event behaves not correctly → addEventListener - registering a second identical event behaves not correctly
(In reply to comment #1)
> I think whenever that onclick handler runs a new anonymous function gets
> created. I suspect that no two anonymous functions are the same as each other
> regardless of their content.
> 

yes, you are right. The following example with a named function works correctly.

<html><head>
<script type="text/javascript">
   function callback(evt) { alert('key pressed!') }
</script>
</head><body>

<div onclick="document.addEventListener('keydown', callback, true)">
  register
</div>
<div onclick="document.removeEventListener('keydown', callback, true)">
  unregister
</div>

</body></html>

so we should generally avoid anonymous functions here.

The two functions registered are in fact different. See ECMA-262, section 13.1.
It says that implementation may or may not reuse the created function.

Consider:
function x() {return function(a) {return a*2;}}; x() == x() returns false in
Spidermonkey, which is compliant (see also bug 65688). Since the two handlers
are different, you get two alerts.

If you make sure to pass the same function to addEventListener, it works correctly:
<html>
<head>
 <script type="application/x-javascript">
 function f(){alert('clicked!')};
 </script>
</head>

<body>

<div onclick="document.addEventListener('click', f, true)">
  clicking twice on this text and then clicking anywhere else results in one
consecutive alert.
</div>

</body>
</html>

resolving as invalid.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.