javascript注册事件-addEventListener和attachEvent
来源:互联网 发布:淘宝购物返现app 编辑:程序博客网 时间:2024/06/06 07:37
1、javascript注册事件的方法
在javascript开发中,我们经常需要绑定事件,js绑定事件有以下三种方法:
方法一、
<div onclick ="alert('绑定事件了')">绑定事件</div>
方法二、
<div id="bind_event">绑定事件了</div>
document.getElementById("bind_event").click = function () {
alert("绑定事件了");
}
方法三、
function EventName() {
alert("绑定事件了");
}
document.addEventListener("click", EventName, false);
说明:这个方法分为两种情况,一种情况是符合w3c标准的,如firefox,chrome浏览器,另外一种是不符合w3c标准的,如IE,上面我们这种写法就是符合w3c标准的写法。
对于方法二,如果我们想要绑定多个事件,就没有方法了,
document.getElementById("bind_event").onclick=Method1;
document.getElementById("bind_event).onclick=Method2;
document.getElementById("bind_event).onclick=Method3;
这样的话,就只会指向Method3,其他方法就不执行了。这就需要使用我们上面说的方法三,下面我们就来说说方法三。
2、addEventListener和attachEvent说明
- addEventListener是符合W3C规范的事件绑定方法,FireFox、Chrome、Safari都是用它来绑定事件。
- attachEvent是IE私有的,不符合W3C规范,而且在IE下,只能使用它来绑定事件,addEventListener是无效的。
- 所以,要想绑定事件,必须处理兼容性问题。
3、addEventListener和attachEvent参数以及区别
addEventListener共有3个参数,如下所示:
element.addEventListener(type,listener,useCapture);
下面我们说一下捕获模式与冒泡模式
如图所示,有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发绿色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling(冒泡)模式,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture(捕获)模式,和bubbling(冒泡)模式相反是由外而内,会先执行绿色元素的click事件才执行蓝色元素的click事件。
如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(冒泡)模式的事件。
attachEvent共有2个参数,如下所示:
element.attachEvent(type,listener);
w3c标准事件执行顺序
element.addEventListener("click",Method1,true);
element.addEventListener("click",Method2,true);
element.addEventListener("click",Method3,true);
执行顺序是Method1->Method2->Method3
IE事件执行顺序
element.attachEvent("onclick",Method1);
element.attachEvent("onclick",Method2);
element.attachEvent("onclick",Method3);
执行顺序是Method3->Method2->Method1
4、事件移除
移除使用分别是removeEventListener和detachEvent,参数同上面注册事件的参数一样
5、绑定事件与移除事件示例
//注册事件
function registerEvent(ele, event_name, func) {
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
event_name = event_name.replace(/^on/, "");//删除以on开头的事件,如onclick 为click
ele.addEventListener(event_name, func, false);
} else if (document.attachEvent) {// If IE event model is used
ele.attachEvent(event_name, func);//IE浏览器
}
}
//移除注册事件
function unregisterEvent(ele, event_name, func) {
// Mozilla, Opera and webkit nightlies currently support this event
if (document.removeEventListener) {
event_name = event_name.replace(/^on/, "");//删除以on开头的事件,如onclick 为click
ele.removeEventListener(event_name, func, false);
} else if (document.detachEvent) {// If IE event model is used
ele.detachEvent(event_name, func);//IE浏览器
}
}
- javascript注册事件-addEventListener和attachEvent
- attachEvent/addEventListener注册事件
- javascript addEventListener和attachEvent 事件绑定
- JS addEventListener / attachEvent注册事件
- javascript attachEvent addEventListener 监听事件
- JS注册事件 JS:attachEvent和addEventListener 使用方法
- JS注册事件 JS:attachEvent和addEventListener 使用方法
- Dom对象事件注册和取消(addEventListener/attachEvent)
- Dom对象事件注册和取消(addEventListener/attachEvent)
- 添加事件attachEvent和addEventListener
- javascript attachEvent和addEventListener 使用方法
- javascript attachEvent和addEventListener 使用方法
- JavaScript事件监听(attachEvent、 addEventListener)
- window.onload事件--attachEvent和addEventListener
- js 添加事件 attachEvent和addEventListener 使用方法
- js事件处理方法addEventListener和attachEvent
- 关于attachEvent和addEventListener事件监听
- Js添加事件addEventListener和attachEvent
- vs2013 error c4996: 'fopen': This function or variable may be unsafe
- Android ScrollTo 滚动后,留下空白
- IOS 捕获异常工具UncaughtExceptionHandler
- js防止表单重复提交方法之一
- js学习(一)
- javascript注册事件-addEventListener和attachEvent
- Linux中后缀名为ko、o、a、so、la的文件介绍
- Qt on Android: http下载与Json解析
- python mysql 常见问题汇总
- 解决_CRT_SECURE_NO_WARNINGS 警告
- 一种STM32的串口控制台的实现(非常实用)
- 克隆类(克隆出一个一摸一样的对象)
- java 几种基本类型的长度值
- 用unix socket加速php-fpm、mysql、redis的连接