DOM0、DOM2级事件
JavaScript DOM0、DOM2级事件
1、DOM0级事件:on+事件类型
在html行内直接绑定,也就是通过行内js绑定的
例如
<span onclick="alert('1')">第一项</span> 在js中绑定例如:
//<span onclick="alert('2')">第一项</span>
var Ospan=document.getElementsByTagName('span')[0];
Ospan.onclick=function(){
alert('1');
}
这样就是DOM0级事件,最明显的缺陷的地方就是,一个元素绑定相同的事件会被后者覆盖掉
如果接触事件那么就是
Ospan.onclick=null;
2、DOM2级事件:
addEventListener(events,handler,boolean),
removeEventListener(events,handler)
2.1、参数events是以空格间隔的事件类型,handler是事件处理程序,boolean表示是冒泡还
是捕获,true表示捕获,flase表冒泡,默认冒泡。
冒泡是从点击的元素开始,一直向上扩散事件,类似水中的气泡,从水中一直向上走,,最后到了document;
捕获是从点击的元素一直向里查找,找到该元素的包含最深的元素
DOM2级绑定事件不会覆盖自身,和DOM0级也能共存;
var Ospan=document.getElementsByTagName('span')[0];
Ospan.onclick=function(){
alert('1');
}
Ospan.addEventListener('click',function(){
alert('5')
},false);
Ospan.addEventListener('click',function(){
alert('6')
},false)
以上会依次输出:1,5,6
DOM2事件可以给未被创建的元素绑定事件,但是DOMO级事件却不行,是能给已经创建的DOM元素绑定事件
3、解绑事件:
3.1、DOM0级事件是将onclick属性指向一个函数,所以只需要修改onclick属性指向null即可
3.2、DOM2级事件是为对象添加了监听某种事件的监听器,解绑的时候由removeEventListener
需要指定事件的类型,和事件处理程序的名字,因此这个方法无法解绑匿名事件处理函数的事
件。因为具体指定了事件和事件处理函数,所以同个事件类型的不同事件处理程序不相互影响。
这样不能解除事件,
Ospan.removeEventListener
('click',function(){
alert('6')
})
这样才能解除事件,
Ospan.addEventListener('click',cc,false);
Ospan.removeEventListener
('click',cc);
function cc(){
alert('6')
};
DOM0、DOM2级事件的更多相关文章
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- DOM1级问题与DOM2级事件
前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...
- 关于DOM2级事件的事件捕获和事件冒泡
DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...
- 事件流程以及dom2级事件绑定
事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...
- 2015-03-12——简析DOM2级事件
DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load 适用于windo ...
- JS事件委托(事件代理,dom2级事件)
一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...
随机推荐
- 采用ADM2582E/ADM2587E实现完全半/全双工的RS-485/RS-422接口隔离
RS-485标准是一种常见的总线架构,其通用性及远距离传输能力使其广泛应用于各种通信接口电路.在多数情况下,由于应用环境的恶劣,需要对RS-485接口采用隔离方案以防止出现接地环路. 对RS-485接 ...
- Ubuntu上Eclipse安装PyDev方法和配置
Ubuntu11.10中Eclipse安装PyDev插件方法 PyDev是Eclipse中用来开发python的一个插件,个人比较喜欢,下面介绍在Ubuntu下安装这个插件的方法.(在Windows下 ...
- c# winform窗体间的传值
说明:本文讲解两个窗体之间的传值,主要用到两个窗体,form1,form2 1.在form1窗体单击按钮,打开窗体form2,然后把form2中文本框的值传递给form1 form1中的代码: usi ...
- Java服务器端 API 错误码设计总结
1.对于API结果返回,定义BaseResult 类 拥有success,errorCode,errorMsg个3个基本参数,success使用Boolean类型,errorCode使用Integer ...
- C++编程规范纲要要点小结
这是一本好书, 可以让你认清自己对C++的掌握程度. 看完之后,给自己打分,我对C++了解多少? 答案是不足20分. 对于我自己是理所当然的问题, 就不提了, 记一些有启发的条目和细节: (*号表示不 ...
- MD5 字符串问题
早上来工位,大家再聊md5,无意中发现网上有个人提出个问题:研究了一下,挺有意思 有个串,通过各种办法得到的值不完全一样,下面请看细节: 假设这个字符串是 “ssss"我用的第一个办法应该是 ...
- MongoDB学习笔记(1):MongoDB的安装和说明
MongoDB学习笔记(1):MongoDB的安装和说明 快速开始 下载地址 官网下载: https://www.mongodb.com/download-center?jmp=nav#communi ...
- (linux)BSP板级支持包开发理解
1. 概述 嵌入式系统由硬件环境.嵌入式操作系统和应用程序组成,硬件环境是操作系统和应用程序运行的硬件平台,它随应用的不同而有不同的要求.硬件平台的多样性是嵌入式系统的主要特点,如何使嵌入式操作系统在 ...
- (linux)struct inode 和 struct file
转自:http://www.cnblogs.com/QJohnson/archive/2011/06/24/2089414.html 1.struct inode──字符设备驱动相关的重要结构介绍 内 ...
- wav音频文件头解析
wav概述 WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(ResourceInterchange File Format)文件规范,用于保存Windows平台的音频信息 ...