javascript学习笔记（七）：事件详解
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学习笔记（七）：事件详解的更多相关文章
- expect学习笔记及实例详解【转】
1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说sp ...
- Redis学习笔记4-Redis配置详解
在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...
- Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解
前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY <源路径> .. ...
- Android学习笔记之Activity详解
1 理解Activity Activity就是一个包含应用程序界面的窗口,是Android四大组件之一.一个应用程序可以包含零个或多个Activity.一个Activity的生命周期是指从屏幕上显示那 ...
- Struts2学习笔记(二)——配置详解
1.Struts2配置文件加载顺序: default.properties(默认常量配置) struts-default.xml(默认配置文件,主要配置bean和拦截器) struts-plugin. ...
- Struts2学习笔记二 配置详解
Struts2执行流程 1.简单执行流程,如下所示: 在浏览器输入请求地址,首先会被过滤器处理,然后查找主配置文件,然后根据地址栏中输入的/hello去每个package中查找为/hello的name ...
- [C#] 类型学习笔记二：详解对象之间的比较
继上一篇对象类型后,这里我们一起探讨相等的判定. 相等判断有关的4个方法 CLR中,和相等有关系的方法有这么4种: (1) 最常见的 == 运算符 (2) Object的静态方法ReferenceEq ...
- vue.js学习笔记(二)——vue-router详解
vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...
- linux命令学习笔记-eval命令详解
功能说明:重新运算求出参数的内容. 语 法:eval [参数] 补充说明:eval可读取一连串的参数,然后再依参数本身的特性来执行. 参 数:参数不限数目,彼此之间用分号分开. .eval命令将会首先 ...
- Javascript学习之三元运算符详解
本文主要是通过实例为大家介绍javascript三元运算符相关内容,希望对初学者学习这部分内容有所帮助. 实例 <!DOCTYPE html> <html> <head& ...
随机推荐
- Java课程作业之动手动脑（二）
纯随机数发生器 编写一个方法,使用以下算法生成指定数目(比如1000个)的随机整数. import java.util.Scanner; public class test { public stat ...
- win7 CMD登录本机MySQL数据库管理
- J2SE 5.0-memory management whitepaper--delete
1.垃圾回收器期职责 开辟空间 任何引用可达的对象都在内存内 回收不再使用的内存 3.垃圾回收器概念 3.1.垃圾回收器期望的性能 垃圾回收器必须安全,存活的对象不应该被释放,应该释放的对象存活的时间 ...
- PHP简单操作SqlServer数据库。
<?phpheader("content-type:text/html;charset=JBK");$serverName = ""; //数据库服务器地 ...
- spring boot 整合redis --sea 方式1
application.properties # REDIS (RedisProperties) # Redis数据库索引(默认为0) spring.redis.database=0 # Redis服 ...
- eclipse中jdk源码调试步骤
分析源码是学习一项技术内幕最有效的手段.由于正常的引入JAr包源码没法进行对源码打断点,想要深入了解源码不方便.下面就开始介绍源码调试的步骤. 1.在eclipse新建一个JAVA项目compare_ ...
- react-native android app名字 app包名、图标和启动图片设置
1.设置名字 打开 android/app/src/main/res/values/strings.xml 如图,进行修改即可 2.设置图标,最简单可以直接替换,其他后在看 在上图中几个文件夹中都有一 ...
- WPF按钮响应函数中执行操作耗时较长时，UI 界面不能实时更新——问题原因与解决方案
原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.
- 用 CentOS 7 打造合适的科研环境
这篇博文记录了我用 CentOS 7 搭建 地震学科研环境 的过程,供我个人在未来重装系统时参考.对于其他地震学科研人员,也许有借鉴意义. 阅读须知: 本文适用于个人电脑,不适用于服务器: 不推荐刚接 ...
- java swing 制作一个登陆界面，亲测有效
一.介绍 Swing 是一个为Java设计的GUI工具包. Swing是JAVA基础类的一部分. Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表. Swing提供许多比AWT ...