主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] 本文介绍浏览器的事件模型:DOM0级事件模型和DOM2级事件模型,以及IE浏览器的事件模型,并介绍jQuery事件模型的特点。...
在研究jQuery的事件模型之前,我们有必要先来研究一下浏览器的事件模型。浏览器的第一个事件模型是由网景公司引入的,通常我们称之为DOM0级事件模型。2000年11月,W3C组织制定了DOM2级事件模型,各个主流的浏览器厂商都支持DOM2级事件模型,但是IE浏览器却不完全支持,而是采用它自己的一套事件模型机制。 DOM0级事件模型是最基本的事件模型,在这个事件模型中,事件处理程序是通过把函数实例的引用指派到DOM元素的属性上声明的。例如使用 默认情况下,DOM0事件模型会产生事件冒泡。例如下面的例子: <html lang="zh" id="html" class="demo"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body id="body" class="demo"> <div id="parent" class="demo"> <div id="child"> <button id="btn" class="demo">点击一下</button> </div> </div> </body> </html> $(function(){ //获取所有元素的引用 var allElements = $("*"); allElements.each(function(){ //在所有元素上分别执行DOM0级的鼠标点击事件 this.onclick = function(event){ //1、获取事件发生的目标 //需要根据不同的浏览器进行判断来获取event对象 event = event?event:window.event; //alert(event); //2、获取事件的目标 target = event.target?event.target:event.srcElement; console.info("事件源(id):"+target.id+",事件目标名称:"+target.tagName+",事件对象的ID:"+this.id); } }); }); 执行上面的代码可以在控制台上看到下面的结果:从上往下打印出来的元素分别是btn→child→parent→body→html。事件从被点击的按钮开始,一直向上冒泡到 关于DOM0级事件模型可以参看:。 DOM0级事件模型的最大缺点是事件会被覆盖。也就是说,相同元素的多个事件处理程序,只有最后一个会被执行,例如: $(function(){ $("#child")[0].onclick = function(){ print("abc"); } $("#child")[0].onclick = function(){ print("xyz"); } $("#child")[0].onclick = function(){ print("kkk"); } }); 上面的代码中,只有最后一个鼠标点击事件会被执行。 为了解决DOM0级事件处理程序的问题,W3C组织制定了“DOM2级事件处理程序”。“DOM2级事件处理程序”定义了2个方法,用于处理指定和删除事件处理程序的操作,这2个方法是: 关于DOM2级事件模型可以参看:。 DOM2级事件模型支持事件捕获。在DOM2级事件处理程序中,提供了第3个参数来控制使用事件冒泡还是事件捕获,例如: btn.addEventListener("click",function(){ console.info(this.id); },true); 当第3个参数设置为 IE浏览器不支持DOM2级事件处理程序,但是它有2个类似的方法: 因为各个浏览器在处理事件的方法上存在如此大的差异,导致开发人员在编写js事件处理程序时非常吃力。jQuery事件模型屏蔽了浏览器之间的差异,它提供了如下的功能:
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com