前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题。
 同时推荐伙伴们可以看看尚学堂有关JavaScript BOM的文章:《细说javascript BOM》

一.DOM0级事件

0级DOM分为两种

  1. 行内事件:在标签中写事件
  2. 元素.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级事件的更多相关文章

  1. DOM0级事件处理、DOM2级事件处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  3. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  4. JavaScript 之默认行为 DOM2级,事件委托机制

    1. 事件默认行为及阻止方式    1.1 浏览器的默认行为       JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等.    1.2 ...

  5. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  6. javaScript——DOM1级,DOM2级,DOM3级

    DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...

  7. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  8. DOM2级事件处理程序

    DOM2级时间定义了两个方法:addEventListener() 和removeEventListener() 他们都接受3个参数:1)要处理的事件名   2)作为事件处理程序的函数 3)一个布尔值 ...

  9. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

随机推荐

  1. 解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    在setting.json中加入如下内容 { "eslint.autoFixOnSave": true, "eslint.validate": [ " ...

  2. centos7下编译安装php7.3

    一.下载php7.3的源码 https://www.php.net/downloads.php 下载php-7.3.4.tar.gz 二.安装gcc,gcc-c++,kernel-devel yum ...

  3. Linux 学习笔记 4:Shell 编程

    1.简单过滤器 a. pr [OPTION] [FILE] 功能:改变文件打印格式 选项 功能 -l n 设定页面长度为n行 -w n 设定页面总宽度为n个字符(不够会被砍掉) -h str 设定页眉 ...

  4. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  5. 2018.09.29 Lua

    转自:https://zybuluo.com/lisaisacat/note/636399  谢谢 Lua 基础简明教程 脚本开发   目录 Lua 基础简明教程 目录 注释 Lua 编程 语句块 赋 ...

  6. mac电脑使用技巧和相关快捷键

    移动与选取 1. 光标移动 刚从 Windows 转过来的时候可能会发现,Mac 上没有 Home 和 End 键.其实,直接这样就好了: Cmd + ←  移至行首 (Home)Cmd + →  移 ...

  7. Isight 命令行运行任务

    说明书参考:https://abaqus-docs.mit.edu/2017/English/DSSIMULIA_Established.htm 不一定对版本.但是大部分还可以. 不对的可以在命令里敲 ...

  8. eclipse汉化包

    把eclipse英文汉化成中文,首先我们要知道自己安装的eclipse版本,可以在eclipse的安装目录下找到readme用浏览器打开查看版本,或者用记事本打开.eclipseproduct文件,查 ...

  9. Django 中文和时区设置

    Django 语言和时区的设置都在 settings.py 文件中. 中文设置 LANGUAGE_CODE:设置语言,英语 en-us,中文简体 zh-Hans,中文繁体 zh-Hant 在 MIDD ...

  10. Linux开发黑客

    参考网站:http://blog.chinaunix.net/uid/20543672/abstract/1.html tekkamanninja