I have a bunch of <td>'s in a table that have onmouseover and onmouseout events. I would like for there to only be one event handler, say on the <table> itself that knows how to handle all the events to prevent so many event handlers on the page. Using native javascript, what is the best way to do this?
The events should bubble up to the table unless they are cancelled in the process from an element lower down in the hierarchy. You can setup event listeners for mouseover and mouseout events on the table and check if the target is a <td> cell. If so, then process those events. Here's a quick example.
var table = document.getElementById("myTable");
table.addEventListener('mouseover', function(event) {
var target = event.target;
if (target.nodeName == 'TD') {
target.style.backgroundColor = '#FFF';
}
});
See the compatibility table for mouse events. Since older versions of IE do not follow the DOM event registration model as per the w3c spec, you would have to use attachEvent to attach events for IE only.
Read up this article to get a better understanding of the differences in IE and other browsers.
Checkout a non cross-browser example here.
You should use unobtrusive javascript so that you have the two handlers set up for each but it doesn't clutter up the page. Use getElementsByTagName("td") to get the - modify that as appropriate. Then loop through and for each element, tableElem, tableElem.onMouseOver = function(){whatever... } and tableElem.onMouseOut = function(){whatever ... }.
You can make it terser if you want to use jQuery, e.g. $("td").mouseOver(function(){whatever;});
Example code:
table.onmouseover = function(event) {
var target = (event && event.target) || window.event.srcElement;
if(target.nodeName.toLowerCase() !== 'td') return;
// do stuff
};
Related
Is it ok to add a custom property to an existing DOM event? I would like to "mark" click events in a leaf element (say, a <span>) and catch the event (after bubbling) in an ancestor (say, <body>) and take a decision based on that mark.
Sure you can add new properties to an event.
If I understand you correctly you are looking for a way to uniquely identify a specific event so you can de-dupe or count unique events or whatever.
For instance if you have one event handler handling some events on different elements and you want to make sure you handle each event only once. If an event bubbles you might handle the same event on multiple elements. Some events might bubble, some might not (e.g. because another handler called Event.stopPropogation() lower in the dom tree. Maybe you don't have that much control over where you attach your event handlers and have to rely on bubbling in some cases.
Example...
<div id="parent">
<div id="child"></div>
</div>
var parentEl = document.querySelector('#parent'),
childEl = document.querySelector('#child');
child.addEventListener('click', function (e) {
var rand = ''+Math.floor(Math.random()*1000000);
console.log('child', rand);
e.custField = rand;
});
parent.addEventListener('click', function (e) {
console.log('parent', e);
});
child.click();
Downside of this is that you are polluting someone else's objects that might be handled by code that isn't your own. Not usually a great idea.
Alternatively
1) Use Event.timeStamp
Your event handler can keep a cache of Event.timeStamp and use that to de-dupe handled events.
var eventHandler = (function () {
var eventTimeStampCache = {};
return function (evt) {
if (evt.timeStamp in eventTimeStampCache) {
console.log('Ignore this event.', evt);
return;
}
eventTimeStampCache[evt.timeStamp] = true;
console.log('Handle this event.', evt);
};
})();
child.addEventListener('click', eventHandler);
parent.addEventListener('click', eventHandler);
child.click();
2) Use CustomEvent
If you are firing the events in the first place, use a CustomEvent that is all your own and feel free to make custom APIs and add event listeners that listen for your custom event.
I'd suggest firing a CustomEvent in response to the standard event except you have the same problem of knowing if this has been done already or not.
You can add a dataset item to the element called "data-xxx"
<span id="id" data-myvar="myvalue"></span>
And then later on
console.log( document.getElementbyID('id').dataset.myvar ) // myvalue
I am trying to clone a div which has input fields.
But the eventListeners are not being fired.
Even though I am doing a deep clone in the following way -
var rows = document.querySelectorAll('.row');
var dupNode = rows[0].cloneNode(true);
sheet.appendChild(dupNode);
Here is the Demo
Each input has a click event and the cloned inputs are not registering with the click event. What am I missing ?
The simplest (and the most effective) thing to do is to bind single event listener on the #sheet container and benefit from event bubbling. In this case you can append as many new elements as you wish and will never need to bind events to them:
document.querySelector('#sheet').addEventListener('click', function(e) {
var target = e.target;
if (target.tagName == 'INPUT') {
alert("clicked");
}
}, false);
A little tricky part is that you need to check on what element event occurred and execute your code on those only you are interested in.
Demo: http://jsbin.com/mejegaqasu/1/edit?html,js,output
Event handlers are not copied during cloning. You will need to delegate the event handlers if you want them to work everywhere in the DOM after cloning.
Event delegation http://davidwalsh.name/event-delegate
cloneNode documentation https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
I use this D3 snippet to move SVG g elements to top of the rest element as SVG render order depends on the order of elements in DOM, and there is no z index:
d3.selection.prototype.moveToFront = function () {
return this.each(function () {
this.parentNode.appendChild(this);
});
};
I run it like:
d3.select(el).moveToFront()
My issue is that if I add a D3 event listener, like d3.select(el).on('mouseleave',function(){}), then move the element to front of DOM tree using the code above, all event listeners are lost in Internet Explorer 11, still working fine in other browsers.
How can I workaround it?
Single event listener on parent element, or higher DOM ancestor:
There is a relatively easy solution which I did not originally mention because I had assumed you had dismissed it as not feasible in your situation. That solution is that instead of multiple listeners each on a single child element, you have a single listener on an ancestor element which gets called for all events of a type on its children. It can be designed to quickly choose to further process based on the event.target, event.target.id, or, better, event.target.className (with a specific class of your creation assigned if the element is a valid target for the event handler). Depending on what your event handlers are doing and the percentage of elements under the ancestor on which you already are using listeners, a single event handler is arguably the better solution. Having a single listener potentially reduces the overhead of event handling. However, any actual performance difference depending on what you are doing in the event handlers and on what percentage of the ancestor's children on which you would have otherwise placed listeners.
Event listeners on elements actually interested in
Your question asks about listeners which your code has placed on the element being moved. Given that you do not appear concerned about listeners placed on the element by code which you do not control, then the brute-force method of working around this is for you to keep a list of listeners and the elements upon which you have placed them.
The best way to implement this brute-force workaround depends greatly on the way in which you place listeners on the elements, the variety that you use, etc. This is all information which is not available to us from the question. Without that information it is not possible to make a known-good choice of how to implement this.
Using only single listeners of each type/namespace all added through selection.on():
If you have a single listener of each type.namespace, and you have added them all through the d3.selection.on() method, and you are not using Capture type listeners, then it is actually relatively easy.
When using only a single listener of each type, the selection.on() method allows you to read the listener which is assigned to the element and type.
Thus, your moveToFront() method could become:
var isIE = /*#cc_on!#*/false || !!document.documentMode; // At least IE6
var typesOfListenersUsed = [ "click", "command", "mouseover", "mouseleave", ...];
d3.selection.prototype.moveToFront = function () {
return this.each(function () {
var currentListeners={};
if(isIE) {
var element = this;
typesOfListenersUsed.forEach(function(value){
currentListeners[value] = element.selection.on(value);
});
}
this.parentNode.appendChild(this);
if(isIE) {
typesOfListenersUsed.forEach(function(value){
if(currentListeners[value]) {
element.selection.on(value, currentListeners[value]);
}
});
}
});
};
You do not necessarily need to check for IE, as it should not hurt to re-place the listeners in other browsers. However, it would cost time, and is better not to do it.
You should be able to use this even if you are using multiple listeners of the same type by just specifying a namespace in the list of listeners. For example:
var typesOfListenersUsed = [ "click", "click.foo", "click.bar"
, "command", "mouseover", "mouseleave", ...];
General, multiple listeners of same type:
If you are using listeners which you are adding not through d3, then you would need to implement a general method of recording the listeners added to an element.
How to record the function being added as a listener, you can just add a method to the prototype which records the event you are adding as a listener. For example:
d3.selection.prototype.recOn = function (type, func) {
recordEventListener(this, type, func);
d3.select(this).on(type,func);
};
Then use d3.select(el).recOn('mouseleave',function(){}) instead of d3.select(el).on('mouseleave',function(){}).
Given that you are using a general solution because you are adding some listeners not through d3, you will need to add functions to wrap the calls to however you are adding the listener (e.g. addEventListener()).
You would then need a function which you call after the appendChild in your moveToFront(). It could contain the if statement to only restore the listeners if the browser is IE11, or IE.
d3.selection.prototype.restoreRecordedListeners = function () {
if(isIE) {
...
}
};
You will need to chose how to store the recorded listener information. This depends greatly on how you have implemented other areas of your code of which we have no knowledge. Probably the easiest way to record which listeners are on an element is to create an index into the list of listeners which is then recorded as a class. If the number of actual different listener functions you use is small, this could be a statically defined list. If the number and variety is large, then it could be a dynamic list.
I can expand on this, but how robust to make it really depends on your code. It could be as simple as keeping tack of only 5-10 actually different functions which you use as listeners. It might need to be as robust as to be a complete general solution to record any possible number of listeners. That depends on information we do not know about your code.
My hope is that someone else will be able to provide you with a simple and easy fix for IE11 where you just set some property, or call some method to get IE to not drop the listeners. However, the brute-force method will solve the problem.
One solution could be to use event delegation. This fairly simple paradigm is commonplace in jQuery (which gave me the idea to try it here.)
By extending the d3.selection prototype with a delegated event listener we can listen for events on a parent element but only apply the handler if the event's target is also our desired target.
So instead of:
d3.select('#targetElement').on('mouseout',function(){})
You would use:
d3.select('#targetElementParent').delegate('mouseout','#targetElement',function(){})
Now it doesn't matter if the events are lost when you move elements or even if you add/edit/delete elements after creating the listeners.
Here's the demo. Tested on Chrome 37, IE 11 and Firefox 31. I welcome constructive feedback but please note that I am not at all familiar with d3.js so could easily have missed something fundamental ;)
//prototype. delegated events
d3.selection.prototype.delegate = function(event, targetid, handler) {
return this.on(event, function() {
var eventTarget = d3.event.target.parentNode,
target = d3.select(targetid)[0][0];
if (eventTarget === target) {//only perform event handler if the eventTarget and intendedTarget match
handler.call(eventTarget, eventTarget.__data__);
}
});
};
//add event listeners insead of .on()
d3.select('#svg').delegate('mouseover','#g2',function(){
console.log('mouseover #g2');
}).delegate('mouseout','#g2',function(){
console.log('mouseout #g2');
})
//initial move to front to test that the event still works
d3.select('#g2').moveToFront();
http://jsfiddle.net/f8bfw4y8/
Updated and Improved...
Following Makyen's useful feedback I have made a few improvements to allow the delegated listener to be applied to ALL matched children. EG "listen for mouseover on each g within svg"
Here's the fiddle. Snippet below.
//prototype. move to front
d3.selection.prototype.moveToFront = function () {
return this.each(function () {
this.parentNode.appendChild(this);
});
};
//prototype. delegated events
d3.selection.prototype.delegate = function(event, targetselector, handler) {
var self = this;
return this.on(event, function() {
var eventTarget = d3.event.target,
target = self.selectAll(targetselector);
target.each(function(){
//only perform event handler if the eventTarget and intendedTarget match
if (eventTarget === this) {
handler.call(eventTarget, eventTarget.__data__);
} else if (eventTarget.parentNode === this) {
handler.call(eventTarget.parentNode, eventTarget.parentNode.__data__);
}
});
});
};
var testmessage = document.getElementById("testmessage");
//add event listeners insead of .on()
//EG: onmouseover/out of ANY <g> within #svg:
d3.select('#svg').delegate('mouseover','g',function(){
console.log('mouseover',this);
testmessage.innerHTML = "mouseover #"+this.id;
}).delegate('mouseout','g',function(){
console.log('mouseout',this);
testmessage.innerHTML = "mouseout #"+this.id;
});
/* Note: Adding another .delegate listener REPLACES any existing listeners of this event on this node. Uncomment this to see.
//EG2 onmouseover of just the #g3
d3.select('#svg').delegate('mouseover','#g3',function(){
console.log('mouseover of just #g3',this);
testmessage.innerHTML = "mouseover #"+this.id;
});
//to resolve this just delegate the listening to another parent node eg:
//d3.select('body').delegate('mouseover','#g3',function(){...
*/
//initial move to front for testing. OP states that the listener is lost after the element is moved in the DOM.
d3.select('#g2').moveToFront();
svg {height:300px; width:300px;}
rect {fill: pink;}
#g2 rect {fill: green;}
#testmessage {position:absolute; top:50px; right:50px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="svg">
<g id="g1"><rect x="0px" y="0px" width="100px" height="100px" /></g>
<g id="g2"><rect x="50px" y="50px" width="100px" height="100px" /></g>
<g id="g3"><rect x="100px" y="100px" width="100px" height="100px" /></g>
</svg>
<div id="testmessage"></div>
As with all delegated listeners if you move the target element outside of the parent you have delegated the listening to then naturally the events for that child are lost. However, there is nothing to stop you delegating the event listening to the body tag as you'll never move a child outside of that. EG:
d3.select('body').delegate('mouseover','g',function(){...
This also happens in IE prior to 11. My mental model for why this error occurs is that if you're hovering over an element and then move it to the front by detaching and re-attaching it, mouseout events won't fire because IE loses the state that a mouseover occured in the past and thus doesn't fire a mouseout event.
This seems to be why it works fine if you move all other elements but the one you're hovering over. And this is what you can easily achieve by using selection.sort(comparatorFunction). See the d3 documentation on sort and the selection.sort and selection.order source code for further details.
Here's a simple example:
// myElements is a d3 selection of, for example, circles that overlap each other
myElements.on('mouseover', function(hoveredDatum) {
// On mouseover, the currently hovered element is sorted to the front by creating
// a custom comparator function that returns “1” for the hovered element and “0”
// for all other elements to not affect their sort order.
myElements.sort(function(datumA, datumB) {
return (datumA === hoveredDatum) ? 1 : 0;
});
});
In jQuery, you can do the following:
$('#j_unoffered').on('click', '.icon_del', function () {...
This puts one handler on the element j_unoffered that fires if any descendant element with class icon_del is clicked. It applies, furthermore, to any subsequently created icon_del element.
I can get this working fine in Closure where the click is on the element itself.
goog.events.listen(
goog.dom.getElement('j_unoffered'),
goog.events.EventType.CLICK,
function(e) {...
How can I specify a parent event target in Closure that works for its children/descendants in the same way as the jQuery example?
I'm assuming I need to use setParentEventTarget somehow, but I'm not sure how to implement it for DOM events. Most of the documentation I've found pertains to custom dispatch events.
-- UPDATE --
I'm wondering if there is anything wrong with this rather simple solution:
goog.events.listen(
goog.dom.getElement('j_unoffered'),
goog.events.EventType.CLICK,
function(e) {
if (e.target.className.indexOf('icon_del') !== -1) {...
It still leaves this bound to the parent, but e.target allows a work-around. The fifth argument in listen (opt_handler) allows you to bind this to something else, so I guess that's an avenue, too.
I don't know about such possibility too, so I suggest other piece of code:
var addHandler = function(containerSelector, eventType, nestSelector, handler) {
var parent = goog.isString(containerSelector) ?
document.querySelector(containerSelector) :
containerSelector;
return goog.events.listen(
parent,
eventType,
function(e) {
var children = parent.querySelectorAll(nestSelector);
var needChild = goog.array.find(children, function(child) {
return goog.dom.contains(child, e.target);
});
if (needChild)
handler.call(needChild, e);
});
});
Usage:
addHandler('#elem', goog.events.EventType.CLICK, '.sub-class', function(e) {
console.log(e.target);
});
Update:
If you will use this e.target.className.indexOf('icon_del') there will be possibility to miss the right events. Consider a container div with id = container, it has couple of divs with class innerContainer, and each of them contains couple of divs with class = finalDiv. And consider you will add event handler with your code above, which will check e.target for innerContainer class. The problem is when user will click on finalDiv your handler will be called, but the event target will be finalDiv, which is not innerContainer, but contained by it. Your code will miss it, but it shouldn't. My code checks if e.target has nested class or contained by it, so you will not miss such events.
opt_handler can't really help you either, because there might be many nested elements you want to hanlde (which of them will you pass here? maybe all, but not that helpful, you can get them in event handler whenever you want), moreover they can be added dynamically after, so when you add handler you could not know about them.
In conclusion, I think doing such a job in an event handler is justified and most efficient.
What you are referring to is called event delegation
It seems that this is not possible (out of the box) with Google Closure Library; So my recommandation is to use jQuery or another similar event handling library that offers this functionality. If this is not possible or if you wanna do it by hand here's one possible approach (NOTE: this is not for production use)
var delegateClick = function(containerId, childrenClass, handler){
goog.events.listen(goog.dom.getElement(containerId), goog.events.EventType.CLICK, function(event){
var target = event.target;
//console.log(event);
while(target){
if ( target.className && target.className.split(" ").indexOf(childrenClass)!== -1) {
break;
}
target = target.parentNode;
}
if(target){
//handle event if still have target
handler.call(target, event);
}
});
}
//then use it, try this here: http://closure-library.googlecode.com/git/closure/goog/demos/index.html
//..select the nav context
delegateClick( 'demo-list' ,'goog-tree-icon', function(event){console.log(event);})
Here's a more in depth analysis of event delegation
Again, you should use a proven library for this, here are some options: jQuery, Zepto, Bean
I have an html list of checkboxes but I don't know how to get the 'document.attachEvent' to find those checkboxes on an onclick?
I wasn't sure if I could set the event model specific to the IE then in a document.attachEvent create a for loop that goes through every checkbox and handles each one? Also, my checkboxes are of all different names so I can't checkboxname.attachEvent unless I did that to each one.
My elements are dynamics enough that I tried adding en event to the broadest ancestor, which was the document to that I could use the event to get the target and type with no avail.
Much Thanks.
Some fixes to your code:
document.attachEvent('onclick', function (e) {
var target = e.srcElement;
if (target.type === 'checkbox') {
if(target.checked){
button.disabled = false;
} else {
button.disabled = true;
}
}
});
The third argument is not used in IE's event handling model. e.srcElement refers to the clicked element.
I'd suggest you to wrap the checkbox(es) in a div or some other element, and then attach the event listener to the wrapper. When your page gets larger, checking all clicks on the document will be a time consuming operation. If you've only one checkbox, it's better to attach the handler to itself ofcourse.