什么是DOM0,DOM2,DOM3?
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果。
本文就将带大家深入浅出地了解DOM事件的那些属性和方法。
1.DOM级别与DOM事件:
DOM级别一共可以分为四个级别:DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理。
有人可能会疑惑,为什么没有DOM1级事件处理呢?因为1级DOM标准并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。
1.DOM0级事件之前,我们有必要了解一下HTML事件处理程序,也是最早的一种事件处理方式
代码如下(示例):
<button type="button" onclick="showFn()"></button>function showFn() {alert('Hello World');}
以上的代码,我们通过直接在HTML代码里面定义了一个 onclick属性触发showfu这样的事件处理程序最大的缺点就是HTML和JS耦合太强,我们如果需要修改函数名就必须修改两个地方,优点是不需要操作DOM来完成事件的绑定。
DOM0级处理事件就是将一个函数赋值给一个事件处理属性。
代码如下(示例):
<button id="btn" type="button"></button>var btn = document.getElementById('btn');btn.onclick = function() {console.log('Hello World');}
以上的代码我们给button定义了一个id 通过js原生的api获取按钮
将一个函数赋值给了一个事件处理属性onclick 这样的方法就是DOM0级
处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。
DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数,比如我还想再点击按钮事件上加上另外一个函数。
2.DOM2级事件
DOM2级事件在DOM0级时间段额基础上弥补了一个处理处理程序
无法同时绑定多个处理函数的缺点。允许给一个程序添加多个处理函数。
代码如下(示例):
<button id="btn" type="button"></button>var btn = document.getElementById('btn'); function showFn() {alert('Hello World');} btn.addEventListener('click', showFn, false);// btn.removeEventListener('click', showFn, false); 解绑事件
DOM2级事件定义了addEventListener 和 removeEventListener两个方法,分别用来绑定和解绑事件,方法中包含三个参数,分别是绑定的事件处理的属性名称(没有on)处理函数和是否在捕获时候执行事件处理函数如果我们还需要添加一个鼠标的移入的方法,只需要:
代码如下(示例):
btn.addEventlistener('mouseover',showfn,false)
这样,点击按钮和鼠标移入时候都将触发showfn的方法。
需要注意的是IE8以下版本不支持 addEventlistener 和 removeEventListerner
需要使用attachEvent和detachEvent实现:
代码如下(示例):
btn.attachEvent('onclick', showFn); // 绑定事件 btn.detachEvent('onclick', showFn); // 解绑事件
这里我们不需要传入第三个参数,因为IE8以下版本只支持冒泡型事件。
3.DOM3级事件
DOM3级事件是在DOM2级事件的基础上添加很多事件类型。
UI事件,当用户与页面上的元素交互时触发,如:load、scroll
焦点事件,当元素获得或失去焦点时触发,如:blur、focus
鼠标事件,当用户通过鼠标在页面执行操作时触发如:dbclick、mouseup
滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel
文本事件,当在文档中输入文本时触发,如:textInput
键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress
合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart
变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified
什么是DOM0,DOM2,DOM3?相关推荐
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- Javascript高级程序设计第二版第十一章--DOM2,DOM3--笔记
今天跟诸位分享一下,高程,第二版,11章,dom2,dom3 纵观这一章,一个概念,dom在变,现在变,未来变,反正不断的变. 不过变来变去,ie是不支持dom2,dom3,可能未来新版本支持部分do ...
- html面试题(一)--html css js
前端面试题汇总 一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 尚硅谷_CSS3 笔记
目录 什么是CSS3 选择器 基本选择器及其扩展 属性选择器 伪类与伪元素选择器 css声明的优先级 自定义字体&字体图标 复习1 新的UI方案 文本新增样式 opacity RGBA 文字阴 ...
- web和http相关知识点总结
文章目录 Web标准概述 Web标准介绍 HTTP BOM DOM HTTP协议在浏览器网络的位置 Header分类 Cookie Cookie的安全策略 Session Content-Type 性 ...
- 前端面试大全(JavaScript篇——面试利器值得拥有!)
目录 面试系列 内容介绍 1.介绍js的基本数据类型. 2.介绍js有哪些内置对象? 3.说几条写JavaScript的基本规范?, 4.JavaScript原型,原型链? 有什么特点? 一.关系 二 ...
- 前端面试题整理(定期更新)
前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
- 前端的各种各样的面试题大全
问题 此部分用于自测.如有疑惑,可参看后文的答案部分. HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 介绍一 ...
- 2018前端常见问题整理
$HTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要 ...
- 关于面试的一些问题合集
一.css方面 1.盒子模型在IE上有何不同? 盒模型分为:W3C标准盒模型和IE盒模型 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content ...
最新文章
- TensorFlow实现多层感知机函数逼近
- SerfJ REST
- 详解分布式一致性机制
- C语言面试题分享(2)
- Angular应用里input字段后面的_ngcontent-hqi是什么含义
- Lync Server 2010标准版系列PART6:启用Lync
- 看程序员如何给女朋友解释什么是锟斤拷?
- Java NIO学习篇之通道Channel详解
- 人口增长模型_未来中国近一半人口将生活在20强城市,这是异想天开还是大势所趋?...
- 制作一个简单HTML中华传统文化网页(HTML+CSS)
- CMMI认证办理需要什么条件
- 旅行商问题(TSP) 中国34个城市 经纬度平面坐标
- 北大中文核心期刊目录2021年 电工技术
- C语言学习笔记->const和define区别
- layui数据表格接口_layui后台管理—table 数据表格详细讲解
- dep指定版本 go_Golang官方依赖管理工具:dep
- 浏览器验证码图片(缩略图)显示不出来问题解决办法
- 场外期权业务挂钩个股标的名单又更新啦!
- s3c2440存储控制器详解
- linu重置root密码(CentOS7)
热门文章
- unity构建游戏场景
- Python用PIL获取图片信息
- python从tushare获取数据_Python丨金融数据获取之tushare (下)
- 计算机更新好不,Win10自动更新好不好有必要吗?如何关闭屏蔽Windows更新?
- C语言气温连续上升的天数,广西多地连阴雨天数破纪录
-
广西首页
-中国天气网...
- VLOOKUP函数使用方法详解
- Android 设置gif动态桌面
- 99美金和299美金的开发者证书的区别
- 安卓真机如何连接本地服务器_Android真机连接本地服务器安装部署方法
- 福晟集团积极探索让“住有所居”成为新时代转型之路