How Google does this?

See the following image:

Now to submit the form they use a submit button which is normal way, but now the see the below image:

Even after removing the type="submit" from the search button the form still gets submits and Google search results page is opened, I mean how do they access such elements?

I thought they use querySelector to access elements but I was wrong.

You can compare that I have even changed the parent element tags.

I even tried to change the class attributes, and even jsaction attribute, but still it works!

[quote=“uscircuitpool, post:1, topic:300313, full:true”]
Even after removing the type="submit" from the search button the form still gets submits and Google search results page is opened, I mean how do they access such elements?[/quote]

That wouldn’t stop event handlers assigned to the input element from happening.

Using the inspector, I see that the Google button has both a click event and a keyup event assigned to it. There can also be other events captured by parent elements of the button too.

2 Likes

Thank you @Paul_Wilkins :blush:

But as you can see the second image that I have even changed the parent element tags, but still it tends to work, How does that work?

Any thoughts?

Events bubble up to parent elements, so any element events can be captured by monitoring what’s happens on the body.

1 Like

Yes you’re right, but I’ve changed the entire element i.e. tag itself but still how the event listener for that particular element works?

When someone clicks on an element, that click event bubbles up through all of the parents from that element, all the way up to the HTML element. Those other elements can capture the event too. Commonly it’s the <body> element that’s used in that manner.

1 Like

Considering this DOM tree:

<button> -> <div> -> <body> -> <html>

Now if I have understood you correctly then, if the button is clicked then event bubbles all up to HTML node right?!

NOTE: consider button node was added with onclick event listener

Then now if the <button> node is changed to span node something like this:

<span> -> <div> -> <body> -> <html>

Now if I click the span node even this time the event bubbles up to <html> node.

Now if I’m capturing event from <html> node then how do I get to know that <span> node was clicked because there can other event bubbles also right, from other elements as well.?

The event object has a target property that keeps track of where the event began.

For example, this code tells you where the event started, and from where it was captured.

var parent = document.querySelector("#outerparent");
parent.addEventListener("click", function (evt) {
  alert("Was clicked at " +  evt.target.id +
    " and was captured from " + this.id);
});
1 Like

Here’s an update with CSS that lets you click on different parts of it, to see how the target changes.

#outerparent, #innerchild, span { margin: 1em; padding: 1em; }
#outerparent { background: lightgreen;}
#innerchild { background: lightblue;}
span { background: pink; }
1 Like

Thank you for your time and patience! @Paul_Wilkins :blush:

So if I follow this mechanism where I just add event listeners for top most element only and using event property,

I identify on which element the action was performed and I won’t add event listeners for any particular (inner) element.

Would that be a good practice or I need to add event listener for both parent element as well as the inner element also?

If that isn’t a good practice then can you please guide me on how I can add same event listeners for multiple elements at once i.e. in this case the parent element and inner element?

// Something like this maybe
innerElement.onclick = outerElement.onclick = function sameFunctionForBothElements() {}

[quote=“uscircuitpool, post:10, topic:300313, full:true”]
Would that be a good practice or I need to add event listener for both parent element as well as the inner element also?[/quote]

Yes that is a good practice, though not at the top-most element for then things get rather busy. Instead of placing lots of event listeners on lots of elements, the best-practice technique is to reduce the number of listeners by placing it at the most relevant top level location.

In the case of Google, they’ve used the form for that location.

2 Likes

Got it! @Paul_Wilkins Thank you! :blush:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.