js学习笔记之事件处理模型_基础知识

在各种浏览器中存在四种事件模型:原始事件模型、标准事件模型、IE事件模型,还有一种Netscape4事件模型,下面具体介绍一下。

1、目前共存在四种事件处理模型分别是:原始事件模型、标准事件模型、IE事件模型,还有一种Netscape4事件模型,但基本可忽略

2、事件处理模型又可以分为基本事件处理和高级事件处理两种,原始事件模型属于基本事件处理,标准事件模型和IE事件模型属于高级事件处理

一、基本事件处理:

基本事件处理主要是指原始事件模型实现的事件处理。其主要分为以下两种:

(1)、作为HTML标签性质的事件处理,比如 <div onmouseover=”var a=1; alert();”>……</div>           //在这里,onmouseover只是一个代表,还包含其他很多事件

在这种方式中,赋给onmouseover等事件处理函数的是JS代码串,系统会把这些代码串自动包装在一个匿名函数中。其中可以有this关键字,它指向的是这个标签元素,也可以有event关键字,它表示的是事件发生时的事件对象(用在标准浏览器中)。如<div onmouseover=”f(this,event);”>……</div>

 其实我们可以把onmouseover等看成是一个函数,在没给它赋值前,它就是一个空函数。给它赋了js代码后,就相当于往空函数里添加了代码。因为onmouseover等其实是一个函数,所以我们可以显示的调用它,例如 element.onmouseover(),但这样并不会引起mouseover事件的真正发生。

可以给事件函数(即onmoouseover等)返回false来举止默认动作的发生。

函数是运行在定义它的作用域中,因此如果给事件处理函数赋值js代码,就相当于是在这个HTML标签环境中定义了一个函数,这种环境比较特殊,它的高一级的作用域并不是window全局对象环境,在这两者之间还相隔这至少一种作用域环境。而在<script>中定义的函数,它的高一级作用域环境就是window(当然嵌套函数又要另当别论)。所以,在HTML标签中,最好把代码放在一个在<script>中定义的函数里,然后再把这个函数调用赋给事件函数,即<div onmouseover=“function();”>……</div>

(2)、作为javascript属性的事件处理    比如element.onmouseover=function(){……}

注意在这种方式,不能再给事件处理函数赋值js代码串了,而是直接把函数(不是函数调用)赋给它,或是赋一个匿名函数,如 element.onmouseover=function(){……}  或    element.onmouseover=f; f为一个函数,在这里不能加上括号

基本事件处理也会以冒泡的形式向上传播

 二、高级事件处理:

高级事件处理只要是指标准事件模型和IE事件模型实现的事件处理。

【概念理解】 事件的传播可分两种:一种是捕获传播,一种是冒泡传播。

捕获传播:即事件从外传到里,每一级都发生了该事件

冒泡传播;即事件从里传到外,每一级都发生了该事件,并不是所有的事件都会冒泡

(1)标准事件模型

标准事件模型既能发生冒泡传播也能发生捕获传播。

【 事件注册函数】

addEventListener() 该方法为特定元素注册事件处理程序,有三个参数,第一个参数是事件名,注意没有前缀on,第二个是处理函数(当然也可以是匿名函数),事件发生时,系统会自动给该函数的第一个参数传入一个Event对象。最后一个参数是布尔值,如果为true,则只用于事件捕获传播阶段,如果为false则只用于事件冒泡传播阶段,一般我们把它设为false

例如:element.addEventListener(“click”,f,false)    //其中f为一个函数

f函数可以这样定义:function f(e){……}  //其中的参数在事件发生时就代表Event对象

高级事件处理的一大优势是可以给同一个元素注册多个事件处理函数,这些事件函数执行的顺序并不能确定,但一般来说是按注册的先后顺序来执行,如果注册了重复的事件函数,则只有第一个会生效。

removeEventListener() 该方法用来解除事件注册,它的三个参数与addEventListener() 相同

 (2)IE事件模型

 IE事件模型只支持事件冒泡传播

【 事件注册函数】

attacthEvent()  该方法只有2个参数,一个为事件名,注意有前缀on,第二个为事件处理函数。例如 element.attachEvent(“onclick”,f)

 IE事件模型的Event对象并不是作为事件发生时做为参数传入事件处理函数的,IE的Event对象是一个window的全局对象,只有在事件发生时才可以访问。

所以f函数可以这样定义:  function f(){var e=window.event;……}   //其中e就取得了Event对象

detachEvent()  该方法用来取消事件注册,参数与attacthEvent()  相同

 addEventListener() 与attacthEvent()  的一个重要差别是attacthEvent()注册的事件处理函数中的this关键字永远是指向window对象的,而addEventListener() 注册的事件处理函数中的this指向的是发生了事件的元素

 (3)、IE与标准事件模型的Event对象比较


IE 事件对象


IE事件对象


标准事件对象


标准事件对象


altKey


true表示按下了ALT键,false表示没有


altKey


true表示按下了ALT键。false表示没有


ctrlKey


true表示按下了CTRL键,false表示没有


ctrlKey


true表示按下了CTRL键,false表示没有


shiftKey


true表示按下了SHIFT键,false表示没有


shiftKey


true表示按下了SHIFT键,false表示没有


button

鼠标事件。0表示没有按下鼠标键,1为按下左键,2为按下右键,4为中间键,3为同时按下左右键,5为按下左键和中键,6为按下右键和中键,7为按下左键、中键、右键
button

0为左键,1为中键,2为右键

clientX

事件发生时,鼠标在浏览器窗口(不包含工具栏、滚动条等)的X坐标
clientX

事件发生时,鼠标在浏览器窗口(不包含工具栏、滚动条等)的X坐标

clientY


同上


clientY


同上


screenX


事件发生时,鼠标在整个屏幕上的X坐标


screenX


事件发生时,鼠标在整个屏幕上的X坐标


screenY


同上


screenY


同上


type


事件的名称(如click)


type


事件的名称(如click)


srcElement


引起事件的元素


target


引起事件的元素


keyCode

对于keypress事件,表示按钮的unicode字符,对于keydown和keyup事件则表示按钮的数字代码
charCode


表示按键的Unicode字符

   
keyCode


表示按键的数字代码


cancelBubble


值为true时将阻止事件继续向上冒泡


stopPropagation


可以调用这个方法来阻止事件继续向上冒泡

   
cancelBubble


true表示事件冒泡已被取消,false表示没有


returnValue


值为false时将会阻止事件的默认行为


preventDefault()


调用该方法可以阻止事件的默认行为


   offsetX

获取事件发生时鼠标相对于引起事件的元素的X坐标,即以引起事件的元素的本身(不用计算padding和margin)的左上角为原点
layerX

        当引发事件的元素没有动态定位时,返回鼠标相对于引发事件的元素的最近的一个设置了动态定位的父元素里的X坐标,以其父元素的边框的左上角为原点。
        当引发事件的元素设置了动态定位后,则返回鼠标相对于引发事件的元素的X坐标,以该元素边界的左上角为原点。

x

获取鼠标相对于引发事件的元素的最近一个设置了动态定位的父元素的X坐标,以该父元素的边框i的坐上角为原点    
时间: 2024-10-30 06:38:17

js学习笔记之事件处理模型_基础知识的相关文章

js宝典学习笔记(上)_基础知识

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

js学习之----深入理解闭包_基础知识

闭包算是js里面比较不容易理解的点,尤其是对于没有编程基础的人来说. 其实闭包要注意的就那么几条,如果你都明白了那么征服它并不是什么难事儿.下面就让我们来谈一谈闭包的一些基本原理.  闭包的概念 一个闭包就是一个函数和被创建的函数中的作用域对象的组合.(作用域对象下面会说) 通俗一点的就是 " 只要一个函数中嵌套了一个或多个函数,那么我们就可以称它们构成了闭包. " 类似这样: function A() { var i = 5; return function() { console.

Javascript学习笔记一 之 数据类型_基础知识

一.数据类型 Javascript是一种弱类型的脚本语言,它一共有6种数据类型,又被分为基础数据类型,特殊数据类型,复合数据类型. 1.基础数据类型:数值型,字符串型,布尔型 2.特殊数据类型:null,undefined(区别在于null需要显性赋值,而undefined表示没有赋值) 3.复合(引用)数据类型:Object(数组是特殊的对象) 注:理解基础数据类型和引用数据类型的区别.如函数参数传递 二. 包装类和基础数据类型的关系 对于基础数据类型,都有相应的包装类(Object对象)与之

JavaScript学习笔记之内置对象_基础知识

JS Window 窗口对象:http://www.w3school.com.cn/js/js_window.asp 所有浏览器都支持window对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为window对象的成员. 窗口对象的属性和方法格式: [window.]属性 [window.]方法(参数) 甚至 HTML DOM 的 document 也是 window 对象的属性之一: window.document.getElementById("heade

JavaScript学习笔记之Cookie对象_基础知识

JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt 有两种类型的cookie: (1)持久性cookie,会被存储到客户端的硬盘上. (2)会话Cookie:不

JavaScript学习笔记之Function对象_基础知识

在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念. 例子: 复制代码 代码如下: <html>        <head>               <script type="text/javascript">               function add(number)               {                     alert(n

javascript学习笔记(十一) 正则表达式介绍_基础知识

1.修饰符 . 任意一个字符 * 匹配*前面0个或多个字符 + 匹配+前面一个或多个字符 ? 匹配?前面0个或1个字符 ^ 以^后面的字符为前导 $ 以$前面的字符结尾 [] 匹配[]内的一个字符 () 分组,可以用\1 \2提取 [^] 匹配^后的以外的字符 {n} {n}前的字符有n个,n为正数 {n,} {n,}前的字符至少有n个,n为正数 {n,m} {n,m}前的字符有n~m个,n,m为正数 2.字符 \d 一个数字 \D 一个非数字 \w 一个字母或数字 \W 一个非字母和非数字 \

JavaScript 学习笔记(十一)_基础知识

document对象 下表列出了BOM的document对象的一些通用属性: 属    性 说    明 alinkColor 激活的链接的颜色,如<body alink="color">定义的* bgColor 页面的背景颜色,如<body bgcolor="color">定义的* fgColor 页面的文本颜色,如<body text="color">定义的* lastModified 最后修改页面的日期,

浅析JS操作DOM的一些常用方法_基础知识

getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.