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;
分享到:
相关推荐
- **DOM0级事件处理程序**:在JavaScript代码中,通过对象的`oneventName`属性设置,如`element.onclick = function() {...}`。 - **DOM2级事件处理程序**:使用`addEventListener`和`removeEventListener`方法添加...
第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS...
0.HTML5和CSS3完成网站布局 ...---2.列表、表格、媒体元素 ...---3.javaScript操作DOM ---4.JavaScript对象及初识面向对象 ---5.初识jQuery(转换) ---6.jQuery选择器 ---7.jQuery的事件与动画 ---8.jQuery操作D
DOM(文档对象模型)是JavaScript中用于表示和交互HTML文档的一种结构化接口。通过DOM,JavaScript可以访问和更改HTML文档的内容、结构以及样式。本文将深入探讨JavaScript中DOM的操作。 首先,了解DOM的基础结构...
DOM模型把文档视为节点构成的层次树,这样可以方便地通过编程语言如JavaScript来操作这些节点。 DOM的用途主要包括: 1. 访问和修改文档的结构:比如添加、删除和修改HTML元素或者属性。 2. 访问和修改文档的内容:...
原生JavaScript事件处理方式分为DOM0级事件模型和DOM2级事件模型。 2. DOM0事件模型: DOM0级事件模型是最初的也是最简单的事件处理方式,它在所有浏览器中都得到支持。这种模型将事件处理函数作为HTML元素属性...
JavaScript不支持多线程处理,而是采用异步事件模型。这意味着当一个任务在执行时,如果有其他任务需要等待,JavaScript会先执行其他任务,直到触发的事件完成后再回调。例如,如果想要在页面加载完成后改变body的...
在JavaScript中,我们可以创建变量、函数,进行条件判断、循环操作,并能够对网页的DOM(文档对象模型)进行动态修改。 万年历的核心在于日期处理,这涉及到JavaScript的Date对象。Date对象是JavaScript内置的全局...
DOM0级事件处理是最基础的JavaScript事件处理模型,它允许开发者为DOM元素绑定事件处理函数。在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件...
2. DOM0级事件处理:JavaScript中直接赋值,如`element.onclick = function() { ... }`。 3. DOM2级事件处理:使用`addEventListener`和`removeEventListener`方法,这提供了更多的灵活性和控制,例如支持多个事件...
JavaScript提供了两种主要的事件处理方式:内联事件处理、DOM0级事件处理和DOM2级事件处理(包括事件监听器)。 1. 内联事件处理:通过在HTML元素中直接设置`onclick`、`onmouseover`等属性来指定事件处理函数,如`...
JavaScript,也常被称为JS,是一种轻量级的解释型编程语言,主要用于网页和网络应用开发。它是Web开发的三大核心技术之一,与HTML和CSS共同构建了互联网的动态内容。本教程将带你从零基础深入理解JavaScript,助你从...
2. DOM0级事件处理:通过JavaScript直接赋值给元素的事件属性,如`element.onclick = function() {...}`。 3. DOM2级事件处理:使用`addEventListener`和`removeEventListener`方法来添加和移除事件处理程序,支持多...
在JavaScript中,实现这类特效通常涉及到DOM(文档对象模型)操作、CSS样式控制以及时间函数的运用。DOM允许我们以编程方式访问和修改HTML元素,而CSS则负责页面的布局和视觉风格。JavaScript通过改变元素的CSS属性...
2. **DOM0级事件处理**:直接在JavaScript中为元素添加事件处理函数,这种方式仍存在跨浏览器兼容问题。 ```javascript var button = document.getElementById('myButton'); button.onclick = function() { alert...
2. DOM0级方法:在JavaScript中,通过元素的事件属性来添加或移除事件处理函数。 ```javascript var button = document.getElementById('myButton'); button.onclick = function() { alert('Button clicked!'); }; ...
这里我们将深入探讨三种主要的事件绑定模型:内联模型、脚本模型和DOM2级事件模型。 1. **内联模型**: 这是最原始的事件处理方式,通过HTML元素的事件属性(如`onclick`)直接指定处理函数。例如: ```html ...
- 事件监听器:学习如何添加和移除事件监听器,包括DOM0级和DOM2级事件处理方式。 - 事件冒泡和捕获:理解事件传播机制,以及如何阻止默认行为。 7. **Window及相关顶级对象**(第7章) - Window对象:浏览器...
5. **总结**:事件冒泡和事件捕获是JavaScript事件模型的两个阶段,它们定义了事件如何在DOM树中传播。事件委托则是一种高效利用事件处理的策略,可以降低内存消耗,提高性能,尤其适用于动态添加或删除DOM元素的...