`
rmzdb
  • 浏览: 81322 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

【原】JS事件机制和跨浏览器知识小结

 
阅读更多

最近项目中有个大问题,就是前台的处理很大程度上用到了JS 来动态的更新页面,还融合了ajax技术。项目的内容其实并不多,但是有一个问题很纠结,就是一个搜索效果的浮动div问题。大概的效果就是点击查询事件,弹出一个搜索框,能够接受鼠标 键盘上下键的查询和确认添加到候选列表的处理。本来逻辑并不复杂,调用ajax从后台得到数据,在前台处理结果显示,选中隐藏就完全可以了。但是就是因为要处理的事件很多,导致了效果不佳,跟老大不断调试,以实用主义为主要,终于将效果调制想要的程度。今天看到一篇js事件机制的文章,把我的困惑全部一扫而空,我唯一的念想就是:记录记录!一定要记录下来!!!!  


       Javascript也是一门事件驱动的脚本语言,和其他桌面软件一样,WEB应用程序也有自己的事件驱动机制。比如:单击(onclick)、鼠标经过(onmouseover)、鼠标按下(onmousedown)等等。

     

        在继续之前,我先详细讲讲Javascript的事件机制。 很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制,事件产生的顺序如下所示: 

引用
document  ------捕获-----> body ------捕获-----> div  ------捕获-----> span  (捕获机制)

  事件流如箭头所指顺序开始由根节点往各节点派送,如果该节点上绑定有事件动作,则执行该动作,完毕后继续往下一节点走。

        后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套自己的规则:

  

document  <-----外抛----- body <------外抛----- div  <------外抛----- span  (冒泡机制)
再后来,有个叫W3C的媒婆,想撮合这两个孩子,将他们的特点融合在了一起,这下,事件产生的顺序变成了这样:
引用

                         ------捕获----->             ------捕获----->        ------捕获----->  (捕获阶段)

        document                            body                         div                           span                        

                         <-----外抛-----               <-----外抛-----         <-----外抛-----    (冒泡阶段)

 

善良的Netscape以及其姐妹们都接受了媒婆的建议,采用了新的事件规则,而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。

 

    由于这两派浏览器的差异,其绑定的方法也不一样,其中,遵循标准的浏览器使用W3C定义的addEventListener函数绑定,函数定义如下:
     function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
     eventFlag : 事件名称,如click、mouseover…
     eventFunc: 绑定到事件中执行的动作
     useCapture: 指定是否绑定在捕获阶段,true为是,false为否,默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

 

IE中使用自有的attachEvent函数绑定事件,函数定义如下:
    function attachEvent(string eventFlag, function eventFunc)
    eventFlag: 事件名称,但要加上on,如onclick、onmouseover…
    eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cancelBubble=false来阻止事件继续往下流

 

<script language="javascript">
//Javascript 事件演示
window.onload = function(){
var hideBox = function(event){
document.getElementById('status_show').style.display = 'none';
document.getElementById('status_hide').style.display = 'block';
};
var showBox = function(event){
document.getElementById('status_show').style.display = 'block';
document.getElementById('status_hide').style.display = 'none';
stopEvent(event);
};
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
};
if(document.addEventListener){
document.addEventListener('click', hideBox, false);
document.getElementById('status_hide').addEventListener('click', showBox, false);
document.getElementById('status_show').addEventListener('click', stopEvent, false);
}else {
//For IE
document.attachEvent('onclick', hideBox);
document.getElementById('status_hide').attachEvent('onclick', showBox);
document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
}
};
</script>
看完这个东西,我们的实现就差多了,我们为了避免事件处理,我们通过var 一个变量来控制是否执行事件的响应处理,这里是实现了功能,但是跨浏览器估计就差劲了。 

对浏览器的支持性做必要的检查
if (Netscape) {

     use Netscape model

} else if (Explorer) {

     use Microsoft model

}


访问这个事件所以你可以读出他的属性,通常你的事件处理程序开始如下:

function doSomething(e) {

   if (!e) var e = window.event // e refers to the event

}


读取他的属性

function doSomething(e) {

       if (!e) var e = window.event

       if (e.keyCode) code = e.keyCode;// for ie 

       else if (e.which) code = e.which;   // for netScape

}


希望事件冒泡。如果不希望发生事件冒泡,那么就阻止他:

function doSomething(e) {

    if (!e)  var e = window.event // handle event

   e.cancelBubble = true;

    if (e.stopPropagation)

   e.stopPropagation();

}

 

 

分享到:
评论

相关推荐

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    在讨论如何使用JavaScript来创建一个跨浏览器的事件处理机制时,我们首先需要了解不同浏览器之间在事件处理方面的差异性,以及为了兼容这些差异,开发者们采取了哪些策略。以下是从给出的文件内容中提取出来的相关...

    css 跨浏览器实现float-center.docx

    这些话题涉及JavaScript操作CSS属性、CSS定位机制以及`float`和`position`属性的用法,都是前端开发中至关重要的知识点。 总结来说,实现`float:center`需要巧妙地结合`position:relative`、`left`、`right`属性,...

    浏览器缓存知识小结及应用分析

    理解浏览器缓存的机制不仅对于前端开发人员至关重要,对于后端开发者和系统架构师同样有着指导意义。本文将从几个方面详细探讨浏览器缓存的知识点。 首先,我们需要明确浏览器缓存是什么。简单来说,浏览器缓存就是...

    JavaScript事件学习小结(三)js事件对象

    - 自定义事件对象:在JavaScript中,开发者不仅可以使用浏览器提供的事件对象,还可以创建自定义事件对象,并通过dispatchEvent()方法来触发这些事件,这为开发复杂的事件驱动应用程序提供了强大的功能。 总的来说...

    Javascript 面向对象编程小结

    这篇博客“JavaScript 面向对象编程小结”可能涵盖了JavaScript中实现OOP的一些核心概念和技巧。 首先,面向对象编程的基础是类与对象。在JavaScript中,虽然没有像Java或C++那样的传统类机制,但是可以通过构造...

    Learning from jQuery

    ### 从jQuery学习:事件处理 #### 学习目标与背景 ...这不仅包括基本的事件绑定和触发,还包括更高级的主题,如跨浏览器兼容性的处理、事件传播的控制等。这些知识对于构建现代、响应式的Web应用至关重要。

    JS重要知识点小结

    ### JS代码预解析原理 在深入学习JavaScript(JS)时,代码预解析是一个...总之,理解上述的JS代码预解析原理、函数相关和面向对象的知识点,是深入学习JavaScript的必经之路,它们帮助我们构建更健壮、更高效的代码。

    开发体会和小结1

    尽管Jinja2模板对于个人开发足够方便,但在团队协作或前后端分离的项目中,使用Ajax和JavaScript进行数据交互能提高代码的可维护性和性能。 总结这次开发经验,开发者认识到不断学习新技能的重要性,以及在实际项目...

    JS运动相关知识点小结(附弹性运动示例)

    标题中提到的"JS运动相关知识点小结"主要涉及了JavaScript在实现网页元素运动效果时所应用的核心概念和编程技巧。具体到JavaScript运动效果,它通常指的是通过编程手段,使网页上的元素(如图片、文本框等)具有动画...

    flash javascript之间的通讯方法小结

    标题《flash javascript之间的通讯方法小结》表明本文主要讨论的是Flash和JavaScript这两种技术之间进行交互与通讯的方法。Flash是一种用于创建动画、游戏和应用的多媒体软件平台,而JavaScript是一种广泛用于网页...

    javascript 操作文件 实现方法小结

    标题“javascript 操作文件 实现方法小结”预示了本文将汇总JavaScript在客户端操作文件系统时涉及的技术和方法。描述“可以通过浏览器在访问者的硬盘上创建文件 JavaScript操作文件系统创建快捷方式”说明了这种...

    华为面试题小结

    .NET Core是.NET Framework的一个跨平台版本,支持Windows、macOS和Linux等多个操作系统。.NET Core的设计目标是模块化和轻量化,更适合现代的云计算环境。 ### 7. AngularJS双工数据绑定原理 #### 双工数据绑定 ...

    HTML5开发大全CSS+JAVASCRIPT+WEBGL

    #### 六、小结 - 本书全面覆盖了使用HTML5、CSS3和WebGL开发游戏所需的技术细节,不仅提供了理论知识,还包含了丰富的实践案例。 - 无论是初学者还是有一定经验的开发者,都能从中学到有用的信息和技术。 - 随着...

    javascript编程异常处理实例小结

    JavaScript编程异常处理知识点: 1. JavaScript异常处理的重要性 ...通过上述的知识点,可以看出JavaScript异常处理机制的重要性以及如何在实际开发中应用这些机制来提高代码的稳定性和用户的体验。

    JavaScript多种页面刷新方法小结

    JavaScript页面刷新方法小结部分还提供了一些其他页面刷新的手段,包括但不限于: - history.go(0):类似按F5刷新当前页面。 - location=location或location.assign(location):这两种写法等同于调用location.reload...

    js 页面刷新location.reload和location.replace的区别小结

    标题中提到的“js页面刷新location.reload和location.replace的区别小结”,涉及的是JavaScript中页面刷新操作的两种不同方法:location.reload和location.replace。这两种方法都可以实现页面的刷新功能,但具体的...

    ArcGIS.for.JavaScript.developers.by.Example.2016.4.pdf

    #### 小结 《ArcGIS for JavaScript Developers by Example》为希望使用ArcGIS JavaScript API开发Web GIS应用的开发者们提供了一个全面而实用的指南。无论你是初学者还是有一定经验的开发者,都能从中获得有价值的...

Global site tag (gtag.js) - Google Analytics