DOM0、DOM2级事件
2024-08-31 13:16:19
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')
};
最新文章
- 手把手教你用FineBI做数据可视化
- IEEE829-2008软件测试文档标准介绍
- Do things for others
- require.js 入门笔记
- VS对路径的访问被拒绝
- IIS7 配置URL_REWRITE
- RAM, SDRAM ,ROM, NAND FLASH, NOR FLASH
- Android ---时间工具类
- HDOJ(HDU) 2090 算菜价(简单水题、)
- HDU 1562 Oil Deposits
- [UOJ UNR#2 UOJ拯救计划]
- ccse(CountDownLatch,CycliBarrier,Semaplore,Exchanger)
- Python 高度定制化自己的线程类和进程类代码,获取启动进程或线程方法的结果(兼容Py2和Py3)
- angular ng-repeat 动态获取的dom片段 显示
- git创建新的分支
- 安装tesserocr错误(未解决)
- win10系统同时安装python2和python3
- 微服务监控zipkin、skywalking以及日志ELK监控系列
- Mac iterm2 创建服务器列表
- C#treeView控件单击事件选中节点滞后问题解决方法
热门文章
- EasyDarwin开源流媒体服务器如何实现按需推送直播的
- 开源服务器监控工具 — JavaMelody 类 jvm 内在性能(转)
- 【Effective C++】构造/析构/赋值运算
- git多人协作冲突解决方法
- 【转】hibernate懒加载的问题,failed to lazily initialize a collection of role
- linux系统配置之PATH环境变量的设置(centos)
- codeforces 665A A. Buses Between Cities(水题)
- 深度学习之卷积神经网络(CNN)学习
- windows兼容dirent.h
- ubuntu解决挂起后不能唤醒