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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
基于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取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jqTransform美化表单
2015/10/10 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
javascript回调函数详解
2018/02/06 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python3生成随机数实例
2014/10/20 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python3中eval函数用法使用简介
2019/08/02 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
应用艺术毕业生的自我评价
2013/12/04 职场文书
无故旷工检讨书
2014/01/26 职场文书
学生会竞聘书范文
2014/03/31 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2019新员工心得体会
2019/06/25 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android