DOM1级问题与DOM2级事件
前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题。
同时推荐伙伴们可以看看尚学堂有关JavaScript BOM的文章:《细说javascript BOM》
一.DOM0级事件
0级DOM分为两种
- 行内事件:在标签中写事件
- 元素.on事件名=函数
| 1.行内 <input type="button" id="btn" value="按钮" onclick="alert('上海尚学堂,你值得拥有!')"> |
| 2.元素.on事件名=函数 document.getElementById("btn").onclick = function () { alert('上海尚学堂,你值得拥有!'); } |
二.DOM1级问题
为什么没有1级DOM?
DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ,这个标准下的事件模型就是我们所说的2级DOM事件模型
三.DOM2级事件
只有一个:监听方法,有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
它们都有三个参数:第一个参数是事件名(如click);
第二个参数是事件处理程序函数;
第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。
- addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
- removeEventListener():不能移除匿名添加的函数。
| document.getElementById("btn").addEventListener("click", function(){alert('上海尚学堂,你值得拥有!')}, false); |
对事件的不同级别的具体区别,还是需要大家了解清楚的,那么下次我们再来聊一聊事件的不同执行阶段问题.
DOM1级问题与DOM2级事件的更多相关文章
- DOM0级事件处理、DOM2级事件处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- JavaScript 之默认行为 DOM2级,事件委托机制
1. 事件默认行为及阻止方式 1.1 浏览器的默认行为 JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 1.2 ...
- 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- javaScript——DOM1级,DOM2级,DOM3级
DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...
- 关于DOM2级事件的事件捕获和事件冒泡
DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...
- DOM2级事件处理程序
DOM2级时间定义了两个方法:addEventListener() 和removeEventListener() 他们都接受3个参数:1)要处理的事件名 2)作为事件处理程序的函数 3)一个布尔值 ...
- 2015-03-12——简析DOM2级事件
DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load 适用于windo ...
随机推荐
- SPA
为什么用SPA 1. 减少服务器压力 如果不用spa 那么每次切换页面的时候,就会向服务器发送一个请求 服务器返回一个html文件 如果使用了SPA 在切换时,不需要请求服务器,只要通过本地 ...
- vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...
- js项目练习第一课
控制div属性 <style> .c1 { width:200px; height:200px; background-color: #000; display: block; margi ...
- 关于git的一些命令
git命令 1.git init 初始化仓库 2.git status 查看当前状态 3.git add -A(提交所有的) 提交本地文件到缓存区 4.git commit -m"提交信息& ...
- web应用/路由控制/视图函数/单表多表操作
一. 1.wen应用:BS架构的应用程序,B是浏览器,S:server(实现了wsgi协议)+ application https://www.cnblogs.com/liuqingzheng/art ...
- 采用Google预训bert实现中文NER任务
本博文介绍用Google pre-training的bert(Bidirectional Encoder Representational from Transformers)做中文NER(Name ...
- docker + spring boot 打包 部署。
docker 安装 什么的 就不一一介绍了 不会安装百度一找一堆. 我这直接上代码. 首先你要有个spring boot项目. 然后打包.打包很简单 我打包的是 jar文件.直接在pom.xml文件里 ...
- 周报数据采集之生存图片(execl方法)
https://blog.csdn.net/Luzaofa/article/details/81675364 Python之Excel chart另存为图片大家好,好久没有更新博客了,这一段时间有点忙 ...
- 信号(signal)
1.信号本质 1)信号是一种软件中断,是在软件层次上对中断的模拟: 2).在日常生活中也有很多信号,比如常见的红绿灯信号,我们看见红灯就停下,linux中的信号也是类似的,它提供一种机制告诉某个进程在 ...
- Eclipse搭建SSH框架(Struts2+Spring+Hibernate)
见识少的我经过一天多的研究才知道,在MyEclipse中搭好的框架的配置文件和jar包是通用的.接下来——亮剑! 工具:Eclipse+Tomcat+Mysql 一.先在Eclipse中配置好Tomc ...