码迷,mamicode.com
首页 > 其他好文 > 详细

事件监听器

时间:2017-04-30 22:58:51      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:bsp   lis   resize   dom   指定元素   使用   logs   cap   rem   

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

 

事件监听器

标签:bsp   lis   resize   dom   指定元素   使用   logs   cap   rem   

原文地址:http://www.cnblogs.com/jiaoxuanwen/p/6790549.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!