事件监听器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件监听器相关的知识,希望对你有一定的参考价值。

addEventListener()方法

  • 用于向指定元素添加事件句柄。
  • 添加的事件句柄不会覆盖已存在的事件句柄
  • 可以向一个元素添加多个事件句柄
  • 可以向同个元素添加多个同类型的事件句柄,如:两个"click"事件
  • 可以向任何DOM对象添加事件监听,不仅仅是html元素。如:window对象
  • 可以更简单的控制事件(冒泡与捕获)

 

语法

element.addEventListener(event, function, useCapture);
  • 第一个参数是事件的类型 (如 "click" 或 "mousedown").
  • 第二个参数是事件触发后调用的函数。
  • 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:event参数不加"on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

 

向同一个元素添加多个事件句柄

function fun_1(){
    console.log("listener_1");
}

function fun_2(){
    console.log("listener_2");
}

window.onload = function(){
    div = document.getElementsByTagName("div")[0];

    div.addEventListener("mouseover", fun_1);
    div.addEventListener("click", fun_2);
}

 

向window对象添加事件句柄

function fun_1(){
    console.log("resize");
}

window.addEventListener("resize", fun_1);

 

removeEventListener()    移除由addEventListener()方法添加的事件句柄

element.removeEventListener("mousemove", myFunction);

 

以上是关于事件监听器的主要内容,如果未能解决你的问题,请参考以下文章

将数据从片段发送到活动,无需任何事件处理或侦听器

JavaFX窗口拖动

c# 获取移动硬盘信息监听移动设备的弹出与插入事件

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

如何在滚动视图中设置谷歌地图片段

为啥 jQuery 选择事件侦听器会触发多次?