Develop Reference

event.path is undefined running in Firefox

When I run event.path[n].id in Firefox, I get this error. It works in other browsers.
event.path undefined

The path property of Event objects is non-standard. The standard equivalent is the composedPath method. But it was new when the question was asked (2016); it's well-established as of this update in January 2023.
So you may want to try composedPath and fall back to path (or just use composedPath now it's established):
// Written in ES5 for compatibility with browsers that weren't obsolete
// yet when the question was posted, although they are now
var path = event.composedPath ? event.composedPath() : event.path;
if (path) {
// You got some path information
} else {
// This browser doesn't supply path information
}
Obviously that won't give you path information if the browser doesn't supply it, but it allows for both the old way and the new, standard way, and so will do its best cross-browser.
Example:
// Written in ES5 for compatibility with browsers that weren't obsolete
// yet when the question was posted, although they are now
document.getElementById("target").addEventListener("click", function (e) {
// Just for demonstration purposes
if (e.path) {
if (e.composedPath) {
console.log("Supports `path` and `composedPath`");
} else {
console.log("Supports `path` but not `composedPath`");
}
} else if (e.composedPath) {
console.log("Supports `composedPath` (but not `path`)");
} else {
console.log("Supports neither `path` nor `composedPath`");
}
// Per the above, get the path if we can, first using the standard
// method if possible, falling back to non-standard `path`
var path = event.composedPath ? event.composedPath() : event.path;
// Show it if we got it
if (path) {
console.log("Path (" + path.length + ")");
Array.prototype.forEach.call(path, function(entry) {
console.log(entry === window ? "window" : entry.nodeName);
});
}
});
.as-console-wrapper {
max-height: 100% !important;
}
<div id="target">Click me</div>
According to MDN, all major browsers support composedPath as of January 2023. Chrome (and other Chromium-based browsers) supported both path (it was a Chrome innovation) and composedPath until v109 when path was removed. (The obsolete browsers IE11 and Legacy Edge [Microsoft Edge prior to v79 when it became a Chromium-based browser] didn't support either of them.)
If you ran into a browser that doesn't support either of them, I don't think you can get the path information as of when the event was triggered. You can get the path via e.target.parentNode and each subsequent parentNode, which is usually the same, but of course the point of composedPath is that it's not always the same (if something modifies the DOM after the event was triggered but before your handler got called).

You can create your own composedPath function if it's not implemented in the browser:
function composedPath (el) {
var path = [];
while (el) {
path.push(el);
if (el.tagName === 'HTML') {
path.push(document);
path.push(window);
return path;
}
el = el.parentElement;
}
}
The returned value is equivalent to event.path of Google Chrome.
Example:
document.getElementById('target').addEventListener('click', function(event) {
var path = event.path || (event.composedPath && event.composedPath()) || composedPath(event.target);
});

This function serves as a polyfill for Event.composedPath() or Event.Path
function eventPath(evt) {
var path = (evt.composedPath && evt.composedPath()) || evt.path,
target = evt.target;
if (path != null) {
// Safari doesn't include Window, but it should.
return (path.indexOf(window) < 0) ? path.concat(window) : path;
}
if (target === window) {
return [window];
}
function getParents(node, memo) {
memo = memo || [];
var parentNode = node.parentNode;
if (!parentNode) {
return memo;
}
else {
return getParents(parentNode, memo.concat(parentNode));
}
}
return [target].concat(getParents(target), window);
}

Use composePath() and use a polyfill for IE:
https://gist.github.com/rockinghelvetica/00b9f7b5c97a16d3de75ba99192ff05c
include above file or paste code:
// Event.composedPath
(function(e, d, w) {
if(!e.composedPath) {
e.composedPath = function() {
if (this.path) {
return this.path;
}
var target = this.target;
this.path = [];
while (target.parentNode !== null) {
this.path.push(target);
target = target.parentNode;
}
this.path.push(d, w);
return this.path;
}
}
})(Event.prototype, document, window);
and then use:
var path = event.path || (event.composedPath && event.composedPath());

I had the same issue. I need the name of the HTML element. In Chrome I get the name with path. In Firefox I tried with composedPath, but it returns a different value.
For solving my problem, I used e.target.nodeName. With target function you can retrieve the HTML element in Chrome, Firefox and Safari.
This is my function in Vue.js:
selectFile(e) {
this.nodeNameClicked = e.target.nodeName
if (this.nodeNameClicked === 'FORM' || this.nodeNameClicked === 'INPUT' || this.nodeNameClicked === 'SPAN') {
this.$refs.singlefile.click()
}
}

Strange setAttribute behavior in IE8 after Object extend

I have the following code that I'm using to create a micro-library of sorts (similar to JQuery, but with only the stuff I need).
window.$ = function(selector, context, undefined)
{
var getSelectorTest = function(selector, context, undefined)
{
var el;
var selector_key = selector.slice(0, 1),
matches = {
'#': 'getElementById',
'.': 'getElementsByClassName',
'#': 'getElementsByName',
'=': 'getElementsByTagName',
'*': 'querySelectorAll'
}[selector_key],
selector_value = selector.slice(1);
//add fallback for getElementsByClassName is not supported e.g. IE8
if(matches === 'getElementsByClassName' && !document.getElementsByClassName)
{
matches = 'querySelectorAll';
selector_value = selector;
}
// now pass the selector without the key/first character
el = (((context === undefined) ? document: context)[matches](selector_value));
return el;
};
var elem = getSelectorTest(selector, context, undefined);
//Extend elem before returning it
elem.attr = function(name, value) {
if(value)
{
this.setAttribute(name, value);
return this;
}
else
{
return this.getAttribute(name);
}
return elem;
};
Then when I run the following code:
<script>
domReady(function(){ //https://github.com/cms/domready
var el_1 = $('#container-1');
el_1.attr("data-test", "random_value");
});
</script>
I get the following when using IE8:
<div id="container-1" attr="function(name, value) {
if(value)
{
this.setAttribute(name, value);
return this;
}
else
{
return this.getAttribute(name);
}
}" data-test="random_value">
Of course, this isn't the case when I use Chrome and Firefox (I get the output as expected i.e. <div id="container-1" data-test="random_value">). How can I fix this?
Note: I'm using 'HTML' tab of the IE8 Developer Tools (F12) to verify this.

Instead of attaching the attr() function to the selected element (which IE8 apparently interprets as setting an attribute on the element itself) you might have better luck attaching it to the prototype of the Element object.
Element.prototype.attr = function(name,value){ ...

What does $('#id').html(x) do differently to el.innerHTML = x

I'm storing stuff in javascript/DOM and submitting an ajax call. In the success and/or .done function when I do:
$('#results').html(data);
The javascript/DOM model becomes corrupted but when I do:
var el = document.getElementById('results');
el.innerHTML = data;
then everything works as expected. I know there isn't much information here but my question is what else is the jQuery html() doing apart from setting the innerHTML that may be effecting the state of the page.

The main reason to use the html function with a string rather than innerHTML is to prevent memory leaks or inconsistent in memory data : this function removes event handlers or other jQuery data linked to the removed elements.
If data is a string, there is no reason for $('#results').html(data); to "corrupt" your DOM more than by using innerHTML.

In Internet Explorer 9 and earlier tables in the DOM were read-only. That meant that trying to do el.innerHTML = newHTML; would result in an error being thrown if el was a TBODY, TR, etc. The jQuery .html() function handles that case for you by using a fallback method - this.empty().append(value) in the jQuery source - allowing you to use the same code for all of the browsers, regardless of version.
It may be worth taking a look at the code for the method in the jQuery source:
html : function (value) {
return jQuery.access(this, function (value) {
var elem = this[0] || {},
i = 0,
l = this.length;
if (value === undefined) {
return elem.nodeType === 1 ?
elem.innerHTML.replace(rinlinejQuery, "") :
undefined;
}
// See if we can take a shortcut and just use innerHTML
if (typeof value === "string" && !rnoInnerhtml.test(value) &&
(jQuery.support.htmlSerialize || !rnoshimcache.test(value)) &&
(jQuery.support.leadingWhitespace || !rleadingWhitespace.test(value)) &&
!wrapMap[(rtagName.exec(value) || ["", ""])[1].toLowerCase()]) {
value = value.replace(rxhtmlTag, "<$1></$2>");
try {
for (; i < l; i++) {
// Remove element nodes and prevent memory leaks
elem = this[i] || {};
if (elem.nodeType === 1) {
jQuery.cleanData(getAll(elem, false));
elem.innerHTML = value;
}
}
elem = 0;
// If using innerHTML throws an exception, use the fallback method
} catch (e) {}
}
if (elem) {
this.empty().append(value);
}
}, null, value, arguments.length);
}

how to create a function to set or get style property value?

i write a function want to set or get style property value:
function $(ID){return document.getElementById(ID);}
Object.prototype.css=function(style,value){
if(value==undefined){
return eval("this.style."+style);
}
else{
if(isNaN(value)){
return eval("this.style."+style+"=\""+value+"\"");
}
else{
return eval("this.style."+style+"="+value);
}
}
}
function ad(){
$("ad_ol").css("top","-170px");
}
it can work well in FireFox 、 Chrome and IE9,but not work in IE7 and IE8,error message is:Object does not support the "css" property or method
who can help me? is the "this" problem? is have better function can do this?

No need for eval, and there are other flaws in you code.
Try using something like:
function css(prop,value){
value = value || '';
if(prop) {
this.style[prop] = value;
return this.style[prop];
}
return true;
}
function $(ID){
var element = document.getElementById(ID || 'nodId');
if(element) {
element.css = css; // create css method for this element
}
return element; // Note: element is null if no ID was provided
}
$("ad_ol").css("top","-170px"); //=> should work now

get computed background color as rgb in IE

I am trying to get the RGB background color in IE using the following code:
function getStyle(elem, name) {
// J/S Pro Techniques p136
if (elem.style[name]) {
return elem.style[name];
} else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
} else {
return null;
}
}
var $b = $("<button>");
$b.css("backgroundColor", "ButtonFace");
$("body").append($b);
alert("button bg color is: "+ getStyle($b[0],"backgroundColor"));
//alerts 'buttonface'
this does not return an rgb color value like firefox does, it returns 'buttonface' which is useless to me.

I have been working on a cross-browser implementation of a "getStyle" function,
my function isn't complete yet but I can help you to solve this specific problem you have with IE.
For the computed backgroundColor, I'm using a hack proposed in this page, it uses the IE specific queryCommandValue method to get the BackColor of a selection.
About the implementation you post, I would recommend to check first if the standard getComputedStyle method via the document.defaultView exists, because some browsers like Opera, provide the IE specific currentStyle object for compatibility.
So I've refactored your function and included the IE hack:
function getStyle(elem, name) {
if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
} else if (elem.currentStyle) {
if (/backgroundcolor/i.test(name)) {
return (function (el) { // get a rgb based color on IE
var oRG=document.body.createTextRange();
oRG.moveToElementText(el);
var iClr=oRG.queryCommandValue("BackColor");
return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
((iClr & 0xFF0000)>>16)+")";
})(elem);
}
return elem.currentStyle[name];
} else if (elem.style[name]) {
return elem.style[name];
} else {
return null;
}
}
Hopefully soon I'll post a more generic implementation, but this will be enough to solve your backgorundColor issue.
You can test the above function here.