Extracting the id of an element from Event Listener e.path Array?

I’m trying to get my head around Event’s and I’m totally lost? I would like to access an elements id from an event listener, using e.path Array? The id that I want is always in the article id=”someID” node of the objTmp Array().

I also can figure out why this only works in Chrome all other browsers say that objTmp is undefined?

Any help would be appreciated…

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>

    <style type="text/css">
    </style>

    <script type="text/javascript">

        function init() {

            var eventTmp = document.querySelectorAll("ul li");
            for (var i = 0; i < eventTmp.length; i++) {
                eventTmp[i].addEventListener('click', function (e) {
                    var objTmp = e.path;
                    for (var i = 0; i < objTmp.length; i++) {
                        
                        if (objTmp[i].tagName === "ARTICLE") {
                            //This is where I get lost
                            //How do I get the id from this node??
                            var x = objTmp[i];
                            console.log(x);
                        }
                    }
                    e.stopPropagation();
                }, false);

            }
        }

    </script>
</head>
<body onload="init()">
    <main id="">
        <article id="id_Article0">
            <section>
                <h2>Header</h2>
                <div>
                    <ul>
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                    </ul>
                </div>
            </section>
        </article>
        <article id="id_Article1">
            <section>
                <h2>Header</h2>
                <div>
                    <p>
                        <h3>Some Text</h3>
                        <ul>
                            <li>Link 1</li>
                            <li>Link 2</li>
                            <li>Link 3</li>
                        </ul>
                    </p>
                </div>
            </section>
        </article>
    </main>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>
​
    <style type="text/css">
    </style>
​
    <script type="text/javascript">
​
        function init() {
​
            var eventTmp = document.querySelectorAll("ul li");
            for (var i = 0; i < eventTmp.length; i++) {
                eventTmp[i].addEventListener('click', function (e) {
                    var objTmp = e.path;
                    for (var i = 0; i < objTmp.length; i++) {
                        
                        if (objTmp[i].tagName === "ARTICLE") {
                            //This is where I get lost
                            //How do I get the id from this node??
                            var x = objTmp[i];
                            console.log(x);
                        }
                    }
                    e.stopPropagation();
                }, false);
​
            }
        }
​
    </script>
</head>
<body onload="init()">
    <main id="">
        <article id="id_Article0">
            <section>
                <h2>Header</h2>
                <div>
                    <ul>
                        <li>Link 1</li>
                        <li>Link 2</li>
                        <li>Link 3</li>
                    </ul>
                </div>
            </section>
        </article>
        <article id="id_Article1">
            <section>
                <h2>Header</h2>
                <div>
                    <p>
                        <h3>Some Text</h3>
                        <ul>
                            <li>Link 1</li>
                            <li>Link 2</li>
                            <li>Link 3</li>
                        </ul>
                    </p>
                </div>
            </section>
        </article>
    </main>
</body>
</html>

Answer

Here’s a way to locate the ancestor ARTICLE node without using event.path:

function init() {

    var eventTmp = document.querySelectorAll("ul li");
    for (var i = 0; i < eventTmp.length; i++) {
        eventTmp[i].addEventListener('click', function (e) {
          var articleNode = this;
          while (articleNode.nodeName != "ARTICLE" && articleNode.nodeName != "BODY") {
            articleNode = articleNode.parentNode;
          }
          if (articleNode.nodeName == "BODY") {
            // no article ancestor was found
          } else {
            // do something with articleNode
            console.log(articleNode.id);
          }

          e.stopPropagation();
        }, false);
    }
}

JavaScript
 
function init() {
​
    var eventTmp = document.querySelectorAll("ul li");
    for (var i = 0; i < eventTmp.length; i++) {
        eventTmp[i].addEventListener('click', function (e) {
          var articleNode = this;
          while (articleNode.nodeName != "ARTICLE" && articleNode.nodeName != "BODY") {
            articleNode = articleNode.parentNode;
          }
          if (articleNode.nodeName == "BODY") {
            // no article ancestor was found
          } else {
            // do something with articleNode
            console.log(articleNode.id);
          }
​
          e.stopPropagation();
        }, false);
    }
}
​

Advertisement

Answer