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都支持,只是在 ...
随机推荐
- 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#访问,代码如下:[没有问题,返回正确] ...
- mysql 几个命令
show databases; 显示所有数据库 create database 数据库名; 创建数据库 drop database 数据库名; 删除数据库
- cmd光标移动
ESC:清除当前命令行.F1: 单字符输出上次输入的命令 相当于方向键上的 → 的作用.F2: 可复制字符数量 , 输入上次命令中含有的字符,系统自动删除此字符后的内容.F3: 重新输入前一次输入的命 ...
- nodejs的安装与配置
最近做了一个项目,想基于NodeJS来完成,但是由于对NodeJS不熟悉,所以在网上查资料进行安装,以下做对关键信息做一下笔记本,具体如何安装,就不做说明了,如果需要查看的,请自行Goolge或bai ...
- Java多线程开发系列之三:线程这一辈子(线程的生命周期)
前文中已经提到了,关于多线程的基础知识和多线程的创建.但是如果想要很好的管理多线程,一定要对线程的生命周期有一个整体概念.本节即对线程的一生进行介绍,让大家对线程的各个时段的状态有一定了解. 线程的一 ...
- 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景
IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...
- [Phalcon] DI默认的服务
代码,说明一切 namespace Phalcon\Di\FactoryDefault; use Phalcon\Di\Service; use Phalcon\Di\FactoryDefault; ...
- MongoDB - 在Windows上安装
1 下载MongoDB社区版, 下载链接 http://www.mongodb.org/downloads?_ga=1.129742796.1997610832.1481940266 2 安装Mong ...
- WEB进度条控件
近段时间为了工作的需要学习了一下写自定义控件,呵呵!以前没写过,近段时间才开始研究的,昨天写了一个WEB状态条控件,可以设置进度条的百分比,也可以设置它的总数与当前的数量来自动计算百分比,可以设置颜色 ...
- 无法打开键: UNKNOWN\Components\BE1FB738077DBE490AF18C3B9B1A1EE8\E5F5286B58B542741A00A0A9AA420B27
MSI (s) (D8:38) [07:38:20:634]: 产品: Microsoft SQL Server VSS 编写器 -- 错误 1402.无法打开键: UNKNOWN\Component ...