DOM事件学习笔记
2018-01-04 19:35
323 查看
本文是我在慕课上学习DOM时所做的笔记,不足之处,欢迎指正。
视频链接:DOM事件揭秘
主要内容:
1、事件流
2、使用事件处理程序
3、不同的事件类型
事件冒泡流(IE):即事件最开始由最具体的元素(文档中嵌套层次最深的节点)接收,然后逐级向上传播至最不具体的节点(文档)。
事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
2)DOM0级事件处理程序
把一个函数赋值给一个事件的处理程序属性
3)DOM2级事件处理程序
用于处理指定和删除事件处理程序的操作:addEventListener()、removeEventListener()
接收三个参数:要处理的事件名、作为事件处理程序的函数、布尔值
布尔值:false为事件冒泡阶段处理程序 true为事件捕获阶段处理程序
4)IE事件处理程序
接收参数:事件处理程序的名称、事件处理程序的函数
5)跨浏览器的事件处理程序(能力检测)
视频链接:DOM事件揭秘
主要内容:
1、事件流
2、使用事件处理程序
3、不同的事件类型
事件流
描述的是从页面中接受事件的顺序事件冒泡流(IE):即事件最开始由最具体的元素(文档中嵌套层次最深的节点)接收,然后逐级向上传播至最不具体的节点(文档)。
事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
事件处理程序
1)HTML事件处理程序onclick = "alert('hello')" onclick = "functionname()" //缺点:HTML代码和JS代码耦合度高
2)DOM0级事件处理程序
把一个函数赋值给一个事件的处理程序属性
var btn = document.getElementById("id"); //取得节点对象 btn.onclick = functionname(); btn.onclick = null; //删除事件
3)DOM2级事件处理程序
用于处理指定和删除事件处理程序的操作:addEventListener()、removeEventListener()
接收三个参数:要处理的事件名、作为事件处理程序的函数、布尔值
布尔值:false为事件冒泡阶段处理程序 true为事件捕获阶段处理程序
var btn = document.getElementById("id"); //取得节点对象 btn.addEventListener( ' click ' , functionname() , false ); btn.removeEventListener( ' click ' , functionname() , false );
4)IE事件处理程序
attachEvent() 添加事件 detachEvent() 删除事件
接收参数:事件处理程序的名称、事件处理程序的函数
var btn = document.getElementById("id"); //取得节点对象 btn.attachEvent( ' onclick ' , functionname() ); btn.detachEvent( ' onclick ' , functionname() );
5)跨浏览器的事件处理程序(能力检测)
var btn = document.getElementById("id"); //取得节点对象 var eventUtil = { //添加句柄 addHandler : function(element , type ,handler){ if( element.addEventListener){ //DOM2级 element.addEventListener(type,handler,false); } else if( element.attachEvent){ //IE element.attachEvent('on'+type , handler); }else{ //DOM0级 element[ 'on'+type] = handler; } } //删除句柄 removeHandler : function(element , type ,handler){ if( element.removeEventListener){ //DOM2级 element.removeEventListener(type,handler,false); } else if( element.detachEvent){ //IE element.detachEvent('on'+type , handler); }else{ //DOM0级 element[ 'on'+type] = null; } } }
相关文章推荐
- DOM事件学习笔记
- DOM事件学习笔记
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
- jQuery学习笔记之DOM操作、事件绑定(2)
- jQuery学习笔记之DOM操作、事件绑定(2)
- SilverLight学习笔记--Silverligh之在Silverlight中捕获和处理DOM事件
- DOM事件学习笔记
- JavaScript学习笔记之DOM事件句柄
- JS学习笔记(一)DOM事件和监听
- JavaScript高级程序设计学习笔记--事件(二)(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- DOM事件模型学习笔记
- 前端学习笔记--JavaScript--DOM事件探秘
- DOM的事件处理---学习笔记
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- DOM事件学习笔记
- [知了堂学习笔记]_JavaScript之DOM事件(许愿墙)
- 学习笔记-事件2
- 【js学习笔记-093】------文档加载事件
- JavaScript DOM编程艺术 学习笔记(三)DOM
- 【unity3d-C#学习笔记】C#中的委托和事件