DOM事件

阅读: 1243    发布时间: 2018-01-25 11:19:38

先看看一下我们不用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:当文本输入框内容改变,光标移出文本框或者回车时


-END-