三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型;

不同点:

  事件程序的注册(给HTML元素所对应的JS对象绑定事件)

  事件传播的过程

事件模型的注册:

  一、原始事件模型(没有兼容性问题)

原始事件模型的特点:

事件类型上面有ON(onclick)

没有事件的传播(事件一旦发生就立刻调用事件句柄)

一个DOM对象只能注册一个类型的事件,如果注册了两个,则会发生覆盖,只执行后一个事件;

注册:

 1、将JS代码作为HTML的性质(也就是直接在标签中将HTML元素的性质设置为一段代码)

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

 2、将事件处理程序作为js对象的属性

<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;
(注意没有括号) 或者

显示调用:document.myfrom.onsubmit();


解除:

将null复制给事件函数:

document.getElementById('click'_).onclick = null;

浏览器可以对每个事件执行默认的动作:

–submit按钮默认行为是提交表单。

–超链接的默认行为是向指定资源发起请求。
-reset按钮默认行为是重置。。
-click单选按钮或复选框点击设置。
-keydown用户按下按钮。
-mousedown鼠标按下。
阻止默认动作:
事件处理程序可以通过返回false来阻止浏览器的默认行为

特例:对超链接mouseover的window.status显示事件的阻挡,是返回true

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

 

二:DOM2级(IE8以下不支持)

主要特点:有一个事件的传播过程


事件捕获:事件由document对象一直向下捕捉到目标元素

事件执行:目标对象的事件处理程序执行

事件冒泡:事件从目标元素上升到document

所有事件类型都会经历第一阶段,有的事件不会经历第三阶段(submit)

特点二:

一个dom对象可以注册多个相同类型的事件,不会发生事件的覆盖,会依次的执行各个事件函数。

eg:定义两个盒子,outer包含inner,给inner可绑定两个click事件,添加false表明在冒泡阶段调用函数,则先执行inner的click函数,再执行outer的click函数。

因为点击了里面的div后事件会经历三个阶段(document——outer——inner——document)

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
<div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
var click = document.getElementById('inner');
click.addEventListener('click',function(){
alert('click one');
},false);
click.addEventListener('click',function(){
alert('click two');
},false);
</script>

注册:

[object].addEventListener('事件名称',方法名(函数),事件模型(true/false))

解除:

[object].removeEventListener('事件名称',方法名(函数),事件模型(true/false))

 true/false决定在那个阶段调用函数

true:捕获

false:冒泡

停止传播:event.stopPropagation()

如果我们给outer和inner都注册了click事件但是我不希望outer执行怎么办呢?

<script>
var click = document.getElementById('inner');
var clickouter = document.getElementById('outer');
click.addEventListener('click',function(event){
alert('inner show');
event.stopPropagation();
},false);
clickouter.addEventListener('click',function(){
alert('outer show');
},false);
</script>

阻止默认动作:event.preventDefault()

由于事件捕获阶段没有可以阻止事件的函数,所以一般都是设置为事件冒泡。

三、IE模型

特点:Event对象不是事件处理程序的函数参数,而是window的全局变量

事件对象event:事件发生时产生的对象。封装了跟事件相关的信息。

–鼠标信息
–键盘信息
  IE得到的事件对象

div1.onclick = function(){

var e = window.event;

}

  DOM得到事件对象

div1.onclick = function(ev){

var e = ev;

}

事件传播过程只有冒泡阶段

注册:

[object].attachEvent("onclick",click1)

解除:

[object].detachEvent("onclick",click1)

停止传播:window.ecent.cancelBubble=true;

event属性和方法

Dom和IE的event相同点。
–获取事件类型:e.type
–获取键盘码:keydown/keyup
–检测是否按下e.shiftKey,e.altKey,e.ctrlKey
–获取客户坐标:e.clientX,e.clientY
–获取屏幕坐标:e.screenX,e.screenY
Dom和IE的event不相同点。

IE                                                            DOM

获取事件源

e.srcElement

e.target

获取字符码

e.keyCode

e.charCode

阻止默认行为

e.returnValue=false

e.preventDefault()

中止冒泡传播

e.cancelBubble=true

e.stopPropagation()

 
 
获取事件源对象:

div1.onclick = function(e){

var ev = window.event||e;//获取事件对象

var srcObj = ev.srcElement||ev.target;

}

 
事件类型
 
鼠标事件
常见事件
–click  点击
–dbclick  双击
–mousedown  鼠标按下时
–mouseout  当光标在一个元素上,并且用户将其移出元素边界时
–mouseover 鼠标移入时
–mouseup 释放鼠标按钮时
–mousemove  当光标在你一个元素上时 重复发生
页面上所有元素均支持鼠标事件。
 
键盘事件
常见事件
–keydown  当用户在键盘上按下一个键时发生,如果用户按键不放,就会重复发生
–keypress  当用户在键盘上按下一个字符键(不包括shift和Alt键等)时发生,如果用户按键不放,也会重复发生
–keyup   当用户释放一个键时发生
通常在输入框上实现键盘事件。
返回false表示不响应该事件
事件发生顺序
–字符键:keydown,keypress,keyup
–非字符键:keydown,keyup
HTML事件
常见事件
–load,unload
–select
–change  失去焦点并且值被改变
–submit
–reset 
–resize 窗口或框架尺寸调整
–scroll 有滚动条时
–focus  获得焦点
–blur  失去焦点
 
 
兼容性问题:

div1.onclick = function(ev){

var e = windo.event||ev;

}

function myaddEvent(obj,event,fn){//对象 ,事件,函数,
if(document.all){
obj.attachEvent('on'+event,fn);
}else{
obj.addEventListener(event,fn);//第三个参数默认为false(冒泡)
}
}
 
 
 

JS事件模型小结的更多相关文章

  1. js 事件模型详解

    把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...

  2. js事件模型与自定义事件

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...

  3. js 事件模型

    说到事件,就要追溯到网景与微软的“浏览器大战”了.当时,事件模型还没有标准,两家公司的实现就是事实标准.网景在Navigator中实现了“事件捕获”的事件系统,而微软则在IE中实现了一个基本上相反的事 ...

  4. js事件模型

    连接在此 http://www.cnblogs.com/zqstc/archive/2009/11/26/1611464.html

  5. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  6. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. JS事件流模型

    JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式. 事件冒泡E ...

  8. js实现事件模型bind与trigger

    function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Em ...

  9. js二级事件模型的处理细节

    一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...

随机推荐

  1. asp.net mvc 5 web api 关于Requested resource does not support options 问题

    1.用visual studio 2015 建立一个 web api 应用程序.记住这是一个 web api 应用. 2.新建一个web api . 3.用C#访问,代码如下:[没有问题,返回正确] ...

  2. mysql 几个命令

    show databases; 显示所有数据库 create database 数据库名; 创建数据库 drop database 数据库名; 删除数据库

  3. cmd光标移动

    ESC:清除当前命令行.F1: 单字符输出上次输入的命令 相当于方向键上的 → 的作用.F2: 可复制字符数量 , 输入上次命令中含有的字符,系统自动删除此字符后的内容.F3: 重新输入前一次输入的命 ...

  4. nodejs的安装与配置

    最近做了一个项目,想基于NodeJS来完成,但是由于对NodeJS不熟悉,所以在网上查资料进行安装,以下做对关键信息做一下笔记本,具体如何安装,就不做说明了,如果需要查看的,请自行Goolge或bai ...

  5. Java多线程开发系列之三:线程这一辈子(线程的生命周期)

    前文中已经提到了,关于多线程的基础知识和多线程的创建.但是如果想要很好的管理多线程,一定要对线程的生命周期有一个整体概念.本节即对线程的一生进行介绍,让大家对线程的各个时段的状态有一定了解. 线程的一 ...

  6. 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景

    IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...

  7. [Phalcon] DI默认的服务

    代码,说明一切 namespace Phalcon\Di\FactoryDefault; use Phalcon\Di\Service; use Phalcon\Di\FactoryDefault; ...

  8. MongoDB - 在Windows上安装

    1 下载MongoDB社区版, 下载链接 http://www.mongodb.org/downloads?_ga=1.129742796.1997610832.1481940266 2 安装Mong ...

  9. WEB进度条控件

    近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色 ...

  10. 无法打开键: UNKNOWN\Components\BE1FB738077DBE490AF18C3B9B1A1EE8\E5F5286B58B542741A00A0A9AA420B27

    MSI (s) (D8:38) [07:38:20:634]: 产品: Microsoft SQL Server VSS 编写器 -- 错误 1402.无法打开键: UNKNOWN\Component ...