1

In an answer I gave to another SO question I was very proud of having come up with a very short click-handler-toggle. Slightly re-written, it's this:

document.getElementById("myToggle").addEventListener("click", function() {
  (this.oddClk = !this.oddClk) ? oddHandler() : evenHandler();
});

This isn't central to my question, but in case you're wondering what I'm doing here, read this paragraph. I'm adding a custom property, oddClk, to the HTML element I clicked. After the first click, this property is initially undefined but then is immediately negated to true. (Note that the first part of the ternary statement intentionally uses = not == or ===.) The second time through it's negated again to false, etc. Based on its value, one of two handlers is invoked. Not only is the code short, but it also doesn't require any global variables, and can be used on multiple targets simultaneously. If you're interested, here's a working version:

document.getElementById("myToggle").addEventListener("click", function() {
  (this.oddClk = !this.oddClk) ? oddHandler(): evenHandler();
});

function oddHandler() {
  document.getElementById("result").innerHTML = "odd";
}
function evenHandler() {
  document.getElementById("result").innerHTML = "even";
}
<div id="result">Not clicked yet</div>
<button id="myToggle">Click me to toggle</button>

My question, though, is this: What are the consequences of using this.myCustomProperty where this is an HTML element (in this case, the target that was clicked)?

Note that I'm not setting a custom attribute on the element. Rather, I'm setting a new custom property on the HTML element. It actually ends up being the only own property on the element. Are there any significant side-effects of assigning an own property onto an HTML element object like this, side-effects that might have negative consequences elsewhere?

I've found other questions on custom attributes, but that's clearly a different kettle of fish. And references to this in discussions of addEventListener don't seem to bring up new own properties.

One possible down-side is that I might pick a property name that will be defined in future versions of HTML. In that case my own property would clobber the newer inherited property. However, if I name my property carefully or strangely enough, I should be OK on that front. So, are there other problems?

Note that I'm not really asking to see if I should include this in production code. I wrote my toggle routine above basically just as a mental exercise, to see how short I could write it. I'm asking more just to better understand the inner workings of HTML.

Community
  • 1
  • 1
Andrew Willems
  • 11,880
  • 10
  • 53
  • 70
  • 2
    http://perfectionkills.com/whats-wrong-with-extending-the-dom/ – Bergi Feb 25 '16 at 06:58
  • 1
    Other than a potential or future name conflict, you're good. You could also put the variable in a closure and not have to make a DOM property at all. – jfriend00 Feb 25 '16 at 07:02
  • Note that there is no requirement for host objects to implement any kind of inheritance, and that properties like *innerHTML* are more likely getters, not inherited properties (innerHTML belongs to an element instance, how can it be inherited?). – RobG Feb 25 '16 at 07:10
  • @RobG, thanks for the insight into inheritance and host objects. I'll remove my reference to what I thought were inherited properties. – Andrew Willems Feb 25 '16 at 07:21

0 Answers0