`
mmBlue
  • 浏览: 167288 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript事件模型-[DOM第0级事件模型]

阅读更多

javascript 有2个事件模型

 

DOM第0级事件模型

function a(){
  var d1 =  document.getElementById('d1');
  var d2 =  document.getElementById('d2');
  d1.onclick = function(){document.getElementById('console').parentNode.appendNode...};
  d2.onclick = function{};
}
<div id='d1'>
  <div id='d2'></div>
</div>
<div id='console'></div>

 当点击DIV--d2的时候会先执行d2事件,再执行d1事件,一直到DOM顶部 html,这个叫事件冒泡。

另外,在执行事件的时候会传入一个参数Event

注意:IE下 event是winodw的属性

一般可以这样做:if(!event) event = window.event;

如果要获取事件中的引用(目标元素),标准浏览器中取target属性,IE中取srcElement属性

var target = (event.target) ? event:target : event.srcElement;

分享到:
评论
1 楼 1927105 2011-09-09  
学习了,默认是0级,呵呵

相关推荐

    javascript事件模型代码

    - **DOM0级事件处理程序**:在JavaScript代码中,通过对象的`oneventName`属性设置,如`element.onclick = function() {...}`。 - **DOM2级事件处理程序**:使用`addEventListener`和`removeEventListener`方法添加...

    jQuery动画特效---精通JavaScript+jQuery

    第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS...

    全栈工程师开发8个阶段(27.32G)

    0.HTML5和CSS3完成网站布局 ...---2.列表、表格、媒体元素 ...---3.javaScript操作DOM ---4.JavaScript对象及初识面向对象 ---5.初识jQuery(转换) ---6.jQuery选择器 ---7.jQuery的事件与动画 ---8.jQuery操作D

    JS原生系列-DOM篇.pdf

    DOM(文档对象模型)是JavaScript中用于表示和交互HTML文档的一种结构化接口。通过DOM,JavaScript可以访问和更改HTML文档的内容、结构以及样式。本文将深入探讨JavaScript中DOM的操作。 首先,了解DOM的基础结构...

    JavaScript驾驭网页-DOM

    DOM模型把文档视为节点构成的层次树,这样可以方便地通过编程语言如JavaScript来操作这些节点。 DOM的用途主要包括: 1. 访问和修改文档的结构:比如添加、删除和修改HTML元素或者属性。 2. 访问和修改文档的内容:...

    深入分析原生JavaScript事件

    原生JavaScript事件处理方式分为DOM0级事件模型和DOM2级事件模型。 2. DOM0事件模型: DOM0级事件模型是最初的也是最简单的事件处理方式,它在所有浏览器中都得到支持。这种模型将事件处理函数作为HTML元素属性...

    javascript事件详解

    JavaScript不支持多线程处理,而是采用异步事件模型。这意味着当一个任务在执行时,如果有其他任务需要等待,JavaScript会先执行其他任务,直到触发的事件完成后再回调。例如,如果想要在页面加载完成后改变body的...

    javascript经典特效---一款别致的万年历.rar

    在JavaScript中,我们可以创建变量、函数,进行条件判断、循环操作,并能够对网页的DOM(文档对象模型)进行动态修改。 万年历的核心在于日期处理,这涉及到JavaScript的Date对象。Date对象是JavaScript内置的全局...

    DOM事件的区别

    DOM0级事件处理是最基础的JavaScript事件处理模型,它允许开发者为DOM元素绑定事件处理函数。在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件...

    简析JavaScript事件、以及捕获和冒泡

    2. DOM0级事件处理:JavaScript中直接赋值,如`element.onclick = function() { ... }`。 3. DOM2级事件处理:使用`addEventListener`和`removeEventListener`方法,这提供了更多的灵活性和控制,例如支持多个事件...

    扣代码工具 javascript事件 捕获者2.0.zip

    JavaScript提供了两种主要的事件处理方式:内联事件处理、DOM0级事件处理和DOM2级事件处理(包括事件监听器)。 1. 内联事件处理:通过在HTML元素中直接设置`onclick`、`onmouseover`等属性来指定事件处理函数,如`...

    Javascript教程--从入门到精通[完整版]

    JavaScript,也常被称为JS,是一种轻量级的解释型编程语言,主要用于网页和网络应用开发。它是Web开发的三大核心技术之一,与HTML和CSS共同构建了互联网的动态内容。本教程将带你从零基础深入理解JavaScript,助你从...

    使用JavaScript事件综合查询,js事件大全

    2. DOM0级事件处理:通过JavaScript直接赋值给元素的事件属性,如`element.onclick = function() {...}`。 3. DOM2级事件处理:使用`addEventListener`和`removeEventListener`方法来添加和移除事件处理程序,支持多...

    javascript经典特效---打开页面特效(四).rar

    在JavaScript中,实现这类特效通常涉及到DOM(文档对象模型)操作、CSS样式控制以及时间函数的运用。DOM允许我们以编程方式访问和修改HTML元素,而CSS则负责页面的布局和视觉风格。JavaScript通过改变元素的CSS属性...

    javascript事件大集合

    2. **DOM0级事件处理**:直接在JavaScript中为元素添加事件处理函数,这种方式仍存在跨浏览器兼容问题。 ```javascript var button = document.getElementById('myButton'); button.onclick = function() { alert...

    JavaScript事件冒泡示例.html

    2. DOM0级方法:在JavaScript中,通过元素的事件属性来添加或移除事件处理函数。 ```javascript var button = document.getElementById('myButton'); button.onclick = function() { alert('Button clicked!'); }; ...

    js中DOM事件绑定分析.docx

    这里我们将深入探讨三种主要的事件绑定模型:内联模型、脚本模型和DOM2级事件模型。 1. **内联模型**: 这是最原始的事件处理方式,通过HTML元素的事件属性(如`onclick`)直接指定处理函数。例如: ```html ...

    javascript面向对象编程教程.rar PDF

    - 事件监听器:学习如何添加和移除事件监听器,包括DOM0级和DOM2级事件处理方式。 - 事件冒泡和捕获:理解事件传播机制,以及如何阻止默认行为。 7. **Window及相关顶级对象**(第7章) - Window对象:浏览器...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    5. **总结**:事件冒泡和事件捕获是JavaScript事件模型的两个阶段,它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略,可以降低内存消耗,提高性能,尤其适用于动态添加或删除DOM元素的...

Global site tag (gtag.js) - Google Analytics