получить parentNode нажатого элемента в простом JS

Question

Мне нужно получить parentNode элемента, по которому щелкают, в простом JS (без jQuery или других фреймворков) Я сейчас использую document.getElementById("item_click") но я хочу изменить id="item_click" на class="item_click", чтобы я мог использовать несколько ящиков. Я просто не знаю, как интегрировать this в скрипт

Вот скрипка <<< поиграй с ней </p>

HTML

<div class="item">
    <div  class="item-tester" >
        <div class="item-icon"></div>
        <div class="item-title">Item Title</div>
    </div>
    <div id="item_click" onmousedown="new_class(event)" onmouseup="revert_class(event)" onmouseout="revert_class(event)"></div>
</div>

JS

function new_class(event) {
    wClick = document.getElementById("item_click");
    wTile = wClick.parentNode;
    wTile.className = wTile.className + " added-class";
}
function revert_class(event) {
    wTile.className = "item";
}
​

Я хочу изменить

wClick = document.getElementById("item_click");
wTile = wClick.parentNode;

к чему-то вроде

wClick = this;
wTile = wClick.parentNode;

Я знаю, как это сделать в jQuery, но он не будет работать на простом JS, поскольку this будет window (я думаю)

КСТАТИ. Мне нужно (событие), так как это всего лишь сокращение всего кода, который я использую.

Answer 1

function new_class(event) {
    wTile = event.target.parentNode;
    wTile.className = wTile.className + " added-class";
}

Answer 2

«Я просто не знаю, как интегрировать this в сценарий»

Используйте .call(), чтобы вызвать обработчик, чтобы установить его значение this для элемента, который имеет обработчик ...

<div id="item_click" onmousedown="new_class.call(this,event)" ...>

---

function new_class(event) {
    var wTile = this.parentNode;
    wTile.className = wTile.className + " added-class";
}

Answer 3

Вы можете просто использовать event.target.parentNode ( Не нужно даже передавать event в функцию ):

function new_class() {
    var parent = event.target.parentNode;
    // Do whatever...
}