JS事件模型小结
三种事件模型:原始事件模型(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按钮默认行为是提交表单。
特例:对超链接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:事件发生时产生的对象。封装了跟事件相关的信息。
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属性和方法
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;
}
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事件模型小结的更多相关文章
- js 事件模型详解
把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...
- js事件模型与自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...
- js 事件模型
说到事件,就要追溯到网景与微软的“浏览器大战”了.当时,事件模型还没有标准,两家公司的实现就是事实标准.网景在Navigator中实现了“事件捕获”的事件系统,而微软则在IE中实现了一个基本上相反的事 ...
- js事件模型
连接在此 http://www.cnblogs.com/zqstc/archive/2009/11/26/1611464.html
- JS的事件模型
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- JS事件流模型
JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式. 事件冒泡E ...
- js实现事件模型bind与trigger
function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Em ...
- js二级事件模型的处理细节
一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...
随机推荐
- Java实现冒泡排序
冒泡排序思想就是将数列的相邻两个数比较,较大的数往后保存,小的数往前. package Sort; import java.util.Arrays; public class BubbleSort { ...
- https 与http 的坑
网页报这种错误: (blocked:mixed-content) 使用了https就不能夹生http jquery.min.js:4Mixed Content: The page at ' ...
- 灵活运用SQL Server SSIS变量
在SSIS开发ETL(Extract-Transform-Load),数据抽取.转换.装载的过程.我们需要自己定义变量 一.SSIS变量简介 SSIS(SQL Server Integration S ...
- ssh+expect批量分发
Expect安装 [root@web02 scripts]# yum install expect SSH密钥生成 [root@web02 scripts]# ssh-keygen -t dsa ...
- AjaxStudyNote
AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...
- form提交的几种方法
一. form表单中有 type是submit类型的button,点击 submit,从而会post数据,引发回传. <form action="?" name=" ...
- .net 事务处理的三种方法
方法1:直接写入到sql 中 在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRANS 实现 begin trans declare@orderDetail ...
- LDD3 字符设备驱动简单分析
最近在看LDD3,理解了一下,为了加深自己的印象,自己梳理一下.我用的CentOS release 6.6 (Final)系统. 一.编写编译内核模块的Makefile 以下是我用的Makefile ...
- linux下使用远程图形界面
1. 用xrdp的方式(客户端就是windows下的远程桌面程序) http://jingyan.baidu.com/article/d3b74d64bdab5d1f76e60951.html 2. ...
- .net(C#)中结构和类的区别
static void Main(string[] args) { //类型 //结构:值类型 //类:引用类型 //声明的语法:class struct //在类中,构造函数里,既可以给字段赋值,也 ...