HTML事件处理详解-优快云博客

本文深入探讨了HTML事件处理，包括事件的基本概念、DOM0级和DOM2级事件处理程序的区别，以及如何使用JavaScript进行事件监听。

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理程序

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>HTML事件处理</title> 
 </head> 
 <body> 
  <div id="box"> 
   <input type="button" value="按钮" id="btn" onclick="alert('hello I am kamil')" /> 
   <input type="button" value="按钮2" id="btn2" onclick="showMessage()" /> 
   <input type="button" value="按钮3" id="btn3" /> 
   <input type="button" value="按钮4" id="btn4" /> 
  </div> 
  <script>
    function showMessage() {
        alert('hello I am kamil2');
    }
    var btn33 = document.getElementById('btn3');
    var btn44 = document.getElementById('btn4')
    btn33.onclick=function showMessage2() {
        alert('hello I am kamil3');
    }
    //btn33.onclick=null;
    btn44.addEventListener('click',showMessage,false);
    btn44.addEventListener('click',function () {
        alert(this.value);
    },false);
    //btn44.removeEventListener('click',showMessage,false)
</script>  
 </body>
</html>

在线调试 W3School

转载于:https://www.cnblogs.com/kamil/p/5432885.html