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& ...
随机推荐
- NodeJS + React + Webpack + Echarts
最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1. 在react里封装echarts组件,并调用后端API. (参考的 ...
- Android 开发第二步——建立文件
先以Hello World工程为样板 启动AVD 但在编程过程中遇到了非常棘手的问题 等待下一期完成
- 2. springboot启动报错：Field userMapper in com.service.UserService required a bean of type 'com.dao.UserMapper' that could not be found.
报错信息: 2018-06-25 14:26:17.103 WARN 49752 --- [ restartedMain] ationConfigEmbeddedWebApplicationCon ...
- ASPxCallbackPanel(珍藏版)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AspxCallbackPane ...
- oracle数据库启动流程及登录认证方式详解
转自:https://www.2cto.com/database/201803/726644.html ■ oracle启动流程-windows下 1) lsnrctl start (启动监听) ...
- react-native 相对项目路径导入组件
在使用react-native的时候,经常要自定义很多组件,但是只能使用../../../的方式,如果目录多了一长串,书写很烦,看着也不好看. 方法一: 例如你想引入utils里面的文件,不想../. ...
- subsets 回溯 给定集合，枚举子集。元素不重复
这个回溯感觉掌握的有些熟练了. 两种方式,递归和循环. 感觉就是套框架了. /** * Return an array of arrays of size *returnSize. * The siz ...
- html 基础之canvas 和 localStorage
1,建立一个canvas 画布: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- es6 初级之展开运算符
1.1 先看一个求最大值的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- C++操作oracle数据库
数据库操作方式:可以采用ADO方式,也可以采用oracle本身提供的Proc*C/C++或者是OCCI方式操作数据库. 连接方式:可以是客户端连接.也可以是服务器端连接. 数据库配置:无论是何种连 ...