先看看一下我们不用DOM分配事件，事件直接绑定在html元素上

<div id="demo" onclick="test()">点击我</div>

<script>
    function test(){
        alert("点击我了")
    }
</script>

这样html代码和js代码混在一起，并不是非常好，我们可以通过DOM来分配事件，让html和js分离

使用DOM分配事件

• 首先找到某个DOM节点，然后设置他的事件

<div id="demo">点击我</div>


<script>
    document.getElementById("demo").onclick=function(){
       alert("通过DOM分配点击事件")
    }
</script>

可以看出，html和js完全分离了

常用事件

• onclick：点击事件

• onload：页面加载完成

• onunload: 页面关闭

• onmouseover：鼠标移入

• onmouseout：鼠标移出

• onmousedown：鼠标按下

• onmouseup：鼠标抬起

• onchange：当文本输入框内容改变，光标移出文本框或者回车时