search

doekman / base2

Automatically exported from code.google.com/p/base2
0 stars 0 forks source link

base.DOM events do not bind target and relatedTarget elements #75

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Fix the path to base2-dom-fp.js in the following HTML, then save the
result to disk.  (Sorry it's not attached; there appear to be bugs in
Google's code that prevent attachments from working, at least with Firefox.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"
xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-type"/>
    <title>base2.DOM does not bind event target and relatedTarget
elements</title>
    <meta content="text/javascript" http-equiv="Content-Script-Type"/>
    <script src="pathTo/base2-dom-fp.js" type="text/javascript"> </script>
    <script type="text/javascript">
      base2.DOM.bind(document);

      document.addEventListener('DOMContentLoaded', OnLoad, false);

      function OnLoad(event)
      {
        document.querySelectorAll(".Test").forEach(
          function(elm)
          {
            elm.addEventListener("mouseover", OnOver , false);
            elm.addEventListener("mouseout", OnOut , false);
          });
      }

      function OnOut(e)
      {
        e.target.removeClass("Highlight");
      }

      function OnOver(e)
      {
        e.target.addClass("Highlight");
      }
    </script>
    <style type="text/css">
      .Highlight
      {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="Test">
      <p>
        Mousing over or out of this paragraph causes a JavaScript error
        because the mouseover event handler calls addClass on the event
        target, but the target element has not been bound.
      </p>
    </div>
  </body>
</html>

2. Load the saved page.
3. Mouse over the text.

Expected result: A yellow background should appear behind the div that
contains the text when the mouse is over the div and disappear when the
mouse is moved away.

Actual result: A JavaScript error occurs.

Version: base2.DOM 1.0 (beta 2).

This is easily worked around by binding Event.target and/or
Event.relatedTarget in event handlers.  I'm reporting it because the
behavior seems inconsistent with the base2 philosophy.  It's possible that
my understanding of that philosophy is flawed and this is behaving as it
should.

Original issue reported on code.google.com by JessePel...@gmail.com on 16 Jan 2008 at 3:30

GoogleCodeExporter commented 9 years ago 
Good idea. I'm changing this to "enhancement" as base2 only binds the results 
from
the Selectors API by design. But this is better.

Original comment by dean.edw...@gmail.com on 16 Jan 2008 at 11:39

GoogleCodeExporter commented 9 years ago 
I've had a similar problem with beta 3. The following code

base2.DOM.bind(document);
document.querySelector('div').addClass('myClass');

gives an error because addClass() etc don't appear to have been bound to the 
element
returned by the selector- whereas in beta2, it would have been. Is this a 
deliberate
change? I couldn't see any mention of it in the change list, but maybe I didn't 
look
hard enough...

Original comment by gregplay...@gmail.com on 27 May 2008 at 10:07

GoogleCodeExporter commented 9 years ago 
gregplaysguitar, that's probably a different problem: beta3 hasn't
add/toggle/removeClass anymore. Use .classList.add/remove/toggle instead.

Original comment by diox...@gmail.com on 28 May 2008 at 3:45

GoogleCodeExporter commented 9 years ago 
Thanks for addressing this.  It's very elegant.  I'm running into a problem 
that I
don't quite understand, though: the target element does not seem to be 
completely
bound in some cases.  Specifically, if an event target element does not specify 
a
class attribute, it has no classList property.  Explicitly binding the target 
seems
to create the classList.  See the attached test case.

Original comment by JessePel...@gmail.com on 3 Jun 2008 at 2:02

Attachments:

GoogleCodeExporter commented 9 years ago 
Note that in order to use the test case, you'll need to fix the path to 
base2-dom-fp.js.

Original comment by JessePel...@gmail.com on 3 Jun 2008 at 2:04

GoogleCodeExporter commented 9 years ago 
It's not practical to implement this. It requires intercepting every event that 
is 
listened to.

Original comment by dean.edw...@gmail.com on 8 Oct 2008 at 1:41