JavaScript-Day01
简介
JavaScript(JS) 是一种具有函数优先的轻量级,解释型或即时编译型的语言------作为开发Web页面的脚本语言而出名,但是在很多非浏览器环境中都在使用
JavaScript 基于原型编程,多范式的动态脚本语言,支持面向对象,命令式和声明式(如函数编程)风格
组成部分
-
ECMAScript(核心) :
JavaScript 语言基础(规定了 JavaScript 脚本的核心语法,如 数据类型、关键字、保留字、运算符、对象和语句等,它不属于任何浏览器;
-
DOM(文档对象模型) :
规定了访问 HTML 和 XML 的接口(提供了访问 HTML 文档(如 body、form、div、textarea 等)的途径以及操作方法);Node:Document、Element、Attr、Text
-
BOM(浏览器对象模型) :
提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)。
JavaScript 的特点
- 是一种解释型脚本语言(代码不用进行预编译);
- 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为;
- 可以直接嵌入 HTML 页面,但是写成单独的 JS 文件有利于结构和行为的分离
JS 代码编写的位置
html 和 JS 都是直接交给浏览器去执行和渲染, 每个浏览器中都有对应的JS 引擎
-
直接将JS代码写在 HTML 的 script 标签中
script 标签可以存放在 html 标签中的任何位置,但是推荐写在 head标签里面。
注意:HTML 中 JS 的所有代码都是顺序执行,出错就不在往下继续执行
-
编写在 JS 文件中
单独编写一个JS文件用来写JavaScript 代码,在需要使用的 HTML 页面直接引入该JS文件即可
好处:可以使 JS 文件和 HTML 文件相分离,一个 JS 文件可以被多个 HTML 文件使用,维护起来也更加方便
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script> /*内嵌式,直接交由浏览器的JS引擎处理,不推荐使用内嵌式*/ console.log("HELLO WORLD!") </script>--> <!--引入外部JS文件--> <!--注意: script 不能使用单标签--> <script src="../js/01-代码位置.js"> /*在script之间写JS代码但是是引入外部JS文件时标签之间的JS代码不会执行*/ </script> </head> <body> <!--不易维护,不推荐使用--> <a href="javascript: console.log('aaa')">DEL</a> </body> </html>
注意:
- 方式 2 和方式 1 不能杂糅使用
- 在方式 2 中的 script 标签是双标签,不能改成单标签
JS 的基本语法----跟 Java 基本一致
JavaScript 中的标识符
变量,常量,函数,语句块也有名字,我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成,标识符不能以数字开头,不能是 JavaScript 中的保留字或关键字。
JavaScript 严格区分大小写
username 和 userName 是两个完全不同的符号。
JavaScript 程序代码的格式
每条功能执行语句的最后必须用分号 ; 结束每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 。语句块使用 {} 表示
JavaScript 程序的注释
/…/中可以嵌套“//”注释,但不能嵌套“ /…/ ”。 、/**…文档注释.*/
JS 中的关键字和保留字
typeof,var,function,delete等
变量
作用
系统为之设置一个标识,程序可以使用变量名来指向具体的对象内存,并通过变量名来获得对应的对象
声明变量:JS 是若类型的语言,未严格区分数据格式
使用 var 关键字,如:var username;若变量未初始化,默认是 undefined
也可以在声明变量的时候赋值
变量的类型由常量值来确定,值是什么类型,变量就对应是什么类型
注意:不事先声明变量就直接使用会报错
打印变量
数据类型
概述
-
JavaScript中声明变量很简单,使用一个"var" 即可,好处在于可以给这个变量重新赋予不同类型的值,并不是固定类型的
但是JavaScript 中还是有数据类型,只是声明时统一使用无类型的"var" 关键字而已
-
简单类型: String,Number,Boolean,NULL,undefined
-
引用对象类型:Object,Array,Function
常用的数据类型
-
Number 数值
- 整数常量: 1
- 实数常量: 12.34,5E7,4s3等
- 特殊类型: NaN(不是数字的数字)
-
Boolean 布尔
两种值: true 和 false
-
String 字符串
值可以使用单引号或者双引号括起来。注意 js 中没有 char 类型,所以 ‘a’ 也是一个字符串
-
其他常量
null 常量、undefined 常量 (定义未赋值)
typeof 运算符
-
用于在 JS 中获取变量的数据类型
<head> <meta charset="UTF-8"> <title>数据类型</title> <script> var a = "张三"; //获取数据类型 console.log(typeof a); a = 1; console.log(typeof a); a = 1.2; console.log(typeof a) a = true; console.log(typeof a); a = ""; console.log(typeof a); // object a = null; console.log(typeof a) </script> </head>
注意:
-
在 js 中只有" var 变量名 = 值 ", 不存在 " 变量类型 变量名 = 值 "
-
变量名不能使用name
name 是自带的一个成员变量,类型无法修改,所以结果一直为 string
运算符----基本同Java中一致
比较运算符
逻辑运算符
-
在逻辑运算中 0,“”,false,NaN,undefined,null 表示为 false,其他类型的数据都表示为 true
-
&&
从左往右依次判断,返回第一个为false的值,否则返回最后一个为true的值
找 FALSE,找到就返回对应的值,整个表达式结果都为true则返回最后一个true的值
-
||
从左往右依次判断,返回第一个为true的值,否则返回最后一个为false的值
找 TRUE,找到就返回对应的值,整个表达式结果都为false则返回最后一个false的值
console.log(true && true); //true console.log(1 && true); //true console.log(1 && 2); //2 console.log("A" && 2); //2 console.log("" && 2); //"" console.log(null && "B"); //null console.log("A" && "B"); //B console.log(1 && 2 && 3); //3 console.log(1 && null && 3); //null console.log("" && null && 0);//"" ================================== console.log(true || true); //true console.log(1 || true); //1 console.log(1 || 2); //1 console.log("A" || 2); //A console.log("" || 2); //2 console.log(null || "B"); //B console.log("A" || "B"); //A console.log(1 || 2 || 3); //1 console.log(1 || null || 3); //1 console.log("" || null || 0);//0 =================================== function func(x){ x = x || 0; console.log(x); //如果x有为true的值,则返回x的值,否则返回0 }
函数
函数概述
作用和 Java 中的方法一样,都是为了实现代码的复用
将脚本编写为函数,避免页面载入时就执行该脚本。
写在函数里面的 js 代码,只需要定义一次,就可以多次调用,提高代码的
复用性。
函数的定义
-
普通函数的语法:
// Java 中方法的定义 /* public String doWork(String name){ return name; } */ // JS中不用指定函数的返回值类型(无论怎样都有返回,JS是弱类型语言) function 函数名([参数名称1, 参数名称2, ..., 参数名称N]){ //程序代码 [return 值;] }
注意:参数和返回值都是可选的,由自己决定, 如果函数没有返回值就默认返回 undefined
// 普通函数定义,有参有返回 function doWork1(String name){ return name; } // 普通函数定义,无参无返回 function doWork2(){ console.log(name); }
-
定义匿名函数语法
var 变量名 = function([参数名1,...]) { //程序代码 [return 值;] }
<head> <meta charset="UTF-8"> <title>Title</title> <script> // 命名函数 function fun() {} // 匿名函数 // 立即执行函数 // 等同于-->console.log("匿名函数"); ----存在即合理 (function() { console.log("匿名函数") })(); var fun2 = function () { console.log("匿名函数2"); } console.log(fun2()); fun2(); //不加括号fun3就是函数 //加括号就是调用函数 // 函数 var fun3 = fun2(); </script> </head>
函数的调用
函数定义好之后不会立即执行,需要执行到调用函数的代码时才会执行
语法:
var 变量 = 函数名(实参1,实参2,实参3,...);
如果方法有返回值那么变量接收到的就是实际返回的值
方法如果没有返回值,那么变量的值为 undefined,此时不用接收
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//函数的定义
/**
* 语法:
* function 函数名(形参名...) {
* //函数体
* [return 返回值]
* }
*/
function add(num1, num2) {
var sum = num1 + num2;
console.log(sum);
// return sum;//无论怎样都会有返回值,函数没有返回 undefined
}
//函数的调用
//对象名.函数名(实参)
// window.add() ----默认的对象
add(888,1688);
console.log(window);
// 普通函数定义,有参有返回
function doWork1(String name){
return name;
}
// 普通函数定义,无参无返回
function doWork2(){
console.log(name);
}
// 匿名函数定义,把没有名称的函数赋值给一个变量(当变量的值)
var add = function(x, y){
return x+y;
}
// 多个参数多行函数体
var fun1 = (username,age) => {
console.log(username);
console.log(age);
}
// 普通函数调用
var ret1 = doWork1("小狼");
var ret2 = doWork2("小码");
console.log(ret1); // 小狼
console.log(ret2); // 小码 --> undefined
// 匿名函数调用
add(1,3); // 直接把变量作为函数名去调用匿名行数
// 把匿名函数作为变量的值传递给另一个函数(printAddResult),在另一个函数中来调用
function printAddResult(add){
console.log(add(3,5));
}
// 调用printAddResult 时带入匿名函数add
printAddResult(add); // 传入已定义的函数
// 调用 printAddResult 时重新定义函数
printAddResult(function (x,y){
return x + y;
});
</script>
</head>
arguments
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//求N个数的和
//每个函数都有一个内置的arguments,存储了函数的所有实参
function add() {
console.log(arguments)
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
console.log(sum)
}
add(1);
add(1,2);
add(1,2,3);
</script>
</head>
面向对象
JavaScript 提供了一个构造函数(Constructor)模式。 所谓”构造函数”,其实就是一个普通函数,但是内部使用了 this 变量。对构造函数使用 new运算符,就能生成实例,并且 this 变量会绑定在实例对象上。加 new 执行的函数构造内部变化:自动生成一个对象,this 指向这个新创建的对象,函数自动返回这个新创建的对象
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//类的定义
function Person(name,age) {
//添加属性
this.name=name;
this.age=age;
//添加方法
this.eat = function () {
console.log(this.name + "想称霸")
}
}
//对象的创建
var person = new Person("winter框架",22);
console.log(person)
//调用方法
person.eat();
//访问对象的属性
console.log(person.name);
console.log(person.age);
person.name="项羽";
person.age="30";
console.log(person)
//可以给对象动态添加或者删除属性------方法同理
person.xxx="hhhh";
console.log(person);
//delete person.xxx;
console.log(person)
person.run = function () {
console.log("跑步");
}
person.run();
//创建对象的快捷方式
var obj = {
name:"王五",
age:20,
sleep:function () {
console.log("困了就滚回去睡觉")
}
}
console.log(obj)
</script>
</head>
内置对象
Object
-
constructor
对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数
-
Prototype
对该对象的对象原型的引用。对于所有的对象,它默认返回 Object对象的一个实例
Date
- Date() 返回当前日期和事件
- getFullYear() 获取Date对象中四位数字的年份
- getMonth() 获取Date对象中的月份(0~11)
- getDate() 获取Date对象中的天(1~31)
- getHours() 获取Date对象中的小时
- getMinutes() 获取Date对象中的分钟
- getSeconds() 获取Date对象中的秒
String
属性:
- length 字符个数
方法
- charAt(index) 返回指定位置的字符
- concat(string1,string2,string3,…) 拼接字符串
- fromCharCode(num) 可接受一个指定的 Unicode 值,然后返回一个字符串
- subString(start,stop) 提取字符串中两个指定的索引号之间的字符
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Person(name,age) {
//添加属性
this.name=name;
this.age=age;
//添加方法
this.eat = function () {
console.log(this.name + "想称霸")
}
}
var p = new Person();
//使用内置对象
var obj = {};
console.log(obj.constructor);
console.log(obj.prototype);
var d = new Date();
console.log(d.getFullYear());
console.log(d.getTime());//1970-01-01 00:00:00 开始的毫秒值
</script>
</head>
数组
数组的定义方式
-
创建数组对象
var arr = new Array();
-
类似数组中的静态初始化
var arr2 = new Array(“西施”,“王昭君”,“貂蝉”,“杨贵妃”);
var arr2 = new Array(1, 2, 3, 4);
-
类似数组的动态初始化
var arr3 = new Array(4);//这里的4是数组的长度,而不是元素
-
简写
var arr4 = [“西施”, “王昭君”, “貂蝉”, “杨贵妃”];
注意: 对于JS 中的数组是不会出现索引越界的异常,数组也不是定长的
数组中的常用属性和方法
-
属性
length 获取数组长度
-
方法
-
concat(array1, array2, …, arrayX):连接两个或更多的数组,并返回结果。
-
join(separator):把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
-
reverse():颠倒数组中元素的顺序(该方法会改变原来的数组,而不会创建新的数组)。
-
slice(start[, end]):从某个已有的数组返回选定的元素(返回的是一个新数组)。
-
pop():删除并返回数组的最后一个元素。
-
shift():删除并返回数组的第一个元素。
-
push(newelement1, newelement2, …, newelementX):向数组的末尾添加一个或更多元素,并返回新的长度。
-
unshift(newelement1, newelement2, …, newelementX):向数组的开头添加一个或更多元素,并返回新的长度。
-
splice(index, howmany, element1, …, elementX):用于插入、删除或替换数组的元素
-
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//创建数组
var scores = new Array(68,69,14,15,95,99);
console.log(scores);
//这里的6是指数组长度
var nums = new Array(6);
console.log(nums);
//简写
var nums1 = [1,7,5,5,1,5,4]
console.log(nums1);
//操作数组
//取元素
console.log(nums1[2]);
//改元素
nums1[2] = 33;
console.log(nums1[2]);
console.log(nums1[10]);//取值可以越界,打印undefined
nums1[10] = 22;//索引不会越界,但是中间没有的会是空属性
console.log(nums1);
console.log("===============================");
var nums2 = [1,5,5,6,8,4,1];
var nums3 = [1,4,56,4,5,454,54,5];
console.log(nums2.concat(nums3));
console.log(nums2.join("|"));
console.log(nums2.slice(0, 4));
console.log(nums2.pop());
console.log(nums2);
console.log(nums2.push("a", "b", "c"));
console.log(nums2);
console.log("===============================");
//删除
nums2.splice(0,1);
console.log(nums2);
//添加
nums2.splice(0,0,"A","B");
console.log(nums2);
//修改
nums2.splice(0,1,"HH");
console.log(nums2);
</script>
</head>
数组的遍历方式
-
for—基本同Java中一致
var arr = ["A","B","C","D"]; for(var i = 0; i< arr.length; i++){ console.log(arr[i]); }
-
forEach
数组中的元素有几个该方法中的回调函数就会执行几次
第一个参数是数组中的元素
第二个参数是遍历的数组里面元素的索引
第三个参数是遍历的数组本身
性能略低于普通循环
var arr = ["A","B","C","D"]; arr.forEach(function(item,index,array){ console.log(item); }); //函数中的 arguments 存入了调用函数是代入的实际数据,可通过自带属性获取代入的数据
-
map
遍历数组中的每个元素,将回调函数中的返回值存入一个新数组中并返回,可以用于对数组中的元素做操作
var arr = ["A","B","C","D"]; var newArr = arr.map(function(item,index,array){ return item+index; }); //newArr中的数据:["A1","B2","C3","D4"]
-
for-in
可以遍历数组(获取数组的索引),也可以遍历对象(获取对象的属性名)
//如果是遍历数组,i对应的是数组的索引 var arr = ["A","B","C","D"]; for(var i in arr){ console.log(i); //索引 console.log(arr[i]); //元素 } //如果是遍历对象,name对应的是属性名 var obj = new Object(); // 给 obj 对象增加属性 obj.username = "小狼"; obj.age = 18; for(var name in obj){ console.log(name); //属性名 console.log(obj[name]); }
JavaScript-Day02
DOM
DOM 概述
DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C DOM 的规范,DOM 是一种与浏览器,平台,语言无关的接口,可以动态的修改 XML 以及 HTML
D: 文档 -----HTML 或者 XML 文档
O: 对象-----document对象的属性和方法
M: 模型
HTML DOM
DOM 是将 HTML 文档表达为树结构,定义了访问和操作 HTML 文档的标准方法
DOM 树:节点(Node)的层次
- 文档节点
- 元素节点
- 属性节点
- 文本节点
获取元素
两个核心:
- 什么时候去获取元素?-------只有元素被加载到 document 中才可以获取
- 怎么获取元素?
元素获取方式:
-
通过元素 id 获取
getElementById,返回 拥有指定 id 的第一个元素,如果不存在则返回null
-
通过标签名字获取
getElementByTagName,返回一个包括所有给定标签名称的元素集合,如果没有匹配的元素就返回一个空集合
-
通过 class 名字
getElementByClassName,返回一个包含所有指定 class 名称的元素集合,可以在任意元素上调用该方法
<head> <meta charset="UTF-8"> <title>Title</title> <script> //代码的执行顺序是从上往下 //window.onload:文档加载事件,回调函数在文档加载完成之后才执行 window.onload = function () { //根据id属性获取唯一元素 let elementById = document.getElementById("ul"); console.log(elementById) //根据标签名获取元素 var list = document.getElementsByTagName("ul"); console.log(list[0]); //根据class属性获取元素 var uls = document.getElementsByClassName("clz"); console.log(uls); } </script> </head> <body> <ul id="ul" class="clz"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul id="ul2" class="clz"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>
元素节点的属性操作
-
操作标准属性
-
操作自定义属性
<head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var box = document.getElementById("box"); //获取属性值 console.log(box.id); console.log(box.style["background-color"]); console.log(box.className); console.log(box["className"]); console.log(box.getAttribute("id")); //设置属性值 box.id = "xxx"; box.style["width"] = "400px"; box.style["height"] = "400px"; box.style["background-color"] = "pink"; box.setAttribute("class","xxx"); //自定义属性 ---只能使用getAttribute和setAttribute操作 console.log(box.xxx); console.log(box["xxx"]); console.log(box.getAttribute("xxx")); box.xxx="ooooo"; box["xxx"] = "ooooooooo"; box.setAttribute("xxx","oooooooooooooooooooo"); //如果属性名和属性值是相同的,此时取到的值是Boolean类型 // selected/checked/readonly console.log(document.getElementById("gender").checked);// true/false document.getElementById("gender").checked = false; } </script> </head> <body> <div id="box" style="background-color:#fff;"></div> <input type="radio" id="gender" checked="checked">男 </body>
Node 对象的属性和方法
常用属性
属性名 | 描述 |
---|---|
firstChild | 指向在字节点列表中的第一个节点 |
lastChild | 指向在子节点列表中的最后一个节点 |
childNodes | 所有子节点的列表 |
previousSibling | 指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null |
nextSibling | 指向最后一个兄弟节点,如果这个节点就是最后一个节点,那么该值为null |
parentNode | 当前节点的父节点 |
常用方法
方法名 | 描述 |
---|---|
hasChildNodes() | 是否包含子节点 |
appendChild(node) | 将节点添加到子节点列表的末尾 |
removeChild(node) | 从子节点中删除node |
replaceChild(newNode,oldNode) | 替换子节点 |
insertBefore(newNode,refNode) | 在一个子节点前插入一个新的子节点,在refNode元素前插入newNode |
元素节点的增删改
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
function fun1() {
//把span1添加到div1中
//这个方法根据选择器获取单个元素
var span1 = document.querySelector("#span1");
var div1 = document.querySelector("#div1");
div1.appendChild(span1);
}
//这个方法可以根据选择器获取多个元素
function fun2() {
var spans = document.querySelectorAll("span");
var div2 = document.querySelector("#div2");
spans.forEach(function (span){
div2.appendChild(span);
})
}
//
function fun3() {
var div3 = document.querySelector("#div3");
//获取元素中的内容(文本/HTML)
console.log(div3.innerText);
console.log(div3.innerHTML);
//直接追加一个HTML标签片段
//div3.innerHTML += '<span id="span4">span4</span>'
//创建一个新的元素
var span = document.createElement("span");
//设置id属性
span.id = "span4";
//添加该标签内的文本
span.innerText = "span4";
//追加
div3.appendChild(span);
}
//
function fun4() {
//新建诸葛亮---option
var newOption = document.createElement("option");
newOption.id = "item5";
newOption.innerText = "诸葛亮";
//获取关羽
var refOption = document.querySelector("#item2");
console.log(refOption);
//将诸葛亮插入到关羽前面
var select = document.querySelector("#character");
select.insertBefore(newOption, refOption);
}
function fun5() {
var newOption = document.createElement("option");
newOption.id="item6";
newOption.innerText="魏延";
var oldOption = document.querySelector("#item2");
var select = document.querySelector("#character");
select.replaceChild(newOption,oldOption);
}
function fun6() {
var select = document.querySelector("#character");
var item3 = document.querySelector("#item3");
select.removeChild(item3);
}
</script>
</head>
<body>
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
<div id="div1" style="background-color: green">1</div>
<div id="div2" style="background-color: yellow">2</div>
<div id="div3" style="background-color: red;">3</div>
<button onclick="fun1()">把span1添加到div1</button>
<button onclick="fun2()">把span添加到div2</button>
<button onclick="fun3()">新建span元素添加到div3</button><br/>
<select id="character" size="7">
<option id="item1">刘备</option>
<option id="item2">关羽</option>
<option id="item3">张飞</option>
<option id="item4">赵云</option>
</select>
<button onclick="fun4()">在关羽之前插入诸葛亮</button>
<button onclick="fun5()">把关羽换成魏延</button>
<button onclick="fun6()">删除张飞</button><br/>
</body>
事件处理
事件驱动编程
所谓事件驱动,简单地说就是你怎么触碰按钮(即产生什么事件),电脑执行什么操作(即调用什么函数). 当然事件不仅限于用户的操作. 当对象处于某种状态时,可以发出一个消息通知,然后对这个消息感兴趣的程序就可以执行。
事件驱动编程的核心对象
-
事件源
谁发出事件通知,发出消息;谁就是事件主体(通常是元素和标签)
-
事件名称
发出什么样的通知的名称
-
事件响应函数
谁对这个事件感兴趣,当这个事件发生时要执行什么样的操作
-
事件对象
一般来说,当事件发生时,会产生一个描述该事件的具体对象,包括具体的参数等一起发给响应函数,好让他们通过事件对象来了解事件更加详细的信息
事件类型(常用)
鼠标事件
属性 | 描述 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onmousedown | 鼠标按钮被按下 |
onmouseleave | 当鼠标指针移出元素时触发 |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | onmouseout |
onmouseup | 鼠标按键被松开 |
键盘事件
属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
表单事件 form
属性 | 描述 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 该事件在表单元素的内容改变时触发 |
onfocus | 元素获取焦点时触发 |
onsubmit | 表单提交时触发 |
事件绑定的方式
元素本身是不自带事件的, 如果需要给元素添加功能的时候, 需要先给其绑定上对应的事件, 然后用户触发元素对应的事件时,执行之前绑定好的响应函数
给元素绑定事件有三种方式
-
在元素上使用onXxx属性绑定
xxx事件名称/类型
<input type="button" value="点我啊" onclick="alert('点我干 啥?');"/>
缺点: 将 HTML 和 JS 代码交错在一起, 维护性差
-
通过元素对象的时间绑定属性
<head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var deleteBtn = document.querySelector("#deleteBtn"); //Cannot set properties of null (setting 'onclick') //不能给一个null设置onclick属性-----加上window.onload deleteBtn.onclick = function (e) { console.log("删除"); //拿到事件源 console.log(document.querySelector("#deleteBtn")); console.log(this); //事件对象 console.log(e); console.log(arguments); } } </script> </head> <body> <!--事件源--> <button id="deleteBtn">删除</button> </body>
好处: 使 JS 和 HTML 完全分离开,方便后期维护
注意: 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码, 这样才能绑定成功.
绑定事件的 JS 代码 的方式
-
在元素后面编写JS 代码
<input type="button" value="点我啊" id="btn"/> <script> //在input元素被加载后再根据id获取这个元素,可行 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("点我干啥"); } </script>
-
使用文档加载事件, 在整个html文档加载完成之后再获取元素,绑定事件
window.onload = function(){ //这个函数中的代码会在整个文档加载完成之后再执行 //此时获取元素,可行 var btn = document.getElementById("btn"); btn.onclick = function(){ alert("点我干啥"); } }
缺点:
不能为元素绑定多次相同的事件,因为是通过为事件属性赋值响应函数的方式来实现的,后面的赋值会将前面的覆盖掉
-
-
通过元素对象的方法绑定事件 addEvenListener
<head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { function del(e){ console.log(this);//事件源 console.log(e);//事件对象 console.log("delete1"); } var deleteBtn = document.querySelector("#deleteBtn"); deleteBtn.addEventListener("click",del); deleteBtn.addEventListener("click",function (){ console.log("delete2"); }) deleteBtn.addEventListener("click",function (){ console.log("delete3"); }) //移除第一个点击事件,把第一个点击事件定义成一个单独的函数r deleteBtn.removeEventListener("click",del); } </script> </head> <body> <!--事件源--> <button id="deleteBtn">删除</button> </body>0