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. IBeacon协议分析

    IBeacon协议分析 跳转至: 导航. 搜索 对于一个UUID是E2C56DB5-DFFB-48D2-B060-D0F5A71096E0, major是0, minjor是0的iBeacon,此时的 ...

  2. Maven下载私服上的jar包（全局）

    <mirror> <id>maven-public</id> <mirrorOf>maven-public</mirrorOf> <n ...

  3. gzip0

    但是Apache是专门为PHP所匹配的,其兼容性最好),类似于IIS.下面我们具体来说说Apache里怎么启用gzip压缩: Apache启用gzip 如果要开启gzip的话,一定要打开下面二个模块. ...

  4. Cannot invoke Tomcat manager: socket write error

    一开始, 参照 http://www.cnblogs.com/yezhenhan/archive/2012/07/17/2594684.html mvn tomcat:redeploy 出现: Can ...

  5. 12. myeclipse遇到Initializing java tooling（1%）终极解决办法

    问题描述: 打开myeclipse,发现myeclipse宕掉了,并且出现这样的提示:关于Initializing java tooling(1%)... 解决方案: 找到eclipse目录,编辑ec ...

  6. jsp中文乱码

    <%@page pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content= ...

  7. js 简单算法

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

  8. Lua的特点

    特点: Lua是一个脚本语言.是目前速度最快的脚本语言.它能与C/C++代码互相调用. Lua脚本是跨平台的,是要使用Lua基本语法和标准库写的脚本,都是可以跨平台的(用了扩展库则不一定). Lua源 ...

  9. django form 的内置字段类型

    定义的form类如下: from django import forms from django.forms import widgets class AddHouseForm(forms.Form) ...

  10. day21-类的组合

    一.面向对象的组合用法 软件重用的重要方式除了继承之外还有另外一种方式,即:组合组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合 用组合的方式建立了类与组合的类之间的关系,它是一种‘ ...