DOM 事件基本应用

事件

• 事件：在什么时候做什么事
• 执行机制：触发–响应机制
• 绑定事件(注册事件)三要素：
  1. 事件源：给谁绑定事件
  2. 事件类型：绑定什么类型的事件，例如click 单击
  3. 事件函数：事件发生后执行什么内容，写在函数内部

事件监听

• JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数

常用事件监听方法

• 方法1：绑定 HTML 元素属性。
  <input type="button" value="点击有惊喜" id="btn" onclick="alert('点我做什么？')">
• 方法2：绑定 DOM 对象属性

<input type="button" value="点击有惊喜" id="btn">
<script>
    //获取元素
    var btn = document.getElementById("btn");
    //绑定事件
    btn.onclick = function () {
        //定义事件被触发后要做的事
        alert("点我干嘛");
    };
</script>

常用的鼠标事件类型

• onclick 鼠标左键单击触发
• ondbclick 鼠标左键双击触发
• onmousedown 鼠标按键按下触发，但没松开鼠标
• onmouseup 鼠标按键放开时触发
• onmousemove 鼠标在元素上移动触发
• onmouseover 鼠标移动到元素上触发
• onmouseout 鼠标移出元素边界触发

DOM0 级事件

在W3C确定DOM版本时，之前已经存在的事件。以上的绑定方式就属于DOM0级事件。

• 只能绑定一次事件。绑定多次，后面的会覆盖前面的

解除绑定事件

btn.onclick = null;