dom元素绑定事件的三种方式

DOM元素绑定事件的三种方式：

JavaScript与HTML之间的江湖是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间（例如：鼠标点击页面、复制文本等）。

• 事件属于对象的被动行为。
• 方法属于主动行为。

事件的绑定方式：普通方式、动态绑定方式、监听方式

常见的事件：

• 鼠标事件：mouseover（鼠标悬停）、mouseup(鼠标抬起）、 mousedown(按下) 、click(单击) 、dbclick双击事件、mouseleave（鼠标离开）、 mouseout（鼠标离开）、 mousemove（鼠标移动）、 mouseenter（鼠标进入）、 mousewheel（滚轮）
• 键盘事件：keypress keydown keyup
• 表单事件：focus（获焦）、 blur（失焦）、 submit（提交）、 change（文本发生变化）、 input(获取用户输入事件)
• 浏览器事件 ：scroll（滚动条）、load（加载完成）、error（加载失败）、 resize（窗口大小变化）、contentmenu(右键打开浏览器菜单)
• 剪贴版事件：cut（剪贴）、copy（复制）、 paster(粘贴)、selectstart （选择）

普通方式：

在元素标签内直接写事件+相应事件触发后的方法调用
需要注意，这里的事件前面需要加上“on”。

<button onclick="btnhandle()" onmouseenter="enterbtn()" onmouseleave = "leavebtn()">按钮</button>
<script>
 function btnhandle(){
   
            console.log(1);
        }
  function enterbtn(){
   
        console.log("鼠标进入");
         }
  function leavebtn(){
   
           console.log("鼠标离开");
        }
</script>

动态事件绑定：

动态事件绑定，需要先获取dom元素再绑定事件，获取dom元素可以参看原生js获取dom对象
动态事件绑定存在内存泄露，所以务必要注意回收。

 		var btn=document.getElementById(