javascript事件模型介绍


Posted in Javascript onMay 31, 2016

一、原始事件模型

其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)"

事件程序的注册可以以下几种方式:

1、JS代码作为HTML性质值

<input type="button" value="Press me" onclick="alert('thanks');"

2、事件处理程序作为JS属性

附注:文档中的每个HTML元素在文档树中都有一个相应的JS对象,这个JS对象的属性对应于那个HTML元素的性质,无论作为HTML性质的JS代码还是作为JS属性的时间处理程序,其本身的属性都是函数"function".

<form name="f1">

<input name="b1" type="button" value="Press Me"/>

</form>

第一种赋值方式:

document.f1.b1.onclick=function(){alert('thanks');};

第二种赋值方式:

function plead(){window.status="Please Press Me!";}

document.f1.bi.onmouseover=plead;

作为JS属性的事件处理程序可以用JS属性显式调用

document.myfrom.onsubmit();

事件处理程序可以返回fale来阻止浏览器执行事件的默认动作,常用的如对onsubmit的操作。例外是
对超链接mouseover的window.status显示事件的阻挡,是返回true.例如:

<a href="help.htm" onmouseover="window.status='help';return true;">help</a>

二、DOM2事件模型

这个模型参考了IE的气泡模型而制定的,它是由w3c制定的规范.在原始模型中事件一旦发生就直接调用事件句柄,没有其它的事件传播过程.而在DOM2模型中事件有一个特殊的传播过程,分为三个阶段:

(1)capturing phase:事件被从document一直向下传播到目标元素,在这过程中如果有哪个祖先元素对该事件感兴趣可以注册自己的处理函数.

(2)target phase:事件到达目标元素,执行目标元素的事件处理函数.

(3)bubbling phase:事件从目标元素上升一直到达document,虽然所有的事件类型都会经历captruing phase阶段但是只有部分事件会经历bubbling phase阶段,例如submit事件就不会被上浮.
在整个的事件传播过程中可以调用event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为.

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

三、IE模型

IE模型也提供了一个event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.

事件处理函数的注册和删除是通过元素的attachEvent("eventType","handler") and detachEvent("eventType","handler" ),与dom2不同的是eventType有on前缀

特点:
1、传播过程只起泡,不捕捉。起泡中断方法:
window.ecent.cancelBubble=true;
2、Event对象不是事件处理程序的函数参数,而是window的全局变量。
3、事件注册函数:attachEvent()和反注册:detachEvent().  

四、Netscape4事件模型

由于Netscape好像已经完全停止开发,所以就不详述了,简单的说:就是只捕捉不起泡。

以上就是javascript事件模型基本的介绍,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 #Javascript
javascript事件处理模型实例说明
May 31 #Javascript
jQuery基础知识点总结(必看)
May 31 #Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 #Javascript
javascript小数精度丢失的完美解决方法
May 31 #Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 #Javascript
javascript基本语法
May 31 #Javascript
You might like
给php新手谈谈我的学习心得
2007/02/25 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python代码xml转txt实例
2020/03/10 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Why do we need Unit test
2013/01/03 面试题
小学竞选班干部演讲稿
2014/08/20 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
导游词之崇武古城
2019/10/07 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP