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级事件的更多相关文章

  1. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  2. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  3. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  4. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  5. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  6. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  7. 事件流程以及dom2级事件绑定

    事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...

  8. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

  9. JS事件委托(事件代理,dom2级事件)

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

随机推荐

  1. EasyRTMP视频直播推送H264 sps解析错误导致播放画面拉伸问题解决

    EasyRTMP是将H264流以及AAC流以RTMP协议推送到RTMP服务器上进行直播.EasyRTMP推送库中会从H264流中提取中SPS.PPS进行解析,开发的时候遇到过有些SPS解析有误,获取到 ...

  2. Google Guava之Optional优雅的使用null

    为什么使用optional 使用Optional<T>除了简化粗鲁的if(null == object).降低函数的复杂度.增加可读性之外,它是一种傻瓜式的防护,Optional<T ...

  3. Elasticsearch + Logstash + Kibana 搭建教程

    # ELK:Elasticsearch + Logstash + Kibana 搭建教程 Shipper:日志收集者.负责监控本地日志文件的变化,及时把日志文件的最新内容收集起来,输出到Redis暂存 ...

  4. 我对Swift的几点疑问

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/caowenbin/article/details/31418773         Swift自问世 ...

  5. 【C++基础学习】类型声明

    1.初始化 在C++中,初始化与赋值操作是完全不同的两个操作.初始化不是赋值,初始化的含义是创建变量时赋予其一个初始值,而赋值的含义是把对象的当前值擦除,而以一个新值来代替. 初始化的方式有: 1 i ...

  6. Algorithm: Euclid's algorithm of finding GCD

    寻找最大公约数方法 代码如下: int gcd (int a, int b) { return b ? gcd (b, a % b) : a; } 应用:求最小公倍数 代码如下: int lcm (i ...

  7. indexDB操作(部分方法不太会使用)

    <script type="text/javascript"> //打开数据库 function openDB(name,version){ var version = ...

  8. 使用doctrine的内存耗尽解决办法

    PHP Fatal error: Allowed memory size of xxx xxx xxx bytes exhausted 无论是插入大量数据或者查询大量数据时,都可能因为数据量太大而出现 ...

  9. CSS3学习笔记(3)—左右飞入的文字

    前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦 下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软 ...

  10. UVA10689 Yet another Number Sequence —— 斐波那契、矩阵快速幂

    题目链接:https://vjudge.net/problem/UVA-10689 题解: 代码如下: #include <iostream> #include <cstdio> ...