Hacker News Reader

Comment by peterangular | Hacker News Reader

Even as someone who's largely ripped out jQuery for vanilla JS I still totally understand why people use the API. Vanilla JS is terse comparative to jQuery short-hand syntax, especially for simple event bindings.

Sure, I think jQuery these days is largely legacy developer ergonomics... I admit there are parts of those ergonomics that I miss. Especially when comparing it to modern tool-heavy transpiled/compiled/whatever JS development which is way more opinionated than using a simple utility library.

View on HN

> Vanilla JS is terse comparative to jQuery short-hand syntax, especially for simple event bindings.

You mean "verbose" here, probably?

Ah yea you're right - I misspoke. Vanilla JS feels verbose, and jQuery feels more terse in regards to general syntax.

---

document.querySelector('#sel').addEventListener('click', (e) => {})

Feels way more verbose than the following:

$('#sel').on('click', (e) => {})

My bad - apparently the coffee hadn't sunk in yet ha.

OT note: sel.onclick=e=>{} works just fine. https://jsfiddle.net/39h5ynga/

But only if you (and any libs you use) only plan on adding 1 click handler to an element. That's why I always opt for the addEventListener/on style vs setting the onclick/ondblclick/etc handlers.

true but I would hope the libs use the event. (one onclick is still allowed in combination)

This approach seems the funniest: https://jsfiddle.net/eu60Lwv9/

It's even more verbose in a lot of common cases, actually. (Although the ? operator has made things better).

---

1. document.querySelectorAll(".sel").forEach((e) => e.addEventListener("click", (e) => {}))

$('.sel').on('click', (e) => {})

2. document.querySelector(".sel")?.addEventListener("click", (e) => {})

$('.sel').on('click', (e) => {})

3. const e = document.createElement("div") e.className = "cls" e.setAttribute("title", "Title") e.textContent = "<Content>"

const e = $('<div>').addClass("cls").attr("title", "Title").text("<Content>")

Reply on news.ycombinator.com