Develop Reference

Multiple event listeners being added to dynamically created elements

I am creating and appending elements via class object constructor with a button press, and need each individual element created to have an event listener that will call a method from a class to return the values of the object tied to the element.
Everything seems to work fine when I have a single element that was created. When I have two or more elements, it will output n results where n = the amount of elements that were created. 4 elements created = 4x the outputs, which ruins anything that I want to do with the data output.
For example, if I have one element that has the properties of square and red, then clicking it correctly outputs square and red. But if I add an element with the object properties of circle and green, then clicking on EITHER element will output both 'square red' and 'circle green'
// Utility function
function onEvent(event, selector, callback) {
return selector.addEventListener(event, callback);
}
onEvent('click', submit, function() {
let shape = new Shape(shapeInput.value, colorInput.value);
shape.createShape();
output.innerHTML = `${shape.shapeColor} ${shape.shapeName} `
shapeContainer.addEventListener('click', function (e) {
let target = e.target;
if (target.matches('div')) {
output.innerHTML = `${shape.getInfo()}`;
}
});
});
I have tried looking for ways to check if the element already has an event listener and to ignore it, but didn't have any luck. I have also tried to add a removeEventListener section, to no success. Is there something I'm missing here or am I completely wrong with my approach?

Hope I did not respond let.
this will work for you.
'use strict';
// Selectors
const shapeContainer = select('.shape-container');
const submit = select('.submit');
const shapeInput = select('.shape-input');
const colorInput = select('.color-input');
const shapeSelector = select('.shape');
const output = select('span');
class Shape {
constructor(name, color) {
this._name = name;
this._color = color;
}
set shapeName(name) {
if (name instanceof Shape && this._name.length > 0) {
this._name = name;
} else {
throw new TypeError('Shape name is invalid');
}
}
get shapeName() {
return this._name;
}
set shapeColor(color) {
if (color instanceof Shape && this._color.length > 0) {
this._color = color;
} else {
throw new TypeError('Color is invalid');
}
}
get shapeColor() {
return this._color;
}
createShape() {
let element = {
tag : document.createElement('div'),
color : this._color,
name : this._name,
}
document.querySelector('.shape-container').appendChild(element.tag);
element.tag.style.cssText += 'background-color:' + element.color;
// Shape definition
if (this._name == 'circle') {
element.tag.classList.add('circle', 'shape');
} else if (this._name == 'square') {
element.tag.classList.add('square', 'shape');
} else {
throw new TypeError('shapeName is invalid');
}
element.tag.addEventListener('click', function () {
console.log(element.color," ",element.name)
if (element.tag.matches('div')) {
output.innerHTML = getInfo(element);
}
});
}
}
// Utility functions
function select(selector, parent = document) {
return parent.querySelector(selector);
}
function onEvent(event, selector, callback) {
return selector.addEventListener(event, callback);
}
function getInfo (e) {
console.log(e.color,e.name)
return `${e.name} ${e.color}`;
}
let arr = [];
onEvent('click', submit, function () {
let shape = new Shape(shapeInput.value, colorInput.value);
arr.push(shape);
console.log(arr);
shape.createShape();
});

Have the niceties of extended prototype without actually extending the prototype

What I'm trying to do is have an interface where you can wrap an element into an instance which has an extended prototype, so something like.
const wrappedButton = new WrappedElem(document.getElementById('some-button'))
// we have access to our custom added method:
console.log(`I am the ${wrappedButton.siblingIndex()}th button`)
// but we still have access to the original methods
wrappedButton.addEventListener('click', function(e){
console.log('I clicked on', e.target)
// right here we won't have access to siblingIndex, because the prototype of the element itself was not changed.
})
I can extend the original prototype like this
HTMLElement.prototype.siblingIndex = function() {
if(this.parentNode == null) {
return -1
}
return Array.prototype.indexOf.call(this.parentNode.children, this)
}
But extending the prototype is bad practice, and bad performance.
So it possible to do something like this?

By using a Proxy we can add a new method without protoype changes :
const siblingIndex = () => {}
const handler = {
get(target, property) {
if(property === 'siblingIndex') {
return siblingIndex;
}
return target[property];
}
}
const proxyButton = new Proxy(button, handler);
// we can also call the siblingIndex function
proxyButton.siblingIndex();
// we can access the properties of the underlying object
proxyButton.tagName;
e.target however will not return the proxy but the original object,
but you can just use proxyButton instead of e.target
if you want you can also override the addEventListener method to return the proxied version instead when the callback is called

This is what seems to work alright. Big thanks to Lk77.
var wrappedElMethods = {
siblingIndex() {
if(this.parentNode == null) {
return -1
}
return Array.prototype.indexOf.call(this.parentNode.children, this)
}
}
function wrappedEl(el) {
return proxyInherit(el, wrappedElMethods)
}
function proxyInherit(item, overwrites) {
const handler = {
get(target, property) {
let value
const overwriteVal = overwrites[property]
if(overwriteVal != undefined) {
value = overwriteVal
} else {
value = target[property]
}
if(value instanceof Function) {
return value.bind(item)
}
return value
},
set(target, property, value) {
target[property] = value
}
}
return new Proxy(item, handler)
}
// Usage:
var button = wrappedEl(e.target)
button.onclick = function() {
console.log(button.siblingIndex())
}

javascript OO how to update self parameters with some JSON variable

Lets say I have a javascript object with the the following
var Settings = function () {
this.timelimit = 0;
this.locked = false;
this.expires = null;
this.age = null;
};
And then I set some get/set functions like:
Settings.prototype = {
getAllAges: function () {
return self.age;
},
getTimeLimit: function () {
return self.timelimit;
},
load: function() {
data_from_local_storage = LoadLocalStorage();
}
}
In data_from_local_storage I have JSON variables that match the above variables (timelimit, locked etc .. )
Issue is, the object var settings_ref = Settings() have all these 4 variables - but also have these 3 functions assigned in settings_ref - due to this OO behavior I need to write inside the load() function:
this.timelimit = data_from_local_storage.timelimit
this.age = data_from_local_storage.age
this.locked = data_from_local_storage.locked
Because if I'll write
this = data_from_local_storage it will destroy my object.
So how can I avoid writing all these variables one-by-one ?
w/o a for loop inside a function
in this example are just 4 but there are much much more and I cannot write it everywhere everytime
I'm looking for some .update() function like in Python or something ..
Any quick shortcut that someone know ?

You can use Object.assign() in ES2015:
load: function() {
Object.assign(this, LoadLocalStorage());
}
It's apparently not supported yet in IE, but there's a polyfill on the MDN page:
if (typeof Object.assign != 'function') {
(function () {
Object.assign = function (target) {
'use strict';
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var output = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source !== undefined && source !== null) {
for (var nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
})();
}
(Personally I would use Object.defineProperty() to add the method, but that's verbatim from MDN.)
(edit though I guess if you don't have Object.assign() you may not have Object.defineProperty() either :)

If you store the data inside another object literal, it makes persisting things to localstorage and back a lot easier.. Here is an example..
//pretend local storage loader
function LoadLocalStorage() {
return {
timelimit: 100,
locked: true,
expires: new Date(),
age:40
}
}
var Settings = function () {
this.data = {
timelimit: 0,
locked: false,
expires: null,
age:null
}
};
Settings.prototype = {
getAllAges: function () {
return this.data.age;
},
getTimeLimit: function () {
return this.data.timelimit;
},
load: function() {
this.data = LoadLocalStorage();
}
}
var settings = new Settings;
console.log('Age before our load');
console.log(settings.getAllAges());
settings.load();
console.log('Age after our load');
console.log(settings.getAllAges());

How can I use DOMTokenList directly? [duplicate]

The DOMTokenList and DOMSettableTokenList interfaces (MDN, WHATWG) provide methods for manipulating ordered sets of string tokens represented by space-delimited strings. They are most commonly used in the form of the Element.prototype.classList property, a DOMTokenList which reflects the class attribute of an associated element.
var div = document.createElement('div');
div.setAttribute('class', 'hello world goodnight moon');
var list = div.classList;
console.assert(list.length === 4);
console.assert(list[0] === 'hello');
console.assert(list.item(1) === 'world');
console.assert(list.contains('moon') === true);
console.assert(list.contains('mars') === false);
list.remove('world', 'earth', 'dirt', 'sand');
list.add('hello', 'mars');
list.toggle('goodnight');
console.assert(div.getAttribute('class') === 'hello moon mars');
I'm working on a custom element (HTML5Rocks, W3C Draft) which displays a real-time feed of the activity of specified Stack Overflow users. This list of users is specified in an ids attribute, and may be updated at any time.
<so-users ids="1114 22656 106224"></so-users>
document.querySelector('so-users').setAttribute('ids', '23354 115866');
Instead of requiring users to manipulate this attribute directly, I would like to have an .ids property providing a DOMTokenList that they can use instead. Ideally this would be directly associated with the attribute, but an unbound DOMSettableTokenList instance that I have to manually bind would also be fine.
document.querySelector('so-users').ids.add('17174');
Unfortunately, I have been unable to find any way to create a DOMTokenList instance. The definition is not a constructor, and directly creating an object using its prototype results in errors when I call any associated methods:
new DOMTokenList; // TypeError: Illegal constructor
new DOMSettableTokenList; // TypeError: Illegal constructor
var list = Object.create(DOMSettableTokenList.prototype, {
value: { value: 'hello world' }
});
console.assert(list instanceof DOMTokenList);
console.assert(list instanceof DOMSettableTokenList);
list.item(0); // TypeError: Illegal invocation
function TokenListConstructor() {
this.value = 'hello world';
}
TokenListConstructor.prototype = DOMSettableTokenList.prototype;
var list = new TokenListConstructor;
console.assert(list instanceof DOMTokenList);
console.assert(list instanceof DOMSettableTokenList);
list.add('moon'); // TypeError: Illegal invocation
How can I construct a new DOMTokenList or DOMSettableTokenList instance?

You cannot create an DOMTokenList or an DOMSettableTokenList directly. Instead you should use the class attribute to store and retrieve your data and perhaps map an ids attribute of your DOM element to the classList property.
var element = document.querySelector('so-users');
element.ids = element.classList;
You can use relList according to the documentation but classList is more supported, the only drawback is that you might run into issues if one of your ids matches a class name so set an inline style to hide the element just in case.
For a custom component compatibility should be a concern (classList is present in IE>=10, Firefox 3.6, Chrome 8, Opera 11.5 and Safari 5.1, see http://caniuse.com/#feat=classlist) so if compatibility is in your requirements use the another solution posted below.
If you cannot use clases or classList and/or must use the ids attribute you should implement a custom function according to the spec with the following properties as functions.
item()
contains()
add()
remove()
toggle()
This is an example implementation of such functionality.
var TokenList = function (ids) {
'use strict';
var idsArray = [],
self = this,
parse = function (id, functionName, cb) {
var search = id.toString();
if (search.split(' ').length > 1) {
throw new Error("Failed to execute '" + functionName + "' on 'TokenList': The token provided ('" + search + "') contains HTML space characters, which are not valid in tokens.');");
} else {
cb(search);
}
};
function triggerAttributeChange() {
if (self.tokenChanged && typeof self.tokenChanged === 'function') {
self.tokenChanged(idsArray.toString());
}
}
if (ids && typeof ids === 'string') {
idsArray = ids.split(' ');
}
self.item = function (index) {
return idsArray[index];
};
self.contains = function (id) {
parse(id, 'contains', function (search) {
return idsArray.indexOf(search) !== -1;
});
};
self.add = function (id) {
parse(id, 'add', function (search) {
if (idsArray.indexOf(search) === -1) {
idsArray.push(search);
}
triggerAttributeChange();
});
};
self.remove = function (id) {
parse(id, 'remove', function (search) {
idsArray = idsArray.filter(function (item) {
return item !== id;
});
triggerAttributeChange();
});
};
self.toggle = function (id) {
parse(id, 'toggle', function (search) {
if (!self.contains(search)) {
self.add(search);
} else {
self.remove(search);
}
});
};
self.tokenChanged = null;
self.toString = function () {
var tokens = '',
i;
if (idsArray.length > 0) {
for (i = 0; i < idsArray.length; i = i + 1) {
tokens = tokens + idsArray[i] + ' ';
}
tokens = tokens.slice(0, tokens.length - 1);
}
return tokens;
};
};
Set an 'ids' property in your element with a new instance of this function and finally you must bound the targeted attribute to the property listening to changes to the element and updating the property o viceversa. You can do that with a mutation observer.
See firing event on DOM attribute change and https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
var attachTokenList = function (element, prop, initialValues) {
'use strict';
var initValues = initialValues || element.getAttribute(prop),
MutationObserver = window.MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
observer,
config,
cancelMutation = false;
function createTokenList(values) {
var tList = new TokenList(values);
tList.tokenChanged = function () {
element.setAttribute(prop, element[prop].toString());
cancelMutation = true;
};
element[prop] = tList;
}
createTokenList(initValues);
observer = new MutationObserver(function (mutation) {
var i,
mutationrec,
newAttr;
if (mutation.length > 0 && !cancelMutation) {
for (i = 0; i < mutation.length; i = i + 1) {
mutationrec = mutation[i];
if (mutationrec.attributeName === prop && element[prop]) {
newAttr = element.getAttribute(prop);
createTokenList(newAttr);
}
}
}
cancelMutation = false;
});
config = {
attributes: true
};
observer.observe(element, config);
};
Testing to see if it works
<so-users ids="1234 5678"></so-users>
<button onclick="clickButton1()">Add 7890</button>
<button onclick="clickButton2()">Set to 3456</button>
<button onclick="clickButton3()">Add 9876</button>
Inside a script tag
var elem = document.querySelector('so-users');
attachTokenList(elem, 'ids')
function clickButton1 () {
elem.ids.add('7890');
}
function clickButton2 () {
elem.setAttribute('ids', '3456');
}
function clickButton3 () {
elem.ids.add('9876');
}
Clicking the buttons in sequence set the ids attribute to '3456 9876'

You can get an instance of DOMTokenList with this function:
function newDOMTokenList(initialTokens) {
const tmp = document.createElement(`div`);
const classList = tmp.classList;
if (initialTokens) {
initialTokens.forEach(token => {
classList.add(token);
});
}
return classList;
}
We can 'steal' the DOMTokenList from a div, since it does not affect the current document until you choose to insert the element (for example by using insertAdjacentElement) and it will be garbage collected since we do not keep any references to the variable tmp.
Then you can use your list:
var list = newDOMTokenList(['a', 'b']);
list.add('c');
list.contains('d'); // false
list.contains('b'); // true
list.item(1) // 'b'
list instanceof DOMTokenList // true
// etc...
// render it to a string
var soUsers = document.querySelector('so-users');
soUsers.setAttribute('ids', list.toString());
You can even add a MutationObserver to the tmp element and get callbacks whenever the classList changes:
function newDOMTokenList(initialTokens, changed) {
const tmp = document.createElement('div');
const classList = tmp.classList;
if (initialTokens) {
initialTokens.forEach(token => {
classList.add(token);
});
}
if (changed) {
const observer = new MutationObserver((mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.attributeName === 'class') {
changed();
}
}
});
observer.observe(tmp, {attributes: true});
}
return classList;
}
This, however, will cause the tmp div to never be garbage collected, since the MutationObserver needs to keep a reference to it.

Utilizing Custom Elements - Adding JS properties and methods initialization approach , HTMLElement.dataset
, try
var XFooProto = Object.create(HTMLElement.prototype);
// 1. Give x-foo a foo() method.
XFooProto.contains = function(id) {
var data = JSON.parse(this.dataset.ids);
return data.some(function(_id) {
return id == _id
})
};
XFooProto.add = function(id) {
var data = JSON.parse(this.dataset.ids);
if (!this.contains(id)) {
data.push(id);
};
return data
};
XFooProto.remove = function(id) {
var data = JSON.parse(this.dataset.ids);
if (this.contains(id)) {
for (var _id in data) {
if (data[_id] === id) {
data.splice(_id, 1)
}
};
};
return data
};
XFooProto.ids = function() {
return this.dataset.ids
};
// 2. Define a property read-only "bar".
// Object.defineProperty(XFooProto, "ids", {value: this});
// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});
// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');
xfoo.dataset.ids = '["23354", "115866"]';
// 5. Add it to the page.
document.body.appendChild(xfoo);
console.log(xfoo.add("123")); // `["23354", "115866", "123"]`
console.log(xfoo.remove("123")); // `["23354", "115866"]`
console.log(xfoo.contains("123")); // `false`
console.log(xfoo.contains("23354")); // `true`
console.log(xfoo.ids()); // `["23354", "115866"]` , type : `String`
var pre = document.getElementsByTagName("pre")[0]
pre.innerText = JSON.stringify(JSON.parse(xfoo.dataset.ids), null, 4);
<pre></pre>

added javascript property to window object loses value

Given:
var wins = [];
function openWin(index, val) {
wins[index] = window.open(...);
wins[index].prop1 = val; // add a custom property
console.log(wins[index].prop1); // prop1 is true here
}
function checkProp1(index) {
// wins[index] is still a valid object but prop1 is undefined
console.log(wins[index].prop1);
}
openWin(0, true);
checkProp1(0);
Why does "prop1" lose its value as soon as openWin() exists?
How do I make the associated properties maintain their values?

The window.open returns either the handle to the window, or null in case the popup didn't work. It might be easier to store the windows as a property of another object and add it to your cache like that.
To do so, you could do it in the following form
;
(function(ns) {
ns.windowHandler = ns.windowHandler || {
add: function(index, val) {
var windowHandle = window.open(index, val),
obj = {
handle: windowHandle,
prop1: index
};
if (typeof ns.windowHandler.windows === 'undefined') {
ns.windowHandler.windows = [];
}
ns.windowHandler.windows.slice(index, 0, [obj]);
},
checkProp: function(index) {
if (typeof ns.windowHandler.windows === 'undefined') {
return;
}
return ns.windowHandler.windows[index].prop1;
}
}:
}(window));
window.windowHandler.add(0, true);
console.log(window.windowHandler.checkProp(0));
A fiddle you can find here