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都支持,只是在 ...
随机推荐
- onload事件-----addLoadEvent函数
在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...
- php计算字符串长度
/** * 计算字符串的长度(非字节) * 先用正则将字符串分解为个体单元,然后再计算单元的个数即得出字符串的长度 * from wordpress * @param string $string * ...
- CSS深入理解之margin
前言 改变容器尺寸 margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...
- chrome调试 JavaScript 脚本
随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...
- handler发消息的形式
1.onCreate()中写好handler的接受机制,准备接受并处理消息 2.thread中利用handler.post(Runnable r): protected void onCreate(B ...
- linux hadoop安装
linux hadoop安装 本文介绍如何在Linux下安装伪分布式的hadoop开发环境. 在一开始想利用cgywin在 windows下在哪, 但是一直卡在ssh的安装上.所以最后换位虚拟机+ub ...
- SQL Server 参数化 PARAMETERIZATION
ALTER DATABASE dbname SET PARAMETERIZATION SIMPLE --默认 ALTER DATABASE dbname SET PARAMETERIZATI ...
- 我的第一个hadoop程序
利用virtualbox+win的开发环境搭设好咯,在win下做开发,利用linux跑hadoop,伪分布式的. 上第一个程序 package org.apache.hadoop.examples; ...
- YUV格式分析
转自:http://www.cnblogs.com/armlinux/archive/2012/02/15/2396763.html Andrew Huang <bluedrum@163.com ...
- [课程设计]Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案)
Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...