JS--addEventListener()
来源:互联网 发布:淘宝拍卖书画是真的吗 编辑:程序博客网 时间:2024/05/22 04:51
刚刚在做百度笔试题的时候发现有关于addEventListener这个方法,所以现在想了解多一点~~
去菜鸟驿站和其他的网站下学习了一下关于:addEventListener()方法--用于向指定的元素添加事件句柄。
它是为元素添加点击事件的,当用户点击元素的时候,会触发事件的发生。
例如,我们在这里给出一段代码:
docuemnt.getElementById("myBtn').addEventListener("click",function(){
document.getElementById("demo").innerHTML="Hello World";
});
**关于浏览器的支持,IE8以及更早的IE版本是不支持addEventListener()方法的,Opera 7.0及Opera等更早的版本也是不支持的。
**语法
element.addEventListener(event,function,useCapture) 、
event :指的是事件名,必须的,而且是字符串。
function: 也是必须的,指定事件出发时执行的函数。当事件对象会作为第一个参数传入函数,事件对象的类型取决于特定的事件。例如"click"是属于MouseEvent(鼠标事件)对象。
useCapture:可选的值,布尔值,指定事件是否在捕获或者冒泡阶段执行。true-事件句柄在捕获阶段执行。false-默认值,事件句柄在冒泡阶段执行。
【1】我们可以通过函数名来引用外部的函数。
document.getElementById("myBtn").addEventListener("click",myFunction);
【2】我们可以在文档中添加很多事件,添加的事件是不会覆盖已存在的事件的。
document.getElementById("myBtn").addEventListener("click",myFunction);
document.getElementById("myBtn").addEventListener("click",someOtherFunction);
【3】还可以在同一个元素添加不同的类型的事件
document.getElementById("myBtn").addEventListener("mouseover',myFunction);
docuement.getElementById("myBtn").addEventListener("click",someOtherFunction);
【4】当传递参数值时,使用匿名函数调用带参数的函数
document.getElementById("myBtn").addEventListener("click',function(){
myFunction(p1,p2);
});
【5】使用可选参数useCapture来演示冒泡和捕获阶段的不同:
document.getElementById("myDiv").addEventListener("click',myFunction,true);//这个是从捕获的阶段来执行
**我们这里先谈谈捕获阶段和冒泡阶段的区别:
捕获阶段这要是从最不精确的对象开始触发,直到最精确的对象。
冒泡阶段是从最精确的对象开始触发,直到最不精确的。
我们形象地说出其实就是:捕捉就是从window-document-html-body-div-ul-li-a; 而冒泡的顺序正好和捕捉相反: a-li-ul-div-body-html-document-window。
之前提到过IE8以及更早的版本是不支持addEventListener()事件的,所以我们这里有另一个方法来适应跨浏览器
attachEvent()方法来替代。
var x=document.getElementById("myBtn");
if(x.addEventListener){
x.addEventListener("click",myFunction);
}
else if(x.attachEvent){
x.attachEvent("onclick","myFunction");
}
- JS--addEventListener()
- js-addEventListener+attachEvent
- js addEventListener和attachEvent
- JS addEventListener参数解析
- Js addEventListener 和 attachEvent
- js addEventListener详解
- 【js学习】addEventListener() 用法
- js,addEventListener参数传递
- JS addEventListener 区别
- JS-addEventListener方法介绍
- JS:attachEvent和addEventListener 使用方法
- JS:attachEvent和addEventListener 使用方法
- JS:attachEvent和addEventListener 使用方法
- JS:attachEvent和addEventListener 使用方法
- JS:attachEvent和addEventListener 使用方法
- JS attachEvent和addEventListener 使用方法
- js事件处理(removeEventListener addEventListener)
- JS:attachEvent和addEventListener 使用方法
- EasyUI之滑动条Slider
- 4658: rescue
- linux复制与粘贴操作的快捷键
- java 多线程概要
- 一个Windows下的tail工具(即时查看日志)
- JS--addEventListener()
- VectorDrawable矢量图
- java 中的抽象方法
- 欢迎使用CSDN-markdown编辑器
- 用户登录记住密码
- c++风格字符串使用
- 红黑树
- HDFS创建快照备份数据
- MVC、MVP和MVVM的区别