HTML事件处理

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <button onclick="demo()">按钮</button>

     <script>

         function demo(){

             alert("html事件处理");//缺点是修改一处就要修改两处

         }

     </script>

 </body>

 </html>

DOM 0级事件处理

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <div>

         <button id="btn">按钮</button>

     </div>

     <script>

         var btn = document.getElementById("btn");

         btn.onclick = demo;            //DOM 0级事件处理

         btn.onclick = demo2;        //有个弊端是后面的语句会覆盖前面的语句，这里只弹demo2窗。

         function demo(){

             alert("DOM 0级事件处理");

         }

         function demo2(){

             alert("DOM 0级事件处理2");

         }

     </script>

 </body>

 </html>

DOM 2级事件处理

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <div>

         <button id="btn">按钮</button>

     </div>

     <script>

         var btn = document.getElementById("btn");

         btn.addEventListener("click",demo);        //添加DOM 2级事件

         btn.addEventListener("click",demo2);    //相对DOM 0级事件的优点是不会覆盖上面的事件，依次弹窗两次

         btn.removeEventListener("click",demo);    //清除DOM 2级事件

         function demo(){

             alert("DOM 2级事件处理");

         }

         function demo2(){

             alert("DOM 2级事件处理2");

         }

     </script>

 </body>

 </html>

javascript学习笔记（七）：事件详解的更多相关文章

  1. expect学习笔记及实例详解【转】

    1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说sp ...

  2. Redis学习笔记4-Redis配置详解

    在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...

  3. Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解

    前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY  <源路径> .. ...

  4. Android学习笔记之Activity详解

    1 理解Activity Activity就是一个包含应用程序界面的窗口,是Android四大组件之一.一个应用程序可以包含零个或多个Activity.一个Activity的生命周期是指从屏幕上显示那 ...

  5. Struts2学习笔记(二)——配置详解

    1.Struts2配置文件加载顺序: default.properties(默认常量配置) struts-default.xml(默认配置文件,主要配置bean和拦截器) struts-plugin. ...

  6. Struts2学习笔记二 配置详解

    Struts2执行流程 1.简单执行流程,如下所示: 在浏览器输入请求地址,首先会被过滤器处理,然后查找主配置文件,然后根据地址栏中输入的/hello去每个package中查找为/hello的name ...

  7. [C#] 类型学习笔记二：详解对象之间的比较

    继上一篇对象类型后,这里我们一起探讨相等的判定. 相等判断有关的4个方法 CLR中,和相等有关系的方法有这么4种: (1) 最常见的 == 运算符 (2) Object的静态方法ReferenceEq ...

  8. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...

  9. linux命令学习笔记-eval命令详解

    功能说明:重新运算求出参数的内容. 语 法:eval [参数] 补充说明:eval可读取一连串的参数,然后再依参数本身的特性来执行. 参 数:参数不限数目,彼此之间用分号分开. .eval命令将会首先 ...

  10. Javascript学习之三元运算符详解

    本文主要是通过实例为大家介绍javascript三元运算符相关内容,希望对初学者学习这部分内容有所帮助. 实例 <!DOCTYPE html> <html> <head& ...

随机推荐

  1. js 数组对象的操作方法

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...

  2. My sql 自增 虚拟列。

    在MYSQL 是没有类似MSSQL 2008 / oracle 数据库开窗函数 over() ,rank(), DENSE_RANK() ,ROW_NUMBER() 又叫窗口函数 . 当我们需要在查询 ...

  3. Ruby学习笔记3：Rendering（渲染）和 Redirect（重定向）

    1. Rendering Rendering 是特别要告诉Controller 中的methods,要哪个view file来显示给用户.We can show Views as we wish! E ...

  4. 1. ip正则表达式验证

    java: private boolean IsIpAddressValidOrEmpty(String ip) { if (ip == null) return false; String temp ...

  5. Spring注解之 Transactional

    @Transcational 用于事务回滚 @Transcational属性如下: 属性 类型 描述 value String 可选的限定描述符,制定使用的事务管理器 propogation enum ...

  6. php实现单点登录，顶级域名与子域名间共享Cookie实现单点登录原理

    这是一个简单版的php单点登录概述,如果需要实现复杂的需自己,编写复杂的ticket加解密算法. 先看张图. sso系统,http://sso.yxh.com 1 2 3 4 5 <?php   ...

  7. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  8. Dubbo 服务容错Hystrix

    一.服务者 1.pom <dependency> <groupId>org.springframework.cloud</groupId> <artifact ...

  9. Java如何判断当前系统是Windows 还是LInux

  10. Delphi 文件目录相关的操作函数

    需要User   SysUtils 取文件名 ExtractFileName(FileName); 取文件扩展名: ExtractFileExt(filename); 取文件名,不带扩展名: 方法一: ...