javascript的事件机制

一、事件模型

IE 和 标准DOM的事件模型

IE系:冒泡方式

NETSCAPE系:捕获方式

标准DOM:先捕获再冒泡

冒泡,从触发点向外层、顶层扩散,最后到达document、window,遇到相同注册事件立即触发执行;

捕获则相反,从window、document向里收缩,一直到触发点,遇到相同注册事件立即触发执行;

有代码如下:

<style type="text/css">
div {
  border: solid 1px red;
}
#s1 {
  padding: 10px;
  border-color: blue;
}
</style>

<div id="s1">s1
  <div id="s2">s2</div>
</div>

<script type="text/javascript">
if(document.attachEvent){//IE浏览器
    document.getElementById("s1").attachEvent("onclick",function(e){
        alert("s1冒泡模式");
    });
    document.getElementById("s2").attachEvent("onclick",function(e){
        alert("s2冒泡模式");
    });
}
else{
    s1.addEventListener("click", function() {
      alert("s1捕获模式");
    }, true);
    s2.addEventListener("click", function() {
      alert("s2捕获模式");
    }, true);
    s1.addEventListener("click", function() {
      alert("s1冒泡模式");
    }, false);
    s2.addEventListener("click", function() {
      alert("s2冒泡模式");
    }, false);
}
</script>

页面如下:

在非IE浏览器里,点击里层的s2,依次提示如下,清晰地体现了先捕获、后冒泡的特点:

s1捕获模式
s2捕获模式
s2冒泡模式
s1冒泡模式

如果是IE浏览器,则依次提示

s2冒泡模式
s1冒泡模式

二、事件注册

类似这样,

标准DOM

s1.addEventListener("click", function() {
      alert("捕获模式");
    }, true);
s1.addEventListener("click", function() {
      alert("冒泡模式");
    }, false);  

IE

document.getElementById("s1").attachEvent("onclick",function(e){
        alert("IE下注册事件");
});

三、阻断事件

标准DOM下:

event.stopPropagation //阻止事件的进一步传播,本节点除外

event.stopImmediatePropagation //立即阻断事件的传播,包括本节点

event.preventDefault() //阻止默认事件的发生。比如说,点击submit控件,提交就是默认事件。

IE下:

window.event.cancelBubble = true; //阻止事件的进一步传播,本节点除外

window.event.returnValue = false;//阻止默认事件的发生

有代码如下:

<style type="text/css">
div {
  border: solid 1px red;
}
#s1 {
  padding: 10px;
  border-color: blue;
}
</style>

<form id="f1">
<div id="s1">s1
  <div id="s2">s2</div>
  <div><input type="submit" id="b1" value="submit" /></div>
</div>
</form>

<script type="text/javascript">
if(document.attachEvent){//IE浏览器
    document.getElementById("s1").attachEvent("onclick",function(e){
        alert("s1事件");
    });
    document.getElementById("s2").attachEvent("onclick",function(e){
        alert("s2事件");
    });
    document.getElementById("b1").attachEvent("onclick",function(e){
        alert("b1点击事件1");
        window.event.cancelBubble = true;//使s1事件无效;b1点击事件2不受影响,仍然执行(S2事件则与本次点击无关,始终不会被触发)
        window.event.returnValue = false;//使f1提交事件无效
    });
    document.getElementById("b1").attachEvent("onclick",function(e){
        alert("b1点击事件2");
    });
    document.getElementById("f1").attachEvent("onsubmit",function(e){
        alert("提交...");
    });
}
else{
    s1.addEventListener("click", function() {
      alert("s1事件");
    }, false);
    s2.addEventListener("click", function() {
      alert("s2事件");
    }, false);
    b1.addEventListener("click", function(evt) {
      alert("b1点击事件1");
      evt.stopPropagation();//使s1事件无效;b1点击事件2不受影响,仍然执行(S2事件则与本次点击无关,始终不会被触发)
      evt.stopImmediatePropagation();//使b1点击事件2,s1事件无效;
      evt.preventDefault();//使f1提交事件无效
    }, false);
    b1.addEventListener("click", function(evt) {
      alert("b1点击事件2");
    }, false);
    f1.addEventListener("submit", function() {
      alert("提交...");
    }, false);
}
</script>

参考资料:

[解惑]JavaScript事件机制

时间: 2024-10-14 04:54:34

javascript的事件机制的相关文章

深入研究JavaScript的事件机制

本篇开始将回顾下Javascript的事件机制.同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块.为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler.天台县羿壮冶金 先看看页面中添加事件的几种方式: 直接将JS代码写在HTML上 测试:Nowamagic view source print? 1 <div onclick="alert('欢迎访问Nowamagic.net');">Nowamagic</

JavaScript系列----事件机制

1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件流. <!DOCTYPE HTML> <html> <body> <div> <button>click</button> </div> </body> </html> 在上面的代码中,如果点击按钮bu

javascript的事件

原文:javascript的事件 前戏 今天在博客中看到了javascript的事件机制,就自己试试写一个简单的冒泡捕获测试,但是测试结果出乎了我的意料,主要是自己原来对事件了解不是很清楚,现在写篇博客记录下. 基础 先来看一下我在Aaron博客中截的一张图 DOM2中事件有三个阶段 事件的捕获阶段 事件的目标阶段 事件的冒泡阶段 事件的捕获阶段:是由document元素向发生事件的元素传递. 事件的目标阶段:是指在找到了发生事件的目标元素这个阶段,找到之后就会执行事件监听器.如果在目标元素上同

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(dubbed  bubbling):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(event  capturing):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事

javascript事件机制了解与深入

一.事件的捕获与冒泡 “DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.下面这个图能够很形象的解释(理解捕获和冒泡必不可少的图) 按照图我们编写了代码去验证下, <div id="parent"> <div id="child"> child </div> </div> <script type="text/javascript"> var p = d

[解惑]JavaScript事件机制

[解惑]JavaScript事件机制 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~ 如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的.但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下. 本文地址:http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html 一.

Javascript事件机制兼容性解决方案

原文:Javascript事件机制兼容性解决方案 本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; Evt.on(input, 'click', function(evt){ console.log('inp

6月第4周--javascript 事件机制

本周任务,对javascript事件机制进行思考 提供以下 几个博文 论点: 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代理的实现,并封装一个方法 6.事件代理的问题<li><span></span></li>如果同时给span与li绑定事件该如何组装冒泡??? 7.tap