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级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...
随机推荐
- A Windows GUI for Appium
A Windows GUI for Appium If you are new to Appium then please see the Getting started guide for more ...
- UITextInputMode类的使用
转载请注明:http://blog.sina.com.cn/s/blog_69081e060100v7ad.html UITextInputMode大家看了是不是有些陌生呢?这个类是在4.2之后才 ...
- codeforces B. Calendar 解题报告
题目链接:http://codeforces.com/problemset/problem/304/B 题目意思:给出两个日期,需要算出这两个日期之间有多少日. 细心模拟就可以了.特别要注意的是,两个 ...
- php字符串啊的heredoc格式
Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.它也出现unix/linux的shell编程里面.但是现在的一些论坛程序,和部分文 ...
- [转载] Android raw与assets区别
*res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点:1.res/raw中的文件会被映射到R ...
- 多线程之:lock和synchronized的区别
多次思考过这个问题,都没有形成理论,今天有时间了,我把他总结出来,希望对大家有所帮助 1.ReentrantLock 拥有Synchronized相同的并发性和内存语义,此外还多了 锁投票,定时锁等候 ...
- [SHOI 2017] 组合数问题
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4870 [算法] 回顾组合数的定义 : C(N , M)表示将N个小球放入M个盒子里的 ...
- [SHOI 2017] 寿司餐厅
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4873 [算法] 注意到题目中的限制条件可表述为 : 若选择区间[L , R] , 则 ...
- [APIO 2014] 序列分割
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3675 [算法] 首先 , 我们发现将一段序列切成若干段所获得的收益与顺序无关 于是我 ...
- 中缀表达式std
#include<cstdio>#include<cstdlib>#include<string>#include<cstring>using name ...