js学习笔记之事件处理模型


Posted in Javascript onOctober 31, 2016

在各种浏览器中存在四种事件模型:原始事件模型、标准事件模型、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的坐上角为原点    

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

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
Vue Router的手写实现方法实现
Mar 02 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 #Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 #Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 #Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 #Javascript
jQuery grep()方法详解及实例代码
Oct 30 #Javascript
webix+springmvc session超时跳转登录页面
Oct 30 #Javascript
js获取时间函数及扩展函数的方法
Oct 30 #Javascript
You might like
基于php split()函数的用法详解
2013/06/05 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python开发之字符串string操作方法实例详解
2015/11/12 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
彻底搞懂Python字符编码
2018/01/23 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
员工激励培训演讲稿
2014/09/16 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
论文评审意见
2015/06/05 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript