现在的位置: 首页 > 操作系统 > 正文

JavaScript的事件机制

2020年02月10日 操作系统 ⁄ 共 2439字 ⁄ 字号 评论关闭

摘要

事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要。本文将详细介绍JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象


如何理解事件?

JavaScript与HTML之间的交互就是通过事件实现的。事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间。事件处理程序:又称事件侦听器,事件发生时执行的代码段。


事件流

事件流描述的是从页面中接收事件的顺序

两种基本事件模型

    事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

    事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确。

    IE9、Safari、Chrome、Opera、Firefox都是从window对象开始捕获,冒泡到window对象

DOM事件流

同时支持 两种基本事件模型,规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

DOM事件处理程序绑定时,程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。

IE事件流

IE只支持事件冒泡,不支持事件捕获。


事件处理程序绑定方式

DOM事件处理程序

事件处理程序属性名为“on”+事件名程序作用域为元素的作用域,this指向元素本身

    方法一:将函数值赋给一个事件处理程序属性。如下

    var btn=document.getElementById("myBtn");btn.onclick=function(){//具体代码段}

    此种方法只能添加一个事件处理程序

    方法一:通过addEventListener()方法。如下

    addEventListener("事件名",事件处理程序,ture/false:在事件捕获/冒泡阶段调用模型)

    对应的事件处理程序移除方法:removeEventListener(),参数必须相同。注意:此种方法,以匿名函数添加的事件处理程序无法被移除此方法可以添加多个事件处理程序

IE事件处理程序

IE+Oprea浏览器

程序作用域为全局作用域,this指向window对象添加方法:attachEvent("on+事件名",事件处理程序)移除方法:detachEvent("on+事件名",事件处理程序)


事件对象

在触发某个事件时,会产生一个相应的事件对象,这个对象包含所有与事件相关的信息。如:导致事件的元素、事件的类型等

DOM中的事件对象

    对象名:event常用属性:

type:被触发事件的类型target:事件的目标

    常用方法:

event.preventDefault():取消事件默认行为(前提:cancelable属性值为true)event.stopPropagation():取消事件的进一步冒泡或捕获

IE中的事件对象

    对象名:window.event常用属性:

type:被触发事件的类型scrElement:事件的目标

    常用方法:

event.cancelBubble(true/false):true->取消事件默认行为event.returnValue(true/false):false->取消事件的进一步冒泡或捕获


可跨浏览器的事件处理程序

构造EventUtil对象,为其添加可兼容各浏览器的事件处理方法

var =EventUtil{ //添加事件处理程序// addHandler:function(element,type,handler){ if(element.addEventListener){ addEventListener(type,handler,false); }else if(element.attachEvent){ attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } } //移除事件处理程序// removeHandler:function(element,type,handler){ if(element.removeEventListener){ removeEventListener(type,handler,false); }else if(element.detachEvent){ detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } //获得事件对象// getEvent:function(event){ return event ? event : window.event; } //获得事件的目标// getTarget:function(event){ return event.target || event.scrElement; } //取消事件的默认行为// preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returValue=false; } } //阻止事件进一步冒泡// stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }}

本文永久更新链接地址:http://www.xuebuyuan.com/Linux/2017-01/139552.htm

以上就上有关JavaScript的事件机制的相关介绍,要了解更多JavaScript事件机制,JavaScript事件,JavaScript的事件机制,编程,Linux编程,Linux Shell,Android,Android教程,JAVA,C语言,Python,HTML5内容请登录学步园。

抱歉!评论已关闭.