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的坐上角为原点    

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js模式化窗口问题![window.dialogArguments]

    前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上! 详细问题描述: 在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项] 最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决 1.弹出窗口几种方法: a.window.open(pageURL,name,parameters); b.window.show

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • JS给Array添加是否包含字符串的简单方法

    JS的Array类型,本身并没有是否包含某个字符串的方法,下面的代码实现了此功能,有需要的同学可以看一下: Array.prototype.contains = function(v){ var b = false; for(var i=0;i<this.length;i++){ if(this[i] == v){ b = true; break; } } return b; }; 以上就是小编为大家带来的JS给Array添加是否包含字符串的简单方法全部内容了,希望大家多多支持我们~

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • 浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处

    [JS对象属性的查询和设置] 可以通过点(.) 或 方括号([]) 运算符来获取属性的值.运算符左侧应当是一个表达式,它返回一个对象.对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于方括号([])来说,方括号里必须是一个计算结果为字符串的表达式,这个字符串就是属性的名字: <script type="text/javascript"> var author = book.author; //得到book的"author"属性 var na

  • Javascript 动态改变imput type属性

    Javascript 动态改变imput type属性: 代码实现: <script type="text/javascript"> function shoppw(thebox){ var ps = document.getElementById('ps'); var pass = document.getElementById('pass'); ps.removeChild(pass); var psImput = document.createElement(&quo

  • jsp 网站引入外部css或者js失效问题解决

    最近做项目,完成项目经理布置的任务,开始入门java web,但在开发过程中遇到过许许多多的问题,但是令我最头痛的还是导入外部css一直失效,困扰许久才找出原因. 路径问题 css或者js导入失效最有可能的原因就是路径错误,这里我给出我的网站目录结构,大家可以参考下. 导入css代码: <link rel="stylesheet" type="text/css" href="css/login.css"> 记得jsp头部需要设置相对路

  • 原生js代码实现图片放大境效果

    今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE

  • 浅谈js继承的实现及公有、私有、静态方法的书写

    今天没事的时候,研究了一下JS继承的实现,下面是html的源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承的实现</title> <script type="text/JavaScript"> //定义父类及公有.私有.静态属性及方法 function parent(){ var pname

  • python 把数据 json格式输出的实例代码

    有个要求需要在python的标准输出时候显示json格式数据,如果缩进显示查看数据效果会很好,这里使用json的包会有很多操作 import json date = {u'versions': [{u'status': u'CURRENT', u'id': u'v2.3', u'links': [{u'href': u'http://controller:9292/v2/', u'rel': u'self'}]}, {u'status': u'SUPPORTED', u'id': u'v2.2'

随机推荐