0

Let's say we have this HTML code:

<body>
   <div>Some text</div>
   <div>Some other text</div>       
</body>

and I have a clone function ( that's what I am trying to make ) that clones an element or a set of elements, and we call the function like this:

clone( 'div' );

So the HTML become:

<body>
   <div>Some text</div>
   <div>Some other text</div> 
   <div>Some text</div>
   <div>Some other text</div>       
</body>

The clone part is easy, the problem is the inheritance of any events listeners applied to the divs before the function is called. My idea is to store the event function every time an event listener is added in an object possibly like this:

evtList = [
     { elem: elemObject, type: eventType, handler: function },
     ...
     ...
];

and then every time I clone a node, I just check if there is an "equal" node (element) in the evtList so I can add the same event listener. And here is the real problem. When I try to check equality using "===" I get false every time. I did some searching and I found node.isEqual(cloneNode) but this is not supported anymore. Is there any way to determine if two nodes (elements) are "equal"? ( in pure javascript of course )

EDIT:

I made a function isEq() that checks if two objects are equal (deep), and it seems to work with any literal object I try. But, I noticed a weird behavior:

isEq( $('div')[0], $('div')[0] );           // Returns False
isEq( $('div').first(), $('div').first() ); // Returns True

Any idea why isEq() behaves that way?

  • If you're using jQuery, its `clone` function has the ability to also clone event handlers. – Sam Jan 09 '16 at 13:28
  • Have you tried using the lodash function isEqual? https://lodash.com includes many functions like this that will be useful. – Jason Kennaly Jan 09 '16 at 13:29
  • Like I said, in pure javascript. I know jQuery and lodash have functions to do what I want, but this is not my question. –  Jan 09 '16 at 14:04
  • This may be a good application for the pattern of adding an event listener higher up in the element hierarchy, letting events on lower-level elements (including ones you cloned) bubble up, and then examine the target of the event to decide what to do. Trying to replicate event handlers on cloned nodes seems like a lot of bookkeeping to worry about. –  Jan 09 '16 at 16:18
  • please show the implementation of isEq(), cause something like `$('div')[0] === $('div')[0]` always gave me `true`. – Thomas Jan 09 '16 at 16:28

1 Answers1

0

  1. You started to rebuild significant parts of jquery; and that makes no sense. They already did this, and have solved all the Problems you come across.

  2. DOM-Nodes are regular Javascript Objects. You can reference them like any other JS-Object and identity will always match.

So you have to show us the parts that go wrong, to get help.

Thomas
  • 3,513
  • 1
  • 13
  • 10
  • 1. Yes, jQuery did this and good for them, but that doesn't mean I will stop writing pure javascript and start using only jQuery. 2. Yes, DOM-Nodes are regular Javascript Objects. but reference is not an option in my problem. The newly-created (cloned) node is not a reference to the original node. –  Jan 09 '16 at 14:07
  • I agree with you on Point1, but this lib has it's purposes. Just meaning that you started to build the same utilities, that already exist and work in that lib; well tested through the jears. – Thomas Jan 09 '16 at 16:22
  • on Point 2. I didn't mean that your clone should be a reference. I meant the elem in the evtList. If this is a reference to the DOM-Node then it should always be `===` to the corresponding node. No need for a however fancy comparator. If this doesn't work in your code, then something is fishy with your code and we need to see more (actual, not working) code to determine what goes wrong. – Thomas Jan 09 '16 at 16:26