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 动态加载脚本的4种方法
May 05 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Selenium控制浏览器常见操作示例
2018/08/13 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
编写strcpy函数
2014/06/24 面试题
服装厂厂长职责
2013/12/16 职场文书
区三好学生主要事迹
2014/01/30 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
志愿者个人总结
2015/03/03 职场文书
小学班级口号大全
2015/12/25 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
PHP正则表达式之RCEService回溯
2022/04/11 PHP