0级DOM事件模型和2级DOM事件模型
来源:互联网 发布:申请多个淘宝账号 编辑:程序博客网 时间:2024/06/06 10:41
前言:今天看到有关JavaScript中的事件模型,决定深入的了解下,下面的内容全部围绕标题展开。
一. 疑惑
如果是第一次看到事件模型这块,一定会有个疑虑,为什么是0级和2级,1级在哪里?其实,实际上并没有0级DOM这个标准,它是大家对最原始的DOM模型的叫法,里面有最原始的事件模型,在1级DOM标准中并没有规定事件模型,2级DOM里面规定了事件模型。
二. 0级DOM事件模型
(1)方式一
<button id="btn" onclick="showmess()">点我</button><script> function showmess(){ alert("我是button"); }</script>
(2)方式二
<button id="btn">点我</button><script> document.getElementById("btn").onclick = function(){ alert("我是button"); }</script>
可以看出0级DOM事件模型,的事件注册有两种方法,第一种是直接利用HTML的属性来直接注册;第二种是用JS函数获得元素对象,再注册。
三. 2级DOM事件模型
2级DOM事件模型,是标准的事件模型,注册方式如下:
<button id="btn">点我</button><script>var target = document.getElementById("btn");target.addEventListener('click',function(){ alert("我是button");}, true);</script>
在2级DOM事件模型中,使用addEventListener函数为元素注册事件,该函数有三个参数,第一个是事件的类型,第二个是处理函数,第三个参数为boolean值,为true表示事件监听处理在捕捉阶段,为false表示事件监听处理在目标阶段和冒泡阶段。与之对应的还有个removeEventListener()
方法,该方法是移除事件监听,参数与addEventListener()相同。
三. 两者的区别
(1)由上面的内容可以看出两者的事件注册方式不同;
(2)在0级DOM事件模型中,函数是元素的事件句柄,所以this应用的就是发生事件的元素;在2级DOM中,由于事件被分为三个执行阶段,所以this并没有明确的指向,应使用event对象的currentTarget属性,它指向的是注册该事件的元素;
(3)0级DOM事件模型只对事件的类型进行分类,例如:鼠标事件和键盘事件;2级DOM事件模型是模块化的,分为HTMLEvents,MouseEvents,和UIEvents三个模块,分别实现不同的接口;
(4)最主要的区别,在0级DOM中事件模型中,浏览器把事件分发给元素,如果有合适的事件就触发;在2级DOM事件模型中,事件被分为三个阶段,捕获阶段->目标阶段->冒泡阶段。
- 0级DOM事件模型和2级DOM事件模型
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中0级DOM和2级DOM事件模型浅析
- DOM事件模型总结
- dom事件模型级别
- DOM事件模型级别
- DOM 事件模型
- DOM事件模型
- 【JS】DOM事件模型
- DOM 事件模型
- DOM事件模型学习
- dom事件模型
- DOM事件探秘(一)DOM事件模型
- SwitchResX 4.6 调整外接显示器分辨率
- 排序算法总结
- HTTP中Get与Post的区别
- java微信公众号开发(搭建本地测试环境)
- 手机信息页面
- 0级DOM事件模型和2级DOM事件模型
- c++第二次试验-多分数段函数求值
- hdu 1080 Human Gene Functions
- Mysql --Auto_increment详解
- KEBA机器人控制器简介
- 大白书160页,uva 11542 乘积是平方的数
- RecyclerView遇到notifyDataSetChanged无效时的解决方案
- 机器人操作系统ROS Indigo 入门学习(16)——记录和重放数据
- 树那里代码总结