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 相关文章推荐
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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中将网址转换为超链接的函数
2011/09/02 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Python基本语法经典教程
2016/03/11 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
Python urllib3软件包的使用说明
2020/11/18 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
《第一次抱母亲》教学反思
2014/04/16 职场文书
匿名信格式范文
2015/05/27 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers