[js]事件综合 整理
原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html
事件流:页面接收事件的顺序,IE提出了事件冒泡流,Netscape提出了事件捕获流。
事件冒泡:事件由最具体(dom中层次最深的节点)的接收对象向上进行传播到较为不具体的元素
事件捕获:事件由不具体的元素接收向下传播到具体的元素
DOM事件流:事件捕获阶段、处于目标阶段和事件冒泡阶段
一、事件处理程序
1、HTML事件处理程序
<input type="button" id="btn" onclick="alert(event.type)" value="点击我">
2、DOM0级事件处理
var btn=document.getElementById("btn"); btn.onclick = function(){ alert("123"); alert(this);//btn元素,只在btn元素的作用域内进行 }移除btn.onclick = null;
- 传统绑定的优点
- 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致
- 处理事件时,this关键字引用的是当前元素,这很有帮组
- 传统绑定的缺点
- 传统方法只会在事件冒泡中运行,而非捕获和冒泡
- 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
- 事件对象参数(e)仅非IE浏览器及ie9以上(包括ie9)可用
3、Dom2级事件处理
var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ alert("123"); },false)//false代表冒泡阶段 ie8之前的版本都是只支持事件冒泡,为了更好的兼容性最好选择事件冒泡,设置false//除非需要进行事件捕获的时候设置成true 添加多个事件
btn.addEventListener("click",function(){ alert("123"); },false)
btn.addEventListener("click",function(){ alert("aaa"); },false)执行顺序是先弹出123,再弹出aaa
移除:移除时要用removeEventListener(),传入的参数和绑定时传入的参数一致,注意传入匿名函数是不行的btn.removeEventListener("click",function(){ alert("123");},false)//不管用 var fun = function(){ alert("123");}btn.addEventListener("click",fun,false);btn.removeEventListener("click",fun,false);//管用
- W3C绑定的优点W3C绑定的缺点
- 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false (冒泡) 或 true (捕获)。
- 在事件处理函数内部,this关键字引用当前元素。
- 事件对象总是可以通过处理函数的第一个参数(e)捕获。
- 可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件
- IE不支持,你必须使用IE的attachEvent函数替代。
4、IE事件处理程序
var btn = document.getElementById("btn"); btn.attachEvent("onclick",function(){//onclick,并不是DOM2级时的click alert("123"); alert("this"); //window,在全局的作用域下进行 }); 添加多个事件时
btn.attachEvent("onclick",function(){ alert("123"); });
btn.attachEvent("onclick",function(){ alert("aaa"); }); 执行顺序正和DOM2级相反,先弹出aaa,再弹出123 移除事件
var btn = document.getElementById("btn");var fun = function(){alert("123");}
btn.attachEvent("onclick",fun}); btn.detachEvent("onclick",fun);与DOM2级相同,不能传入匿名函数
- IE方式的优点IE方式的缺点
- 可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件。
- IE仅支持事件捕获的冒泡阶段
- 事件监听函数内的this关键字指向了window对象,而不是当前元素(IE的一个巨大缺点)
- 事件对象仅存在与window.event参数中
- 事件必须以ontype的形式命名,比如,onclick而非click
- 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListene
二、事件对象
1、Dom中的事件对象
兼容Dom的浏览器会将event对象传入到事件处理程序中,无论使用的是Html、DOM0、DOM2级都会传入event对象
<input type="button" id="btn" onclick="alert(event.type)" value="点击我">//click var btn = document.getElementById("btn");btn.onclick = function(){ alert(event.type);//click}btn.addEventListener("click",function(){ alert(event.type);//click});
event对象的属性和方法
bubbles boolean 只读 是否为冒泡cancelable boolean 只读 是否可以取消事件的默认行为currentTarget element 只读 当前正在处理事件的那个元素defaultPrevented Boolean 只读 为true时表示已经调用的preventDefault()eventPhase integer 只读 表示事件阶段,1:捕获阶段 2:目标阶段 3:冒泡阶段preventDefault() function 只读 取消事件的默认行为,如果cancelable为true时可以使用此方法stopPropagation() function 只读 取消事件的进一步冒泡或捕获,当bubbles为true时可以使用此方法target element 只读 事件的目标type String 只读 事件的类型
事件处理程序中的this、event.currentTarget、event.target的关系
在事件内部,this会一直等于event.currentTarget,然而event.target是事件的实际目标
var btn = docuemtn.getElementById("btn"); btn.onclick = function(){ console.log(this);//btn console.log(event.currentTarget);//btn console.log(event.target)//btn}
body.onclick = function(){ console.log(this);//body console.log(event.currentTarget);//body console.log(event.target)//btn}因为事件处理程序是注册到body上面的,所以this和event.currentTarget都是body,btn是click事件真正的目标,所以target为btn点击btn时,因为事件没有注册到btn上,所以事件冒泡到body上。
阻止事件默认行为 <a href="http://www.baidu.com" id="myLink">百度</a>var link = document.getElementById("myLink");link.onclick = function(event){ event.preventDefault();}//阻止了a的链接跳转行为 取消事件进一步的冒泡或者捕获btn.onclick = function(event){ alert("123"); event.stopPropagation();}body.onclick = function(event){ alert("aaa");}如果没有阻止事件冒泡的话,点击body会弹出2个提示框
event.eventPhase
body.addEventListener("click",function(event){ alert(event.eventPhase);//1捕获阶段 },true)btn.onclick = function(event){ alert(event.eventPhase);//2 目标阶段}body.onclick = function(){ alert(event.eventPhase);//3 冒泡阶段}
2、IE中的事件对象
btn.onclick = function(event){ alert(window.event.type);//click 在IE下如果使用dom0级事件,其中event对象是作为window的一个属性存在,window.event}btn.attachEvent("onclick",function(event){ alert(event.type);//click 但是如果使用attachEvent注册事件时,会将event对象传入到事件处理函数中 window.event也可以访问到});
IE下event的属性及方法
cancelBubble Boolean 读/写 默认值为false,设为true可以取消事件冒泡,与DOM中的stopPropagation()相同returnValue Boolean 读/写 默认为true ,设为false时可以取消事件的默认行为,与DOM中的preventDefaule()相同srcElement element 读 事件的目标,与DOM中的target相同type string 读 被触发的事件类型
三、适应各种浏览器的事件
var event = { addEvent : function(element,type,fun){ if(element.addEventListener){ element.addEventListener(type,fun);//dom2级 }else if(element.attachEvent){ element.attachEvent("on"+type,fun);//ie }else{ element["on"+type] = fun;//dom0级 } }, removeEvent : function(element,type,fun){ if(element.removeEventListener){ element.removeEventLister(type,fun); }else if(element.detachEvent){ element.detachEvent("on"+type,fun); }else{ element["on"+type] = null; } }, getEvent : function(event){ return event ? event : window.event; }, getTarget : function(event){ return event.target || event.srcElement }, preventDefalut : function(event){ event.preventDefalut ? event.preventDefalut() : event.returnValue = false; }, stopPropagation : function(event){ event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; }}
3、事件的代理/委托的原理以及优缺点,这是靠事件的冒泡机制来实现的
(1)、可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
(2)、可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
那么极有可能要求让你【实现事件模型】,即写一个类或是一个模块,有两个函数,
一个bind一个trigger,分别实现绑定事件和触发事件,
核心需求就是可以对某一个事件名称绑定多个事件响应函数,
然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数。
[js]事件综合 整理的更多相关文章
- js事件知识整理
鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮……),则触发mousedown ...
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...
- vue.js面试题整理
Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...
- javascript高级程序设计---js事件思维导图
绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象
- js事件处理程序return false ,preventDefault,returnValue
面试题目中,经常会被问到如何阻止默认行为. 以下是<javascript权威指南>书中的内容,详情可以去看书. 能够取消事件默认操作的方法有三种 1.属性注册的事件处理程序的返回值fals ...
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
随机推荐
- Monthly Expense(二分查找)
Monthly Expense Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17982 Accepted: 7190 Desc ...
- livereload的简单使用
一/直接使用:npm install -g livereload 全局安装 http-server 起到服务 livereload启动 在html中引入<script src="ht ...
- IOS自定义仪表盘
登录|注册 周海锋 的专栏 Objective-C/Cocos2d/Cocos2d-x/Php/JS 目录视图 摘要视图 订阅 2016软考项目经理实战班 学院周年礼-顶 ...
- C语言使用fread和fwrite处理任何文件
1.文件必须以二进制形式打开 FILE* pfile1=fopen("fileone","rb"); FILE* pfile2=fopen("file ...
- Python3基础 使用技巧:多行同时缩进
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- 编写一个Car类,具有final类型的属性品牌,具有功能drive; 定义其子类Aodi和Benchi,具有属性:价格、型号;具有功能:变速; 定义主类E,在其main方法中分别创建Aodi和Benchi的对象并测试对象的特 性。
package b; public class Car { public final static Car pinpai=new Car(); public static Car instance() ...
- 【leetcode❤python】Sum Of Two Number
#-*- coding: UTF-8 -*- #既然不能使用加法和减法,那么就用位操作.下面以计算5+4的例子说明如何用位操作实现加法:#1. 用二进制表示两个加数,a=5=0101,b=4=0100 ...
- BZOJ 2433 智能车比赛(计算几何+最短路)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2433 题意:若干个矩形排成一排(同一个x之上最多有一个矩形),矩形i和i+1相邻.给定两 ...
- DEV界面皮肤
1.添加一个 2.添加引用: 3.添加一个SkinTools类 public class SkinTools { /// <summary> /// 在Program中调用 /// < ...
- 【转载】Visual Studio 2015 for Linux更好地支持Linux下的开发
原文:Visual Studio 2015 for Linux更好地支持Linux下的开发 英文原文:Targeting Linux Made Easier in Visual Studio 2015 ...