1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.      <title>DOM事件</title>
  6.  </head>
  7.  <body>
  8.      <!-- 此为HTML事件，因为在HTML代码中 添加了onclick代码 -->
  9.      <input type="button"  value="按钮1" id="btn1"    onclick="fun1()" />
  10.      <script type="text/javascript">
  11.          function fun1(){
  12.              alert("hello world!");
  13.          }
  14.      </script>
  15.  
  16.      <!-- 此为DOM0级事件，不在HTML代码中添加事件，通过属性添加事件 -->
  17.      <input type="button" value="按钮2" id="btn2" >
  18.      <script type="text/javascript">
  19.          //1.第一步首先获取元素
  20.           var p=document.getElementById("btn2");
  21.           //2.第二步通过属性添加时间的函数
  22.           p.onclick=function (){
  23.               alert("这是DOM0级事件");
  24.           }
  25.           //3.通过此语句可以删除事件
  26.           //p.onclick=null;//此为删除事件
  27.      </script>
  28.  
  29.      <!--此为DOM2级事件，同样不在HTML代码中添加时间，用函数添加事件-->
  30.      <input type="button" value="按钮3" id="btn3">
  31.      <script type="text/javascript">
  32.          //1.第一步首先获取元素
  33.          var x=document.getElementById("btn3");
  34.          //2.第二步通过创建函数
  35.          function fun3(){
  36.              alert("这是DOM2级事件");
  37.          }
  38.          //然后通过函数        ↓事件  ↓函数名   ↓ture表示按捕获事件
  39.          //                                      false按冒泡事件，
  40.          x.addEventListener("click", fun3, false);//false兼容个浏览器
  41.          //注意时间其实为onclick，但是DOM2级不能加on，只写后面就可以了。
  42.      </script>
  43.  
  44.      <!--
  45.          三种事件的比较，DOM2级事件相比于HTML事件更容日后期维护
  46.      -->
  47.  </body>
  48.  </html>

DOM0级事件处理、DOM2级事件处理的更多相关文章

  1. DOM0级与DOM2级

    定义: 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" t ...

  2. DOM0级同DOM2级

    DOM0级分为两个:一是写在标签内的onclick事件: <button id="btn" onclick="alert('happy')">按钮& ...

  3. javaScript——DOM1级，DOM2级，DOM3级

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

  4. js DOM0级事件和DOM2级事件

    注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...

  5. js 中用Dom2级事件处理函数(改变样式)

    下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同时展示了注册”click“事件处理函数更高级的一种方法 <!do ...

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

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

  7. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...

  8. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  9. dom0级事件和dom2级事件

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

随机推荐

  1. cas4.2.7实现单点登录

    准备前参考: cas server下载地址 cas client 下载地址 安全cookie setSecure详解 Spring通过构造方法注入的四种方式 cas 学习博文 自定义登录页和登录认证 ...

  2. void main（）， int main() 和int main（void）的区别

    1.区别是main()函数是否有返回值.2.void定义的函数没有返回值,int定义的函数返回整型值.3.void,字面意思是"无类型",常用在程序编写中对定义函数的参数类型.返回 ...

  3. Unity C# GetSaveFileName()的应用

    本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...

  4. unity3D：游戏分解之角色移动和相机跟随

          游戏中,我们经常会有这样的操作,点击场景中某个位置,角色自动移动到那个位置,同时角色一直是朝向那个位置移动的,而且相机也会一直跟着角色移动.有些游戏,鼠标滑动屏幕,相机就会围绕角色旋转. ...

  5. dedecms做好的网站怎么上传到网上？

    1.首先做好网站后把网站所有和数据库备份 dedecms  点击 系统 - 数据库备份/还原 - 全选  后---提交-----等待备份完全 备份文件在哪里:data/backupadta--- 2. ...

  6. Dojo初探之2:设置dojoConfig详解，dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式（基于dojo1.11.2）

    Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...

  7. 最短路径Floyd算法【图文详解】

    Floyd算法 1.定义概览 Floyd-Warshall算法(Floyd-Warshall algorithm)是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被 ...

  8. 夜神模拟器与HBuilder连接/cmd运行提示符/执行夜神模拟器命令/执行HBuilder命令

    第一步:启动HBuilder和夜神模拟器 第二步:通过运行电脑命令CMD进入(电脑运行命令的快捷键是:windows键+R2.Ctrl键与Alt键之间的那个键就是windows键或者点击左下角开始图标 ...

  9. 活动页怎么切图photoshop

    一 切固定大小的单个图片 1.用pc打开图像 2.按ctrl+A(全选) 3.点击 选择 ->变换选区 ->拉参考线(把参考线放到最中央)->按回车 ->ctrl+d(取消全选 ...

  10. C++判断一个数字是否为质数

    关于素数的算法是程序竞赛比较重要的数论知识,我们来看通常会使用的几个算法. 我们先来复习几个基本概念: 质数:对于大于1的自然数,若除了1和它本身,没有别的因数,则称这个数为质数,质数也叫素数.反之, ...