DOM事件 - 示例

<input value="点击按钮，执行预设JavaScript语句" type="button" onclick="alert('反清复明');">

运行一下

常用事件：

• onmouseover事件 - 鼠标进入元素范围（运行一下）
• onmouseout事件 - 鼠标离开元素范围（运行一下）
• onmousedown事件 - 鼠标按键按下（运行一下）
• onmouseup事件 - 鼠标按键松开（运行一下）
• onload事件 - 加载完毕（运行一下）
• onfocus事件 - 选中事件（运行一下）
• onchange事件 - 元素内容发生改变（运行一下）
• onkeyup事件 - 在某元素中按键时，松开按键所触发的事件（运行一下）
• onkeydown事件 - 在某元素中按键时，按下按键所触发的事件（运行一下）

addEventListener() 方法

element.addEventListener(event, function, useCapture);

语法解析：event参数是指触发事件的类型，比如“click”等；function代表事件所触发的函数；useCapture是非必须的布尔型参数，默认取值false。（这个参数主要是决定事件触发的顺序，之后看具体的例子就懂了）

document.getElementById("demo").addEventListener( "click", 
function() { alert('反清复明'); } );

运行一下

将触发的函数独立声明：

document.getElementById("demo").addEventListener( "click", fan_qing_fu_ming );

function fan_qing_fu_ming() {
    alert('反清复明');
}

运行一下

使用到useCapture参数的示例。（去试试就明白了，主要看绑定事件的执行先后顺序）

运行一下

removeEventListener() 方法

removeEventListener()方法可以移除事件与触发函数之间的绑定关系。

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

运行一下