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级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...
随机推荐
- ActiveMQ的消息的(含附件)发送和接收使用
首先介绍一下ActiveMQ的版本:apache-activemq-5.10.2 启动MQ:activemq.bat 下面来编写MQ的发送类: 里面的发送ip和模式名称可以根据具体的实际情况填写. S ...
- jni native macOS
参考自:http://mrjoelkemp.com/2012/01/getting-started-with-jni-and-c-on-osx-lion/ 1 ,创建HelloWorld,如: 说明: ...
- iPhone HTTP获得XML并使用GDataXML解析
1. [代码][C/C++]代码 NSURL *url = [NSURL URLWithString: @"http://www.raywenderlich.com/downloa ...
- BZOJ 1620 [Usaco2008 Nov]Time Management 时间管理:贪心
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1620 题意: 有n个工作,每一个工作完成需要花费的时间为tim[i],完成这项工作的截止日 ...
- the art of seo(chapter seven)
Content Marketing ***Leveraging Major Social Media Platforms***LinkedIn, Facebook,Google+, Pinterest ...
- 【应用】SVG饼状图
<!DOCTYPE html> <html> <head> <title></title> </head> <body o ...
- http://www.cnblogs.com/yaozhenfa/archive/2015/06/14/4574898.html
笔者这里采用的是mongoDB官网推荐使用.net驱动: http://mongodb.github.io/mongo-csharp-driver/2.0/getting_started/quick_ ...
- C#评分小系统练习
一个经理类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...
- UniCode转码
<script type="text/javascript"> var GB2312UnicodeConverter = { ToUnicode: function ( ...
- C++之引用&的详解
C++中的引用: 引用引入了对象的一个同义词.定义引用的表示方法与定义指针相似,只是用&代替了*.引用(reference)是c++对c语言的重要扩充.引用就是某一变量(目标)的一个别名,对引 ...