码迷,mamicode.com
首页 > 编程语言 > 详细

【javascript】addEventListener事件方法

时间:2017-12-13 14:56:29      阅读:802      评论:0      收藏:0      [点我收藏+]

标签:width   function   listener   ble   参数   cli   rem   实例   text   

addEventListener事件方法

一、事件函数调用语法:

element.addEventListener(event, function, useCapture)

 

参数  描述
event

必须。字符串,指定事件名。


注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 

function 必须。指定要事件触发时执行的函数。 

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

可能值:
  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

 

 

 

 

 

 

 

 

 

二、事件触发方式(event):

click 鼠标左键单击
mouseover 鼠标移动到上面
mouseout 鼠标离开
mousemove 鼠标移动

 

 

 

三、兼容性:

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下实例演示了跨浏览器的解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器,除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

 

四、移除事件语法:

removeEventListener(event,function);

 

五、实例:

      注册事件、移除事件

<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);//注册事件
function myFunction() 
{
    document.getElementById("demo").innerHTML = "Hello World";
}
document.getElementById("myBtn").removeEventListener("click", myFunction);//移除事件
</script>

 

【javascript】addEventListener事件方法

标签:width   function   listener   ble   参数   cli   rem   实例   text   

原文地址:http://www.cnblogs.com/carsonwuu/p/8032242.html

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