- 浏览: 39066 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
xieyaxiong:
songbin0201 写道整篇文章的精华在那些gif图片上 ...
排序算法 -
songbin0201:
整篇文章的精华在那些gif图片上
排序算法
事件
javascript与html之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
* 可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。
事件流
事件流描述的是从页面中接收事件的顺序。但有意思的是,IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。
IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流
* 事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较不具体的节点(文档)。
* 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
1:事件处理程序(或事件侦听器)
1.1:DOM0级事件处理程序
/** *DOM0级事件处理程序 * 这种为事件处理程序赋值的方法是第四代Web浏览器中出现的,而且至今仍然为所有现代浏览器所支持。 * 原因一是简单,二是具有跨浏览器的优势 。 */ /** *添加事件处理程序 */ var btn=document.getElementById("myBtn"); btn.onclick=function(){ alert("Clicked"); } /** *Dom0级方法指定的事件处理 程序被认为是元素的方法,因此,这时候的事件处理程序是在元素的作用域中运行 * 换句话说,程序中的this引用当前元素。 */ var btn=document.getElementById("myBtn"); btn.onclick=function(){ alert(this.id); } /** *删除事件处理程序 */ btn.onclick=null;
1.2:DOM2级事件处理程序
/** * DOM2级事件处理程序 * DOM2 级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener(). * 所有的DOM节点都包含这两个方法,并且它们接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值 。 * 最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。 * */ /** *在按钮上为click事件添加事件处理程序 */ var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); /** *使用DOM2级方法添加事件处理程序的主要好处是可 以添加多个事件处理程序。 * 这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。 */ var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); btn.addEventListener("click",function(){ alert("Hello world"); },false); /** *删除事件 * * 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。 * 这也意味着通过addEventListener()添加的匿名函数将无法移除。 * * 因为第二参数与传入addEventListener()中的那一个是完全不同的函数。 */ var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); //省略其他代码 btn.removeEventListener("click",function(){ //没有用! alert(this.id); },false); /** *解决办法是传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同。 * */ var btn=document.getElementById("myBtn"); var handler=function(){ alert(this.id); } btn.addEventListener("click",handler,false); //省略其它代码 btn.removeEventListener("click",handler,false);//有效! /** * * 大多数情况下,都是将事件处理程序添加到事件流冒泡阶段,这样可以最大限度地兼容各种浏览器。 * 最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。 * 如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。 */
1.3:IE事件处理程序
/** * IE事件处理程序 * * IE实现了与DOM中类似的两个方法:attachEvent()和deleteEvent().这两个方法接受相同的两个参数: * 事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。 **/ var btn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert("Clicked"); }) /** * 在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window. **/ var btn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert(this==window); //true }) /** * * 与addEventListener()类似,attachEvent()方法也可以用来为一个元素添加多个事件处理程序。不过,与DOM方法不同的是, * 这些事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发。 **/ var btn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert("Clicked"); }) btn.attacEvent("onclick",function(){ alert("Hello world!"); }) /** * 使用attachEvent()添加的事件可以通过deleteEvent()来移除,条件是必须提供相同的参数。 * 这也意味着添加匿名函数将不能被移除。 */ var btn=document.getElementById("myBtn"); var handler=function(){ alert("Clicked"); } btn.attachEvent("onclick",handler); //省略其他代码 btn.detachEvent("onclick",handler);
1.4:跨浏览器的事件处理程序
/** *跨浏览器的事件处理程序 * * 为了以跨浏览器的方法处理事件,不少开发人员会使用能够隔离浏览器差异的javascript库, * 还有一些开发人员会自己开发最合适的事件处理方法。 */ var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } } var btn=document.getElementById("myBtn"); var handler=function(){ alert("Clicked"); }; EventUtil.addHandler(btn,"click",handler); //省略其他代码 EventUtil.removeHandler(btn,"click",handler);
2:事件对象
2.1:DOM2上事件对象
/** *事件对象 * * 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。 * 包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息, * 而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event对象,但支持方式 不同。 * */ var btn=document.getElementById("myBtn"); btn.onclick=function(event){ alert(event.type); //"click" } btn.addEventListener("click",function(event){ alert(event.type); //"click" },false); btn.onclick=function(event){ alert(event.currentTarget===this);//true alert(event.target===this); //true } /** *单击这个例子中按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素上的。 * 然而,target元素却等于按钮元素,因为它是click事件真正的目标。 */ document.body.onclick=function(event){ alert(event.currentTarget===document.body); //true alert(this===document.body);//true alert(event.target===document.getElementById("myBtn"));//true } /** *在需要通过一个函数处理多个事件时,可以使用type属性。 * */ var btn=document.getElementById("myBtn"); var handler=function(event){ switch(event.type){ case "click": alert("Clicked"); break; case "mouseover": event.target.style.backgroundColor="red"; break; case "mouseout": event.target.style.backgroundColor=""; break; } } btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler; /** *要阻止特定事件的默认行为,可以使用preventDefault()方法。例如,链接的默认行为就是在被单击时会导航到其href指定的URL. * 如果你想阻止链接导航这一默认行为,那么通过链接的onclick事件处理程序可以取消它。 * 只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。 */ var link=document.getElementById("myLink"); link.onclick=function(event){ event.preventDefault(); } /** * stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获 或冒泡。 * */ var btn=document.getElementById("myBtn"); btn.onclick=function(event){ alert("Clicked"); event.stopPropagation(); } document.body.onclick=function(event){ alert("Body clicked"); }
2.2:IE中的事件对象
/** * IE中的事件对象 * * 与访问DOM中的event对象不同,要访问IE的event对象有几种不同的方式 ,取决于指定事件处理程序的方法。 * 添加事件处理程序时,event对象作为window对象的一个属性存在。 */ var btn=document.getElementById("myBtn"); btn.onclick=function(){ var event=window.event; alert(event.type);//"click" } /** *因为事件处理程序的作用域是根据指定它的方式 来确定的,所以不能认为this会始终等于事件目标。 * 故而,最好还是使用event.srcElement比较保险。 */ var btn=document.getElementById("myBtn"); btn.onclick=function(){ alert(window.event.srcElement===this);//true } btn.attachEvent("onclick",function(event){ alert(event.srcElement===this);//false }) /** *cancelBubble属性与DOM中的stopPropagation()方法作用相同,都是用来停止 事件冒泡的。 * 由于IE不支持事件捕获,因而只能取消事件冒泡;但stopPropagation()可以同时取消事件捕获和冒泡 。 */ var btn=document.getElementById("myBtn"); btn.onclick=function(){ alert("Clicked"); window.event.cancelBubble=true; } document.body.onclick=function(){ alert("Body clicked"); }
2.3:跨浏览器的事件对象
/** *跨浏览器的事件对象 * 虽然DOM和IE中的event对象不同,但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。 */ var EventUtil={ addHandler:function(element,type,handler){ //省略的代码 }, getEvent:function(event){ return event?event:window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, removeHandler:function(element,type,handler){ //省略的代码 }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } }
事件类型
/** *事件类型 * * Web 浏览器中可能发生的事件有很多类型。不同的事件类型具有没的信息。而DOM2级事件“规定了下列5种事件: * 1:UI(User Interface,用户界面 )事件,在用户与页面上的元素交互时触发; * 2:鼠标事件,当用户通过鼠标在页面上执行操作时触发; * 3:键盘事件,当用户通过键盘在页面上执行操作时触发; * 4:HTML事件,当浏览器窗口发生变化 或发生特定的客户端 /服务器交互时触 发; * 5:变动 事件,当底层DOM结构发生变时触 发。 */
- event.rar (3.8 KB)
- 下载次数: 2
发表评论
-
javascript最佳实践
2012-06-14 10:27 662javascript最佳实践 随着简单的网站成长为更加复杂 ... -
javascript 高级技巧
2012-06-12 17:02 13611:高级函数 1.1 作用域安全的构造函 ... -
javascript 闭包、匿名函数、作用域链
2012-06-11 13:48 12491:闭包 闭包的定义 : ... -
javascript面向对象总结
2012-06-07 16:11 626关于创建对象: ... -
甘露模型、优雅
2011-03-31 21:39 120javascript难以驾驭,主要原因是太过灵活。 比 ... -
总结闭包的几种作用
2011-03-31 18:04 64在程序语言中,所谓闭 ...
相关推荐
第三章 JavaScript事件 第三章 JavaScript事件 第三章 JavaScript事件
javascript事件列表解说.doc
JavaScript事件机制详细研究
javascript事件触发列表与解说.pdf
开发工具与关键技术:Adobe Dreamweaver JavaScript 事件相关知识点总结 网路安全
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的...
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
系统介绍了javascript事件,包括平常理解不透彻的捕获,冒泡等机制,值得一看
使用JavaScript事件综合查询,js事件大全
Javascript事件的定义包括所有组件的事件定义
javascript事件查询综合.docjavascript事件查询综合.docjavascript事件查询综合.doc
总结了javascript的各种事件和触发时机
dhtmlxScheduler是一个JavaScript事件日历,允许您添加一个类似google调度程序到您的web应用程序或网站。直观的拖放界面允许最终用户快速管理事件和约会不同的观点:一天,周,月,年,议程,时间表,等。非常轻量级(约20 kb...
Javascript 事件 事件兼容性一览表
幫助穩當: javascript事件大集合
JavaScript事件.doc
javascript代码模块之javascript事件综合查询
第3章+JavaScript事件处理.pdf