Simplest way to get parent div for actionEvent handling?

event capturing
addeventlistener
how to stop event bubbling in javascript
jquery on
how to stop event capturing in javascript
event propagation
dom events
javascript events

Im making a button 2d matrix in the format:

<table id="board">
        <tr class="row 0">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 1">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 2">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
</table>

I wanted to make one function when a user clicks on the buttons. My idea was to get the row and the column from the button that is pressed but Im not sure how to do that. In my js script I wanted to do something like:

document.querySelector('button').onclick = move("insert button row", "insert button column");

I would like any ideas on how to find the parent div or something capable of accomplishing this task.

You need to loop over all the buttons. And you have to assign a function to onclick, not call the function. Inside that function, you can use this to refer to the button that was clicked, parentElement to get the containing element, and rowIndex and cellIndex to get their positions in the table.

document.querySelectorAll('button').forEach(function(b) {
    b.addEventListener('click', function() {
        var col = this.parentElement.cellIndex;
        var row = this.parentElement.parentElement.rowIndex;
        move(row, col);
    });
});

Bubbling and capturing, The bubbling principle is simple. A handler on a parent element can always get the details about where it actually happened. triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way. As the parent is not absolutely positioned, it will appear in the default top left position. The child however still has it’s absolute positioning set to the top right, so it is positioned relative to the next parent div that has position:absolute; or position: relative. In this case, the next parent container div is the grandparent. The HTML

You can use parentNode to get the parent element of a particular element.

See example below.

document.querySelectorAll('button').forEach(function (e) {
  e.onclick = function () {
    console.log(`This is ${e.nodeName}`);
    console.log(`My dad is ${e.parentNode.nodeName}`);
    console.log(`My grandpa is ${e.parentNode.parentNode.nodeName}`);
  }
});
<table id="board">
        <tr class="row 0">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 1">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
        </tr>
        <tr class="row 2">
            <td class="col 0"><button></button><td>
            <td class="col 1"><button></button><td>
            <td class="col 2"><button></button><td>
  </tr>
</table>

Events, Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. the selector, now or in the future, based on a specific set of root elements. data passed to an event method when the current executing handler is bound. The element where the currently-called jQuery event handler was attached. AWT ActionEvent Class - This class is defined in java.awt.event package. The ActionEvent is generated when button is clicked or the item of a list is double clicked.

You can try to add the event listener to the tr element and then access the target and currentTarget's parent

for (var trEL of document.querySelectorAll('tr')) {
  trEl.addEventListener('click', event => {
  if (event.target.tagName === 'button') {
    move(event.target.parentNode, event.currentTarget)
  }
 });
}

Introduction to Event Listeners (The Java™ Tutorials > Creating a , How to Write a Container Listener If you have read any of the component how- to pages, you probably already know the basics of event listeners. Let us look at one of the simplest event handling examples possible. The Beeper class implements the ActionListener interface, which contains one method: actionPerformed . In your example, you can't: the 5px margin is added to the bounding box of div#two and div#three effectively making their width and height 100% of parent + 5px, which will overflow. You can use padding on the parent Element to ensure there's 5px of space inside its border:

Below is one approach you could take.

The benefit of using closest() is you don’t have to worry about changing the markup in the future. I would also recommend using addEventListener() instead of onclick since you may inadvertently override another click event with onclick since it is in the global scope (see Why is using onClick() in HTML a bad practice?).

NOTE: closest() requires a polyfill in IE 11- (https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill)

const buttons = document.querySelectorAll("button");

buttons.forEach(el => {
  el.addEventListener("click", evt => {
    let button = evt.target;
    console.log({
      row: button.closest("tr").classList[1],
      columns: button.closest("td").classList[1]
    });
  });
});
button {
  display: block;
  height: 20px;
  width: 20px;
}

button:hover,
button:focus,
button:active {
  background-color: blue;
  cursor: pointer;
}
<table id="board">
  <tr class="row 0">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
  <tr class="row 1">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
  <tr class="row 2">
    <td class="col 0"><button></button><td>
    <td class="col 1"><button></button><td>
    <td class="col 2"><button></button><td>
  </tr>
</table>

Stimulus Reference: Actions, Actions are how you handle DOM events in your controllers. <div data-controller= "gallery"> <button data-action="click->gallery#next">…</button> </div> An action method is the method in a controller which serves as an action's event listener. You may want access to the event for a number of reasons, including: to read� Note: To invoke an ActionEvent on a Button using the keyboard, use the Space bar. The object that implements the ActionListener interface gets this ActionEvent when the event occurs. The listener is therefore spared the details of processing individual mouse movements and mouse clicks, and can instead process a "meaningful" (semantic) event

jQuery way (Needs JS lib inserted on page):

$('button').on('click', () => {
    this.parentNode.parentNode; //Retrieves TR tag of the individual button
    move("insert button row", "insert button column");
});

Non-jQuery Way:

document.querySelectorAll('button').forEach((e) => {
    console.dir(e); //Reads out of all properties and methods of element in console
  //Inserts click event listener logic if you please
  e.parentNode.parentNode; //Retrieves the TR tag of the button
    move("insert button row", "insert button column");
});

Event Bubbling, There are two ways of event propagation in DOM i.e. Event Capturing and Let's just take a simple analogy, you might have played with bubbles in your <div class="grandParent"> C <div class="parent"> B <div� public class ActionEvent extends Event An Event representing some type of action. This event type is widely used to represent a variety of things, such as when a Button has been fired, when a KeyFrame has finished, and other such usages.

Java Events and How They Work With Event Listeners, The relevant listener will have implemented code that determines the action to ActionEvent: Represents a graphical element is clicked, such as a button or item in a list. to the GUI's container itself, for example, if a user adds or removes an Example Java Code For Building a Simple GUI Application. Event bubbling makes sure that an event that is triggered for some DOM element (target element), it will be triggered for all the parent elements of that target as well, in an outward direction i.e. the target first then it’s immediate parent and then it’s grand parent and so on. Explaining it through example. So, in JavaScript, events

FXML and Controllers, A Simple FXML document outlining an AnchorPane containing a button and a label node: ActionEvent; import javafx.fxml. Since the root element of the FXML file defined a fx:controller attribute, the FXMLLoader creates a new instance of the These event handlers invoke the specified method in the controller class. The ActionEvent is generated when button is clicked or the item of a list is double-clicked. Class Declaration. Following is the declaration for java.awt.event.ActionEvent class − public class ActionEvent extends AWTEvent Field. Following are the fields for java.awt.event.ActionEvent class −

3 Ways to Communicate Between Components in Blazor, One of the most common questions I get asked, or I see asked, is what is When the button is clicked the parent components method is invoked with the Tab Component --> <div @onclick="SetSelectedTab">@Title @(TabContainer. We' ve looked at 3 different ways to handle communication between� Angular apps are built as a hierarchy of components. When you build applications you will need to communicate between components, while services are a good way to share data between components, there are specific methods to carry out parent-child component communication.

Comments
  • Are you using jquery at all?
  • No, never used that before.
  • @Matthew sir may i send him syntax..May this will help him a lot as he is learning himself
  • I suggest learning about it. I'll provide a jQuery way of doing it as well as using non-jQuery.
  • Possible duplicate — Finding closest element without jQuery