Rumah >tajuk utama >javascript DOM对象学习之事件流addEventListener()使用教程

javascript DOM对象学习之事件流addEventListener()使用教程

伊谢尔伦
伊谢尔伦asal
2017-07-12 11:08:351981semak imbas

addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEvent 比较简单,二来 addEventListener 才是 DOM 中的标准内容。

学习我们php中文网的视频课程:独孤九贱(3)_JavaScript视频教程

简介

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序,在以前我们一般是 d646fd704cfcf081047bb66c9b9298de 元素插入到 dc6dce4a544fdca2df29d5ac0ea9906b 元素中,用户点击 e388a4556c0f65e1904146cc1a846bee 元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: e388a4556c0f65e1904146cc1a846bee 元素的点击事件先触发,然后会触发 dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: dc6dce4a544fdca2df29d5ac0ea9906b 元素的点击事件先触发 ,然后再触发 e388a4556c0f65e1904146cc1a846bee 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;

那么将只有method3生效。 
如果是Mozilla系列,用addEventListener可以让多个事件按顺序都实现,比如: 

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3 
如果是ie系列,用attachEvent可以让多个事件按顺序都实现,比如: 

var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1 

相关内容推荐:

1. Javascript 的addEventListener()及attachEvent()区别分析

2. 解析js中addEventListener()与removeEventListener()

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn