Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM - Remove Event Example</title>
</head>
<body>
  <div class="eventClass">
    <div id="add" class="addClass">add event </div>
    <div id="remove" class="removeClass">remove event</div>
    <div id="show" class="showClass">hi youngsik</div>
  </div>
</body>
</html>
 
.eventClass {
  position: absolute;
  top: 50px;
  left: 50px;
}
​
.addClass, .removeClass, .showClass {
  width: 100px;
  height: 30px;
}
 
window.onload = function () {
  var addclick = document.getElementById('add');
  var removeclick = document.getElementById('remove');
  
  if(addclick.addEventListener) {
    addclick.addEventListener('click', showChoice, false);
    removeclick.addEventListener('click', setRemove);
  } else {
    addclick.attachEvent('onclick', showChoice);
    removeclick.attachEvent('onclick', setRemove);
  }
  
  function showChoice() {
    document.getElementById('show').style.backgroundColor = 'green';
  }
  
  // 파라미터를 설정시때와 동일하게 설정한다. 
  function setRemove() {
    document.getElementById('show').style.backgroundColor = '';
    if(addclick.removeEventListener) {
      addclick.removeEventListener('click', showChoice, false);
    } else {
      addclick.detachEvent('onclick', showChoice);
    }
  }
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x