How do you use event.target outside addEventListner?

Question

I am trying to get the event target element outside of the click function. But this not working, I also want to remove event later.

function clicked() {
    let targetElement = clicked.target;
    function action() {
    //Some code here
      }
    }

document.addEventListner('click', clicked);

Answer 1

You did not spell addEventListner correctly.

You can either name the function or call one inside a named function, I also show where the attached point can make a difference.

 function clickAction(clickElement) { console.log("targetOne:", clickElement); //Some other code here } function clicked(event) { let targetElement = event.target; clickAction(targetElement); } function clickedMore(event) { let targetElement = event.target; // where it was attached: let attachedElement = event.currentTarget; console.log("target:", targetElement, "DelTarget:", attachedElement); } document.addEventListener('click', clicked); document.getElementById('me-more').addEventListener('click', clickedMore); 

 <div id="me1">Hi Me</div> <div id="me-more">Hi M outer <div class="my-thing">inner thing</div> <div class="my-thing">inner thing2</div> <div class="my-thing">inner thing 3</div> </div> 

Answer 2

If your goal is to set a variable and use it in another function, your main problem is using let . Do not use let , not const , not var , it's simple: Do not use anything! Just define your variable with myVariable = 'My text' .

Here is a way how you could pass a variable from one function to another:

 function clicked() { targetElement = 'I am the element of target'; } function clickedAgain() { console.log(targetElement); } document.querySelector('.btn1').addEventListener('click', clicked); document.querySelector('.btn2').addEventListener('click', clickedAgain); 

 <button class="btn1">Save the value</button> <button class="btn2">Rturn the value</button> 

Answer 3

The problem is that the event target exists on the parameter passed to the function, not as a property of the function. Try this code snippet.

function clicked(event) {
    let targetElement = event.target;
    function action() {
        //Some code here
    }
}

document.addEventListener('click', clicked);

There was also a spelling error in addEventListener

Answer 4

I can try to explain you about hoisting and difference between let and var . But here's an medium article that will give you deep dive in how javascript works.

You'll have clear understanding of how everything interacts and interpreted after reading this article.

You can use this code. As the element is passed as argument to the click function. Which you can pass it to other function as argument. Should work fine.

function clicked(e) { 
     let targetElement = e.target;
     someFunction(targetElement);
 } 

function someFunction(element) {
    //do what you want with element
}

document.addEventListener('click', clicked);

Hope this helps...

Answer 5

document.addEventListener('click', test)

function test(e){

        let target = event.target;
        console.log(target)

}

More Info Here: https://developer.mozilla.org/fr/docs/Web/API/Element/click_event