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. ansible安装使用入门

    生成对称密钥 执行以下命令,会在当前用户的.ssh目录下生成id_rsa和id_rsa_pub两个文件. ssh-keygen -t rsa root用户:/root/.ssh 普通用户:/home/ ...

  2. Spring MVC 学习笔记8 —— 实现简单的用户管理（4）用户登录

    Spring MVC 学习笔记8 -- 实现简单的用户管理(4)用户登录 增删改查,login 1. login.jsp,写在外面,及跟WEB-INF同一级目录,如:ls Webcontent; &g ...

  3. C++学习基础十五--sizeof的常见使用

    sizeof的常见用法 1. 基本类型所占的内存大小 类型 32位系统(字节) 64位系统(字节) char 1 1 int 4 4 short 2 2 long 4 8 float 4 4 doub ...

  4. Windows下开启Redis PHP拓展

    1. 安装Redis windows下redis的版本,git地址https://github.com/MSOpenTech/redis/releases 2. 打开phpInfo,查看当前PHP是N ...

  5. js 简单算法

    1. 嵌套数组打平并且去重 ,,,,,,,,[,,,,[,,]]]; var obj = {};//去重标识 function test(data) { var newArr = []; for ( ...

  6. VUE.js全局变量的定义

    模块化之后,想用js全局变量,遇到点困难.搜索资料后搞定,大概2个步骤: 1.定义一个vue模块,const定义变量,并用export对外暴露. Globle.vue <script> / ...

  7. LInux 阿里云系统遇到挖矿程序

    参考 https://blog.csdn.net/qq_37837029/article/details/82314428 重要的一点,移除下面文件里面的定时任务 /var/spool/cron/cr ...

  8. vue - @click 用到的修饰符

    1.vue提供的方法 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --><a v-on:click.st ...

  9. guava collection/cache初探

    写了上面一篇,看了点eventbus相关的guava代码后,发现里面用到了很多其他guava包里的方法,所以顺着看一下,比如之前用到的map都是guava自己的 Multimap:可以包含有几个重复K ...

  10. MySQL查询优化(转)

    在分析性能欠佳的查询时,应考虑: 1) 应用程序是否正获取超过需要的数据,即访问了过多的行或列. 2) Mysql服务器是否分析了超过需要的行. 如果发现访问的数据行数很大,而生成的结果中数据行很少, ...