Equivalent of jQuery code in Javascript

Question

This is the jQuery code I have

$('p').click(function(){
    alert("click successful!");
});

This is the JS code I could come up with

window.onload = function() {
    var para = document.getElementsByTagName('p');
    for(var i = 0; i < para.length; i++) {
        para[i].addEventListener('click',function(){
            alert("click successful!");
        });
    }
}

The Javascript code is too bulky, is there a way where I can select a tag by its name and write the code as -

"If any 'p' tag is clicked, alert('click successful')"

instead of looping through all the <p></p> tags? Any alternative way using tag name?

Do the paragraphs already exist or are they being dynamically added? — ZeroBased_IX, Oct 25 '15 at 14:09
Why you are want to do it without jQuery if pure JS is too bulky for you? =) — Vlad DX, Oct 25 '15 at 14:12
"The Javascript code is too bulky" — It's shorter than the jQuery code (which is the code you provided, plus the parts of the jQuery library which do the loop that your non-jQuery code does, plus the parts of the jQuery library that you aren't using). — Quentin, Oct 25 '15 at 14:15
@Quentin, yes I'm aware of that. When I said bulky, it wasn't in terms of what you said, it was just the lines of code I had to write for JS. — Siddharth Thevaril, Oct 25 '15 at 14:16
My point was that people write helper libraries like jQuery for a reason. If you don't want to do things the long way, then the best way to deal with that is usually to use code written by someone else. — Quentin, Oct 25 '15 at 14:18
The reason I posted this question was to understand how jQuery selectors worked. For eg. $('p'). I wanted to know if the underlying mechanism looped through every 'p' tag or if there's regex involved. I googled to find out how jQuery selectors actually selected elements but couldn't find much — Siddharth Thevaril, Oct 25 '15 at 14:20
@Sidsec9 In that case, look up [Sizzle](http://sizzlejs.com/) - iirc that's what jQuery uses under the hood for selectors. — Niet the Dark Absol, Oct 25 '15 at 14:21
The answer to this is question is simply *"no"*, there's no way to iterate over a nodeList without iterating. Best case, this question belongs on code-review, voting to close. — adeneo, Oct 25 '15 at 14:30

score 7 · Answer 1 · answered Oct 25 '15 at 14:13

7

You can use event delegation - add a click handler to a higher level element and check event.target

document.body.addEventListener("click", function(e) {
    if (e.target.tagName.toLowerCase() == "p") alert("click succeeded");
});

Demo: http://jsfiddle.net/jdkr3sch/

answered Oct 25 '15 at 14:13

Dennis

32,200
11
64
79

2

This doesn't work. Or rather, it only works if there is nothing but text in the paragraph. As soon as you add any element, even an innocent ``, clicking on that child element won't trigger the alert. – Niet the Dark Absol Oct 25 '15 at 14:17
As a side note, `nodeName` is usually a better choice http://stackoverflow.com/questions/4878484/difference-between-tagname-and-nodename And ya, you should check for any ascendant node or node itself being a P element – A. Wolff Oct 25 '15 at 14:17
@NiettheDarkAbsol It's wrong to say "this doesn't work" but that is a noteworthy caveat. Once you add in the check for descendants you're back to the bulk that OP wanted to avoid though. – Dennis Oct 26 '15 at 03:57

Niet the Dark Absol · Answer 2 · 2015-10-25T14:27:07.920

3

jQuery is "less code" because you're calling a pre-written function. Don't want to use jQuery? Then write your own functions.

function addEventToElements(tagname,handler) {
    var elems = document.getElementsByTagName(tagname);
    for(var i = 0, l = elems.length; i<l; i++) {
        elems[i].addEventListener('click',handler);
    }
}

Now in your actual code, you can just write:

addEventToElements('p',function() {alert("click succeeded");});

Congratulations, you have re-invented jQuery.

... Or not, because the reason jQuery is so popular is that it does a lot more. Things like normalising browser support (for those that use attachEvent or the old onEventName handlers) are half the reason jQuery exists, and you'd have to account for all of them in your own re-invention ;)

edited Oct 25 '15 at 14:27

answered Oct 25 '15 at 14:18

Niet the Dark Absol

320,036
81
464
592

If we want to be really pedantic, this still missing some support for browsers which don't support `addEventListener()` method, so no, this isn't equivalent to jQuery method :) – A. Wolff Oct 25 '15 at 14:22
@A.Wolff What about jQuery 2.0 then? :p – Niet the Dark Absol Oct 25 '15 at 14:23
Ok then... But you could mention it in answer itself maybe – A. Wolff Oct 25 '15 at 14:25
1

@A.Wolff There we go, added a note ^^ – Niet the Dark Absol Oct 25 '15 at 14:27

Mitya · Answer 3 · 2015-10-25T14:29:51.303

Here's a shorter way.

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(evt) {
        if (evt.target.matches('p, p *')) alert('Paragraph clicked!');
    }, false);
}, false);

Notes:

1) This has the advantage of event delegation, which is something I'd suggest looking into. In a nutshell, means you bind the event once, not N times, and then interrogate which element fired it when it fires, i.e. in the callback, not at the point of declaring the event as you are currently.

2) For waiting to use elements, use the DOMContentLoaded event rather than window.onload - the former is (loosely) analogous to jQuery's DOM ready handler.

3) matches() is a relatively modern method and won't work in ancient browsers, or may need a vendor-prefixed version - http://caniuse.com/#feat=matchesselector

This is functionally identical to Dennis' answer, and suffers the same problem. `
Can't touch this.
` — Niet the Dark Absol, Oct 25 '15 at 14:20

maioman · Answer 4 · 2015-10-25T14:40:51.213

for selecting:

document.querySelectorAll('p')

(also for more than one element p ).

AFAIK this is the closest thing to $('p')

addEventListener('click',function(){alert("click successful!")}

to add click handler to single element.

to simulate an array you can use the [].slice.call on the dom element collection (in this way you use .forEach() method) .

all together:

[].slice.call(document.querySelectorAll('p')).
forEach(function(x){x.addEventListener('click',
    function(){alert("click successful!")
})})

https://jsfiddle.net/maio/m861hbmh/

Equivalent of jQuery code in Javascript

4 Answers4