Javascript DOM Change event

Description

Javascript DOM Change event

View in separate window 



  <!DOCTYPE html> 
  <html lang="en"> 
  <body> 
      <form action="" name="form1"> 
          <textarea rows="15" cols="40" name="textarea1"></textarea> 
          <textarea rows="15" cols="40" name="textarea2"></textarea> 
          <br /> 
          <input type="button" value="Clear event textarea" name="button1" /> 
      </form> 
      <script> 
          let myForm = document.form1; 
          let textArea1 = myForm.textarea1; 
          let textArea2 = myForm.textarea2; 
          let btnClear = myForm.button1; 

          function displayEvent(e) { 
              let message = textArea2.value; 
              message = message + e.type + "\n"; 
              textArea2.value = message; 
          } //w  ww  .ja v a2  s  . c o  m

          function clearEventLog(e) { 
              textArea2.value = ""; 
          } 

          textArea1.addEventListener("change", displayEvent); 
          textArea1.addEventListener("keydown", displayEvent); 
        textArea1.addEventListener("keypress", displayEvent); 
        textArea1.addEventListener("keyup", displayEvent); 
        btnClear.addEventListener("click", clearEventLog); 
    </script> 
</body> 
</html>



PreviousNext

Related