자바 스크립트 이벤트 호출에 변수를 추가 하시겠습니까?

Question

그렇게 같은 것을 할 수있는 경우에는 내가 궁금 :

HTML

<div id="myspace" class="thing"></div> 
<div id="mytable" class="thing"></div> 

에게 JS

document.getElementById('my'+this).on('click', function(){ 
    document.getElementById(this).innerHTML = 'Chosen'; 
}); 

을

논리는 두 개의 상자가 있다는 것을 먼저 존재입니다 myspace이고, 두 번째는 mytable이다. 상자 중 하나를 클릭하면 해당 상자의 innerHTML에 "Chosen"이 표시됩니다.

기본적으로 여러 번의 클릭 이벤트 및/또는 if 문을 작성하지 않아도되는지 알고 싶습니다.

JSFiddle https://jsfiddle.net/7cLu9uah/

Answer 1

위임 된 이벤트 처리에서는 상위에 공통 이벤트 처리기를 연결 한 다음 클릭 한 핸들러에서 클릭 한 항목을 조작하여이 작업을 수행 할 수 있습니다. 또한

---

document.getElementById("container").addEventListener('click', function(e) { 
 
    e.target.innerHTML = 'Chosen'; 
 
});

.thing {width: 100px; height: 20px; background:red; margin: 10px;}

<div id="container"> 
 
<div id="myspace" class="thing"></div> 
 
<div id="mytable" class="thing"></div> 
 
</div>

, 당신의 코드에서, 당신은 DOM 요소에 .on()하고있었습니다. 그건 작동하지 않습니다. 아마도 당신은 .on() 메서드를 가지고 jQuery와 일반 자바 스크립트를 혼동했다.

그리고 document.getElementById()은 찾으려고하는 요소의 ID와 일치해야하는 문자열을 사용합니다. 귀하의 코드 ocument.getElementById('my'+this)은 (는) 적절한 사용법이 아닙니다.이 같은

---

DOM 조작은 jQuery 라이브러리를 사용하여 종종 간단 당신은 .on() 일부 jQuery를 구문을 사용하려고 시도하는 것 같다. 다음은 jQuery를에서 할 수있는 작업은 다음과 같습니다

$(".thing").on("click", function() { 
 
    this.innerHTML = "chosen"; 
 
})

.thing {width: 100px; height: 20px; background:red; margin: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myspace" class="thing"></div> 
 
<div id="mytable" class="thing"></div>

그것은 당신이하려는 일을하는 것이 가능

Answer 2

여기에 여러 문제가 있습니다

1. DOM 요소가 더 on 기능이 없습니다. jQuery 및 일부 다른 라이브러리에는 on 함수가 있지만 DOM에는 없습니다. getElementById은 DOM 요소를 반환합니다.

   는

2. 이 줄은 ID로 this를 사용하려고 :

   document.getElementById(this).innerHTML = 'Chosen'; 
   

   당신이 libs와의 압도적 인 다수에 사용하려는 어떤 on 모르고 말을하는 것은 불가능하지만,에 그런 식으로 연결된 이벤트 핸들러 this은 요소을 나타내며 ID는 참조하지 않습니다. 그래서 :

   this.innerHTML = 'Chosen'; 
   

Answer 3

는 클래스 선택 사용할 수 있습니다 : 당신이 thing 클래스 이름을 가진 여러 요소가 있고 당신이 그들에 클릭 핸들러를 첨부하지 않을 경우

function clickHandler(e) { 
    // `this` keyword refers to the clicked element 
    this.textContent = 'chosen'; 
} 

[].forEach.call(document.querySelectorAll('.thing'), function(el) { 
    el.addEventListener('click', clickHandler); 
}); 

을 선택기를 '#mytable, #myspace'으로 변경할 수 있습니다.