当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

浅谈JavaScript中的事件模型

发表于: 2015-04-20   作者:357029540   来源:转载   浏览:
摘要: 事件模型(DOM)是指处理事件的方式,在JavaScript中由于对事件模型的支持方式不同,主要分为非DOM浏览器(主要代表是IE浏览器)和DOM浏览器(主要代表是火狐浏览器等)。 在一个相同事件由不同元素实现时,就形成了事件流,即事件的执行顺序。事件的执行顺序分为冒泡技术和事件捕获技术。冒泡技术是主要针对IE的解决方案,其基本思想是事件从事件的发生目标最内部开始触发,向上触发到最外部,它是
事件模型(DOM)是指处理事件的方式,在JavaScript中由于对事件模型的支持方式不同,主要分为非DOM浏览器(主要代表是IE浏览器)和DOM浏览器(主要代表是火狐浏览器等)。

在一个相同事件由不同元素实现时,就形成了事件流,即事件的执行顺序。事件的执行顺序分为冒泡技术和事件捕获技术。冒泡技术是主要针对IE的解决方案,其基本思想是事件从事件的发生目标最内部开始触发,向上触发到最外部,它是沿着DOM层次向上冒泡,直到顶部,所谓的DOM层次是指最内部元素开始,依次向上到达它的父层,直到最顶部的父层元素;事件捕获技术刚好与冒泡技术相反;DOM即支持冒泡技术,又支持事件捕获技术,但是事件捕获先于冒泡捕获发生。

  事件处理程序即监听器分为传统事件处理程序和现代事件处理程序。传统事件处理程序被所有浏览器所支持,但是不能为某一个事件添加多个处理方法,而现代处理程序在不同的浏览器有不同的实现方式。在使用已有的函数时必须注意在绑定事件处理程序到事件属性时,只能引用函数的名称,后面不能加括号,同时必须确保在HTML元素被添加到DOM之前,登记事件处理程序。在现代事件处理程序中,必须区分好IE浏览器和DOM浏览器的使用,在IE浏览器中,每个元素和window对象有两个方法:attachEvent()和detachEvent(),其语法格式为[Object].attachEvent(“事件处理程序的名称”,函数),[Object].detachEvent(“事件处理程序的名称”,函数),这里的事件处理程序名称前必须加上on;DOM浏览器中是通过addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。其语法为[Object].addEventListener(“事件名称”,函数名,bCapture);[Object].removeEventListener(“事件名称”,函数名,bCapture),第三个参数是用于程序是处理在捕获阶段(参数为true)还是在冒泡阶段(参数为false)。

  在IE中Event对象是window对象的一个属性,因此事件处理程序访问event对象的方式为var oEvent =window.event;它只有在事件发生时才可以访问。判断浏览器是IE还是DOM浏览器的方式是: functionbrowserType (oEvent){ if(window.event) { }  elseif(oEvent){} }

IE的event和DOM的event的相同点:获取事件类型(var sType =oEvent.type;)、获取键盘代码(var iKeyCode =oEvent.keyCode;)、检测Shift,Alt,Ctrl(var bShift = oEvent.shiftKey;varbAlt = oEvent.altKey; var bCtrl = oEvent.ctrlKey;)、获取客服区坐标(variClientX = oEvent.clientX;var iClientY =oEvent.clientY;)、获取屏幕坐标(var iScreenX = oEvent.screenX;var iScreenY= oEvent.screenY;);不同点:IE获取目标 var oTarget =oEvent.srcElement;DOM为var oTarget = oEvent.target;获取字符码:IE:variCharCode = oEvent.keyCode;DOM:var iCharCode =oEvent.charCode;阻止事件的默认行为:IE:oEvent.retrunValue =false;DOM:oEvent.preventDefault();中止事件传播:IE:oEvent.cancelBubble =true;DOM:oEvent.stopPropagation();

  在JavaScript中DOM定义了三个事件类型:鼠标事件、键盘事件和HTML事件。鼠标事件包括:单击鼠标click、双击鼠标dblclick、按下任意鼠标按钮mousedown、将鼠标移出元素边界mouseout、将鼠标移到元素上mouseover、释放鼠标按钮mouseup、在一个元素上重复发生mousemove;键盘事件包括:在键盘上按下键时keydown、在键盘下按下一个字符键keypress、释放一个按键keyup;HTML事件包括:所有的东西被全部装载时load、全部页面被卸载unload、用户中止装载进程前而它没有被全部装载时abort、对象不能被装载error、用户触发select事件的select、值被改变时change、按钮被点击时submit、点击重置按钮reset、窗口大小被调整时resize、滚动有滚动条的任何元素是scroll、获得焦点时focus、失去焦点时blur。

浅谈JavaScript中的事件模型

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
引言   Html页面与JavaScript之间的交互是通过事件来完成的。事件,就是文档或者浏览器窗口中发生
1.javascript中为元素添加事件处理程序的方法 有以下几种方式,可以为javascript元素添加事件处理程
Javascript里的事件模型分为2个:捕获模型和冒泡模型。关于这2个模型的文章网上有很多,总结起来就
Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的
JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单
以前写 android ,对事件的处理没有太深入,只是简单的 onTouchEvent 就 ok 了,现在写的 UI ,很多
以前写 android ,对事件的处理没有太深入,只是简单的 onTouchEvent 就 ok 了,现在写的 UI ,很多
引言   对于正则表达式我想作为程序员肯定使用过它,那天书般的表达方式,我用一次就记住它了。这
说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素
说明:Car为一个function类,Car1 Car2为Car的两个实例。 当在一个对象里搜索属性时,首先在对象本
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号