Dom事件初步了解

1.事件流

事件流可以分为两种:事件冒泡和事件捕获

1. 事件冒泡就是从目标元素一直冒泡到根元素html(IE和DOM浏览器都有)

2. 事件捕获就是从根元素到目标元素(DOM浏览器支持)

2.事件处理

1.HTML的事件处理,如下

<div class="btn" onclick="showME()">点击我</div>

把点击事件放入到标签内部这样不好就是行为和建构耦合在一起了,不好维护

2.DOM0级的事件处理

<div class="btn" id="btn">点击我</div>

<script>

var btn = document.getElementById("btn");

btn.onclick = function(){

//代码

}

// 取消点击

//  btn.onclick = null;

</script>

这个是把点击事件和结构分离了,这个不能给一个元素绑定多个点击事件,存在把之前合作同事的代码覆盖掉

3.DOM2级事件处理

<div class="btn" id="btn">点击我</div>

<script>

var btn = document.getElementById("btn");

btn.addEventListener(‘click‘,function(){

//代码

},false);

//取消点击事件

// btn.removeEventListener(‘click‘,function(){},false);

</script>

这样可以给元素绑定多个点击事件。好维护上面这些事DOM浏览器的,IE大家可以去查询一下attachEvent,detachEvent

3.Event 了解

DOM浏览器

event.type 属性就是事件类型

event.target 目标元素

event.stopProgation() 方法,是阻止冒泡的

event.preventDefault()方法,是阻止元素事件的默认行为如a标签

IE下

event.type 属性是事件类型

event.srcElement 目标元素

event.cancelBubble 属性 阻止冒泡

event.returnValue 属性  false是阻止事件默认行为

时间: 2024-10-14 05:46:45

Dom事件初步了解的相关文章

jQuery操作dom事件

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 //1.绑定事件bind() bind('event name', eventData, function(event) { /* Act on the event */ }); //event name事件名称:可接收事件列表 blur,f

从click事件理解DOM事件流

事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这些函数的运行顺序?于是有了事件流的概念(事件捕捉,事件冒泡) 举个例子: <div id="outer"> <p id="inner">Click me!</p> </div> 为了看起来方便,先无视CSS样式,那么蓝色的

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

DOM 事件深入浅出(一)

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级

用dom操作样式和dom事件

1.样式表的操作 1.1获取样式表: var cssRules = document.styleSheets[0].cssRules //DOM规范 document.styleSheets[0].rules //IE 1.2获取最终样式 var divEle = document.getElementById("divId"); var backgroundColor = divEle.currentStyle.backgroundColor; //IE var background

你真的了解DOM事件么?

你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互的么?如果你不是那么清楚,可以看这篇文章... 前面的话: 这篇博文由浅入深,先介绍两种事件流,然后介绍常见的事件处理程序以及它们之间的差异(涉及到一个简单的兼容的处理函数),后面还会针对事件对象进行深入学习,最后则是通过DOM事件实现的小案例. 事件流: 关于事件流,简单

【转载】DOM 事件深入浅出(二)

DOM 事件深入浅出(二) 在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法. 那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象.我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性. Event对象 Event对象其实是一个事件处理程序的参数,

DOM事件

在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[JavaScript <------>HTML] 事件流 描述的是从页面中接受事件的顺序 (IE:事件冒泡流 / Netscape事件捕获流) 事件的三个阶段 事件的三个阶段分别是:捕获阶段.目标阶段.冒泡阶段 事件冒泡流:即事件最开始由最具体的无素(文档中嵌套层次最深的那个节点)接收,然后逐级向