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

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>DOM事件</title>

 </head>

 <body>

     <!-- 此为HTML事件，因为在HTML代码中 添加了onclick代码 -->

     <input type="button"  value="按钮1" id="btn1"    onclick="fun1()" />

     <script type="text/javascript">

         function fun1(){

             alert("hello world!");

         }

     </script>

     <!-- 此为DOM0级事件，不在HTML代码中添加事件，通过属性添加事件 -->

     <input type="button" value="按钮2" id="btn2" >

     <script type="text/javascript">

         //1.第一步首先获取元素

          var p=document.getElementById("btn2");

          //2.第二步通过属性添加时间的函数

          p.onclick=function (){

              alert("这是DOM0级事件");

          }

          //3.通过此语句可以删除事件

          //p.onclick=null;//此为删除事件

     </script>

     <!--此为DOM2级事件，同样不在HTML代码中添加时间，用函数添加事件-->

     <input type="button" value="按钮3" id="btn3">

     <script type="text/javascript">

         //1.第一步首先获取元素

         var x=document.getElementById("btn3");

         //2.第二步通过创建函数

         function fun3(){

             alert("这是DOM2级事件");

         }

         //然后通过函数        ↓事件  ↓函数名   ↓ture表示按捕获事件

         //                                      false按冒泡事件，

         x.addEventListener("click", fun3, false);//false兼容个浏览器

         //注意时间其实为onclick，但是DOM2级不能加on，只写后面就可以了。

     </script>

     <!--

         三种事件的比较，DOM2级事件相比于HTML事件更容日后期维护

     -->

 </body>

 </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. NopCommerce（3.9）作业调度插件

    NopCommerce(3.9)作业调度插件视频教程录制完成,下面是插件源码下载地址和插件视频教程下载地址:插件下载地址: http://www.nopcommerce.com/p/2752/jobs ...

  2. keyup实现在输入状态不发送搜索请求，停止输入后发送

    个人需求:通过keyup事件配合后台elasticsearch(弹性搜索),用户在输入状态不发送请求,等停止输入后发送请求. 这是个思考笔记,因为项目临时需要弹性搜索功能,所以临时想了这么个法子,方法 ...

  3. 一些java考过的测试题和自己制作模拟服务端和客户端

    媒体 1,java环境变量: PATH: .;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;  CLASSPATH: .;%JAVA_HOME%\jre\lib\rt.jar ...

  4. JavaScript 循环性能比较

    有一句话叫做 没有什么事是一个循环解决不了的,如果真有,那就再来一个循环. 循环的种类有很多 正向for循环,逆向for循环,while循环,for-in循环(理论上性能最差),for-each循环, ...

  5. Backbox Linux简介与配置内网IP

    总体说起来,Backbox内置的工具什么的,并不是很多,但是它集成了一些用起来很棒的工具. 比如:Beef.Sqlmap.wpscan.zenmap.msf.w3af.dns嗅探等一系列工具,传说中的 ...

  6. JavaScript严格模式有什么不同

    看ES6,瞄到“严格模式”,问了下自己什么是“严格模式”?答案好像不是很明朗,遂总结如下: 严格模式声明:“use strict”; 1.禁止变量未声明就赋值 2.限制动态绑定(属性和方法归属哪个对象 ...

  7. ipython及Python初体验

    阅读目录: Python环境体验 Python编辑器 ipython安装 Python提示符 Python初体验 print和变量 变量操作 内建函数:方法 数学运算:简单算术.随机数 关于模块 一. ...

  8. [Linux] PHP程序员玩转Linux系列-Ubuntu配置SVN服务器并搭配域名

    在线上部署网站的时候,大部分人是使用ftp,这样的方式很不方便,现在我要在线上安装上SVN的服务器,直接使用svn部署网站.因为搜盘子的服务器是ubuntu,因此下面的步骤是基于ubuntu的. 安装 ...

  9. python网络爬虫之LXML与HTMLParser

    Python lxml包用于解析html和XML文件,个人觉得比beautifulsoup要更灵活些 Lxml中的路径表达式如下: 在下面的表格中,我们已列出了一些路径表达式以及表达式的结果: 路径表 ...

  10. node项目的基本构建流程或者打开一个node项目的流程

    1.  确立项目所需要的所有依赖.框架(比如bootstrap,vue,angular等) 2. 在项目的根目录下创建一个package.json文件,package.json文件是项目的最重要文件之 ...