三种事件模型:原始事件模型(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. Java实现冒泡排序

    冒泡排序思想就是将数列的相邻两个数比较,较大的数往后保存,小的数往前. package Sort; import java.util.Arrays; public class BubbleSort { ...

  2. https 与http 的坑

    网页报这种错误: (blocked:mixed-content) 使用了https就不能夹生http       jquery.min.js:4Mixed Content: The page at ' ...

  3. 灵活运用SQL Server SSIS变量

    在SSIS开发ETL(Extract-Transform-Load),数据抽取.转换.装载的过程.我们需要自己定义变量 一.SSIS变量简介 SSIS(SQL Server Integration S ...

  4. ssh+expect批量分发

    Expect安装 [root@web02 scripts]# yum install expect SSH密钥生成 [root@web02 scripts]# ssh-keygen -t dsa   ...

  5. AjaxStudyNote

    AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...

  6. form提交的几种方法

    一. form表单中有 type是submit类型的button,点击 submit,从而会post数据,引发回传. <form action="?" name=" ...

  7. .net 事务处理的三种方法

    方法1:直接写入到sql 中 在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRANS 实现 begin trans declare@orderDetail ...

  8. LDD3 字符设备驱动简单分析

    最近在看LDD3,理解了一下,为了加深自己的印象,自己梳理一下.我用的CentOS release 6.6 (Final)系统. 一.编写编译内核模块的Makefile 以下是我用的Makefile ...

  9. linux下使用远程图形界面

    1. 用xrdp的方式(客户端就是windows下的远程桌面程序) http://jingyan.baidu.com/article/d3b74d64bdab5d1f76e60951.html 2. ...

  10. .net(C#)中结构和类的区别

    static void Main(string[] args) { //类型 //结构:值类型 //类:引用类型 //声明的语法:class struct //在类中,构造函数里,既可以给字段赋值,也 ...