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. FreeMarker之FTL指令

    assign指令 此指令用于在页面上定义一个变量 (1)定义简单类型: <#assign linkman="周先生"> 联系人:${linkman} (2)定义对象类型 ...

  2. .Net 上传文件和下载文件

    一.上传文件 1.普通的form表单提交 注意点: 请求方式必须为Post. form表单里必须设置enctype属性(enctype = "multipart/form-data" ...

  3. Mybatis学习4——一对一关联查询方法1--创建实体

    创建一个实体继承两个实体之一,另一个实体作为属性 实体1. order package pojo; import java.util.Date; public class Order { privat ...

  4. ThinkPHP3.2项目模块结构

    Demo --项目目录 Addons --插件目录 Application --应用模块目录 Admin --后台模块 Common --后台公共函数目录 function.php (可选) Conf ...

  5. unrecognized import path "golang.org/x/net/html"

    go run的时候报:unrecognized import path "golang.org/x/net/html" 应该是被墙掉了,自己去github上下载包即可 git cl ...

  6. Mycat 简单配置

    文献 https://www.cnblogs.com/parryyang/p/5758087.html 启动

  7. 使用ubuntu远程连接windows, Connect to a Windows PC from Ubuntu via Remote Desktop Connection

    from: https://www.digitalcitizen.life/connecting-windows-remote-desktop-ubuntu NOTE: This tutorial w ...

  8. Etcd源码解析(转)

    7 Etcd服务端实现 7.1 Etcd启动 Etcd有多种启动方式,我们从最简单的方式入手,也就是从embed的etcd.go开始启动,最后会启动EtcdServer. 先看看etcd.go中的启动 ...

  9. ReactiveX 学习笔记（17）使用 RxSwift + Alamofire 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  10. 解决error: only position independent executables (PIE) are supported

    在Android.mk文件中添加以下内容 LOCAL_CFLAGS += -pie -fPIE LOCAL_LDFLAGS += -pie -fPIE 原帖地址:http://blog.csdn.ne ...