JS——DOM事件

 

事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互。
事件三要素：

• 事件源：触发事件事件的元素。
• 事件类型：触发事件的操作。
• 事件处理函数：触发事件时的产生的改变。

一.事件的添加

1.HTML事件监听器：

<div onclick="fct()">鼠标单击此元素字体颜色为蓝色</div>
<script>
    let fct=function(){
        document.getElementByTagName("div")[0].style.color="blue";
    }
<script> 

• div元素中onclick属性定义事件类型（单击）。
• script元素中的代码为当事件触发是的处理函数。

2.DOM-0 级监听器：

<div>鼠标单击此元素字体颜色为蓝色</div>
<script>
    document.getElementByTagName("div")[0].onclick=function(){
        document.getElementByTagName("div")[0].style.color="blue";
    }
</script>

• DOM-0级绑定的事件是唯一的，如果发生重复绑定事件，编写在前面的将会被后面的覆盖。

3.DOM-2级事件监听器：

<div>鼠标单击此元素字体颜色为蓝色</div>
<script>
document.getElementByTagName("div")[0].addEventListenner("click",function(){
    document.getElementByTagName("div")[0].style.colo="blue";   
})
</script>

• DOM-2级事件监听器允许绑定多个事件，多个事件间互不影响。

2.事件的删除

• DOM-0级：在满足需要删除事件时让事件触发的执行函数等于空即可（节点.事件类型=null）
• DOM-2级：在满足删除条件时使用removeEvetListener（）方法即可。