肉渣教程

DOM 事件

上一节 下一节
把鼠标放过来

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);

运行一下


DOM 事件

上一节 下一节