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. mac python3安装virtualenv出现的问题

    pip3 install virtualenv pip3 install virtualenvwrapper 安装成功后可能 找不到该命令, 解决办法 1.在 vim ~/.bashrc export ...

  2. TIDB资料收集

    https://github.com/pingcap/docs-cn https://github.com/pingcap/docs-cn/blob/master/op-guide/binary-de ...

  3. 使用spacedesk实现两台笔记本的双屏显示

    转自:https://blog.csdn.net/qq_28106269/article/details/79297132 共屏软件:https://spacedesk.net/

  4. hive 修复元数据命令 & 如何快速复制一张hive的分区表

    hive 元数据修复命令 msck repair table xxx; 也可以用于分区表的快速复制 例如你需要从线上往线下导一张分区表,但是网又没有连通,你需要如何操作呢? 1.复制建表语句 2.从线 ...

  5. yum-cron更新 CentOS yum update 不升级内核版本方法

    http://www.360doc.com/content/15/0608/17/15798950_476597844.shtml 相关yum-cron说明有一些 CentOS yum update ...

  6. spark sql运行原理

    Spark sql 对SQL语句的处理,先将SQL语句进行解析(parse)形成一个tree,然后使用Rule对Tree进行绑定,优化等处理过程,通过模式匹配对不同类型的节点采用不同操作.查询优化器是 ...

  7. canal 配置

    参考:https://www.2cto.com/database/201609/547661.html Spring配置 spring配置的原理是将整个配置抽象为两部分: xxxx-instance. ...

  8. Node 操作 MySQL 数据库

    1, 下载 mysql 依赖 => npm -i mysql 2, 写一个核心工具类, 用于获取线程池连接 mysql-util.js // 引入 mysql 数据库连接依赖 const mys ...

  9. bootsrap Collapse用法

    collapse用处还是挺多的. 使用方法先看看bootstrap官方文档:https://v3.bootcss.com/javascript/#collapse You can use a link ...

  10. synchronized 和 lock 的区别

    1.Lock不是Java语言内置的,synchronized是Java语言的关键字,因此是内置特性.Lock是一个类,通过这个类可以实现同步访问: 2.Lock和synchronized有一点非常大的 ...