JavaScript篇（二）

JavaScript篇（二）

小生整理之前学习做过的笔记，分享出来，后续笔记会陆续整理出来，不喜勿喷~~~~~
如有错误，虔请各位大牛指正~~~
下期jquery见~~

1、数组

数组（Array）是按照次序排列的一组值，每个值都有编号（从0开始），整个数组用方括号表示。

var arr = ['Jerry', 'Ann', 'Bonnie'];

两端的方括号是数组的标志,Jerry是0号的位置，Ann是1号位置，以此类推。（位置也被称为是下标或者索引）

除了在定义的时候赋值，数组也可以先定义后赋值

var arr = [];
arr[0] = 'Jerry';
arr[1] = 'Ann';
arr[2] = 'Bonnie';

任何数据类型都可以放进数组

var arr = [ 100, [1, 2, 3],false ];

如果数组的元素还是数组，就形成了多维数组

var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4

length属性

['Jerry', 'Ann', 'Bob'].length // 3

数组的遍历

数组的遍历可以考虑使用for循环或while循环

var a = ['Jerry', 'Ann', 'Bob'];
// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}
// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

for…in数组遍历

var a = ['sxt', 'baizhan', 'it'];
for (var i in a) {
  console.log(a[i]);
}

数组静态方法Array.isArray

Array.isArray方法返回一个布尔值，表示参数是否为数组，它可以弥补typeOf运算符的不足

var arr = ["Ann", 100, true];
console.log(typeof arr); // object

var arr = ['Jerry', 'Ann', 'Bob'];
Array.isArray(arr) // true

数组方法 push()/pop()

push方法用于在数组的末端添加一个或者多个元素，并且放回添加新元素的数组长度

注意：该方法会改变原来的数组

var arr = [];
arr.push("陈序源") // 1
arr.push('Jerry') // 2
arr.push(true, {}) // 4
arr // [陈序源, 'Jerry', true, {}]

pop方法用于删除数组的最后一个元素，并返回该元素。该方法会改变原数组

var arr = ['Jerry', 'Ann', 'WEB前端'];
arr.pop() // 'WEB前端'
arr // ['Jerry', 'Ann']

数组方法shift()/unshift()

shift方法用于删除数组的一个元素，并返回该元素。

该方法会改变原来的数组

var arr = ['Jerry', 'Ann', 'WEB前端'];
arr.shift() // 'Jerry'
arr // ['Ann', 'WEB前端']

shift方法可以遍历并清空一个数组

var list = [1, 2, 3, 4, 5, 6];
var item;

while (item = list.shift()) {
  console.log(item);
}

list // []

unshift方法用于在数组的一个位置添加元素，并返回添加新元素后的数组长度，该方法会改变数组的长度

var arr = ['Jerry', 'Ann', 'WEB前端'];

arr.unshift('Bob'); // 4
arr // ['Bob', 'Jerry', 'Ann', 'WEB前端']

数组方法join()方法

join方法以指定的参数作为分割符，将所有的数组成员连接为一个字符串返回，如果不提供参数，默认用逗号分开

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

如果数组成员数是undefined或者null或者空位，会被转成空字符串

[undefined, null].join('#')
// '#'

['a', 'b'].join('-')
// 'a--b'

数组的join配合字符串的split可以实现数组与字符串的互换

var arr = ["a","b","c"];
2 var myArr = arr.join("");
3 console.log(myArr);
console.log(myArr.split(""));

数组方法concat()

concat方法用于多几个数组的合并。他们将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

应用场景

上拉场景，合并数据

数组方法reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组，该方法会改变原数组

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

实现一个字符串反排列

var str = "hello";
str.split("").reverse().join("")

数组方法indexOf()

indexOf方法给定元素在数组中第一次出现的位置，如果没有则返回-1

var arr = ['Jerry', 'Ann', 'Bob'];
arr.indexOf('Ann') // 1
arr.indexOf('tony') // -1

indexOf方法还可以接受第二个参数，表示搜索位置的开始

['Jerry', 'Ann','tony'].indexOf('Jerry'
, 1) // -1

2、函数

函数是一段可以反复调用大的代码块

函数的声明

function命令：function命令声明的代码块，就是一个函数，function命令后面是函数名，函数名后面是一对圆括号，里面是传入的函数的参数，函数放在大括号内

function print(s) {
  console.log(s);
}

函数名的提升

JavaScript引擎将函数名是为同变量名，所以采用function的命令声明函数时，整个函数会像变量声明一样，被提升到代码的头部

add();
function add() {}

函数参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数

function square(x) {
 console.log(x * x);
}
square(2) // 4
square(3) // 9

函数返回值

JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接受外界信息，返回值作为出口，，把运算结果反馈给外界

function getName(name){
    return name;
}
var myName = getName("Jerry")
console.log(myName); // Jerry

温馨提示

return后面不能再添加任何代码，因为不会执行

*对象

对象（object）是JavaScript语言的核心概念，也是最重要的数据类型，对象就像是一组键值对（key = value）的集合，是一种无序的复合数据集合

 var user = {
	 name: 'itbaizhan',
 	 age: '13'
};

对象的每一个键名又称为“属性”（property）,他的“键值”可以是任何一种数据类型。如果一个属性的值为函数，通常把这个属性称为方法，它可以像函数那样调用

var user = {
  getName: function (name) {
  return name;
}
};
user.getName("Jerry") // Jerry

如果属性值还是一个对象，就形成了链式引用

var user = {
    name:"Ann",
    age:13,
    container:{
        frontEnd:["Web前端","Android","iOS"],
        backEnd:["Java","Python"]
   }
}
user.container.frontEnd // ["Web前
端","Android","iOS"]

3、Math对象

Math.abs()

Math.abs方法返回参数值的绝对值

Math.abs(1) // 1
Math.abs(-1) // 1

Math.max()/Math.min()

Math.max方法返回参数之中最大的值，Math.mix返回最小的值，如果参数为空，Math.mix返回Infinity,Math.max返回-Infinity

Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1
Math.min() // Infinity
Math.max() // -Infinity

Math.floor()/Math.ceil()

Math.floor方法返回小于参数值的最大整数

Math.floor(3.2) // 3
Math.floor(-3.2) // -4

Math.ceil方法返回大于参数值的最小整数

Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

Math.random()

Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

 Math.random() // 0.28525367438365223

任意范围的随机数生成函数如下

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
getRandomArbitrary(5, 10)

4、Date对象

Date对象时JavaScript原生的时间库，它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位是毫秒）

Date.now()

Date.now方法可以返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的时间毫秒数，相当于Unix时间戳乘以1000

Date.now();   // 1635216733395

时间戳

时间是指洛林威治时间1970年01年01日00时00点00分00秒（北京时间1970年01年01日08时00点00分00秒）起至现在的总秒数

格林威治时间和北京时间就是时区的不同

Unix是20世纪70年代初出现的一个操作系统，Unix认为1970年1月1日是时间纪元，JavaScript也就遵循了这一约束

Date对象提供了一系列get方法，用来获取实例对象某方面的值

实例方法get类

getTime():返回实例距离1970年1月1日00:00:00的毫秒数

getDate():返回实例对象对应每个月的几号（从1开始）

getDay():返回星期几，星期日为0，星期一为1以此类推

getYear():返回距离1900的年数

getFullYear():返回四位数的年份

getMonth():返回月份（0表示1月，11表示12月）

getHours():返回小时（0-23）

getMilliseconds():返回毫秒（0-999）

getMinutes():返回分钟（0-59）

getSeconds():返回秒（0-59）

var d = new Date('January 6, 2022');
d.getDate() // 6
d.getMonth() // 0
d.getYear() // 122
d.getFullYear() // 2022

实例编写函数获得本年度剩余天数

function leftDays(){
     var today = new Date();
     var endYear = new Date(today.getFullYear(),11,31,23,59,59,999);
     var msPerDay = 24*60*60*1000;
     console.log(Math.round((endYear.getTime()-today.getTime())/msPerDay)); 
}

5、DOM概述

DOM是JavaScript操作网页的接口，成为”文档对象模型“（Document Object Model）它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如对元素增删内容）

浏览器会根据DOM模型将结构化文档HTML解析成一系列的节点和最终的树状结构，都有规范的对外接口

DOM只是一个接口规范，可以用各种语言实现，所以严格的说，DOM不是JavaScript语法的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页。另一方面JavaScript也是最常用与DOM操作的语言

节点

DOM的最小组成单位叫做节点（node），文档的树形结构（DOM树）就是由各种不同类型的节点组成，每个节点可以看做是文档树的一片叶子

节点有七种类型

Document：整个文档树的顶层结构

DocumentType：doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的属性（比如class = “right”）

Text:标签之间或者标签包含文本

Document Fragment:文档的片段

节点树

一个文档的所有节点，按照所在的层级，可以抽象乘一种数状结构，这种树状结构就是DOM树，他有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，这样层层衍生出来一个金字塔结构，倒过来就像是一棵树。

浏览器原生提供的document节点，代表整个文档

document
// 整个文档树

除了根节点，其他节点都有三种层级关系

父节点关系（parentNode）：直接的那个节点

子节点关系（childNodes）：直接的下一级节点

同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下

文档节点（document）：9，对应常量

Node.DOCUMENT_NODE

元素节点（element）：1，对应常量Node.ELEMENT_NODE

属性节点（attr）:2,对应常量Node.ATTRIBUTE_NODE

文本节点（text）：3,对应常量

文档片断节点DocumentFragment：11，对应常量

Node.DOCUMENT_FRAGMENT_NODE

document.nodeType // 9
document.nodeType === Node.DOCUMENT_NODE //
true

document对象_方法/获取元素

document.getElementsBYTagName()

document.getElementsByTagNames方法搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）,可以实时反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集

var paras =document.getElementsByTagName('p');

如果传入*就可以返回文档所有的HTML元素

var allElements = document.getElementsByTagName('*');

document.getElementsByClassName()

document.getElementsByName方法返回一个类似数组的对象

（HTMLCollection实例）包括了所以class名字符合指定条件的元素，元素变化实时反映在返回结果中

var elements =
document.getElementsByClassName(names);

由于class是保留字，所以JavaScript一律使用className表示CSS的class

参数可以是class,他们之间使用空格分开

var elements =document.getElementsByClassName('foo bar');

document.getElementsByName()

document.getElementsByName方法用于选择拥有name属性的HTML元素（比如<form>,<radio>,<img>等），返回一个类似数组的对象（NodeList实例），因为name属性相同的元素可能不止一个

// 表单为 <form name="Ann"></form>
var forms =
document.getElementsByName('Ann');

document.getElementsById()

document.getElementById方法返回匹配指定id属性的元素节点，如果没有发现匹配的节点，则返回null

 var elem = document.getElementById('para1');

document.querySelect()

document.querySelect方法接受一个css选择器作为参数，发挥匹配该选择器的节点，如果有多个节点满足匹配条件，则返回null

var el1 = document.querySelector('.myclass');

document.querySelectorAll()

document.querySeletorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包括所有匹配给定选择器的节点

var elementList =
document.querySelectorAll('.myclass');

doucument对象_对象/创建元素

document.createElement()

document.createElement方法用于生成节点元素，并返回该节点

var newDiv = document.createElement('div');

document.createTextNode()

document.createTextNode方法用于生成文本节点（Text实例），并返回该节点。他的参数是文本节点的内容

var newDiv = document.createElement('div');
var newContent =
document.createTextNode('Ann');
newDiv.appendChild(newContent);

document.createAttribute()

document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它

var attribute =document.createAttribute(name);
var root = document.getElementById('root');
var it =document.createAttribute('Jerry');
it.value = 'it';
root.setAttributeNode(it);

Element对象_属性

Element对象对应网页的HTML元素。每一个HTML元素在DOM树上都会转化为一个Element节点对象（以下简称元素节点）

Element.id

Element.id属性返回指定元素的id属性，该属性可读写

// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"

className属性用来读写当前元素节点的class属性，它的值是一个字符串，每个class之间用空格隔开

// HTML 代码 <div class="one two three"
id="myDiv"></div>
var div = document.getElementById('myDiv');
div.className

Element,classList

classList对象有下列方法

add()：增加一个class

remove()：移出一个class

contains()：检查当前元素是否包含class

toggle()：将某个class移入或者移出当前元素

var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果
myCssClass 不存在就加入，否则移除
div.classList.contains('myCssClass'); // 返回
true 或者 false

Element.innerHTML

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有HTML代码，该属性可读写，常用来设置某个节点的内容，它能改写所有属性节点的内容，包括<HTML>和<body>元素

el.innerHTML = '';

Element.innerText

innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串

Element获取元素位置

属性	描述
clientHeight	获取元素高度padding部分，但是不包括border和magin
clientWidth	获取元素宽度包括padding部分，但是不包括border和magin
scrollHeight	元素总宽度，它包括padding，但是不包括border和margin包括溢出的不可见内容
scrollWidth	元素总宽度，它包括padding，但是不包括border和margin包括溢出的不可见内容
scrollLeft	元素的水平滚动条向右滚动的像素数量
scrollTop	元素的垂直滚动条向右滚动的像素数量
offsetHeiht	元素的CSS垂直高度（单位像素），包括元素本身的高度、padding和border
offsetWidth	元素的CSS水平高度（单位像素），包括元素本身的高度、padding和border
offsetLeft	定位带父级左边界的间距
offsetTop	定位带父级上边界的间距

Element.clientHeight,Element.clientWidth

Element.clientHeight属性返回一个整数，表示元素节点的CSS高度（单位像素），只对块级元素生效，对于行内元素返回0，如果块级元素没有设置CSS高度，则返回实际高度

除了元素本身的高度，它还包括padding部分，但是不包括boder和margin，如果有水平滚动条，还要水平滚动条的高度，注意，这个值始终是整数，如果是小数会被四舍五入。

Element.clientWidth属性返回元素的节点的CSS宽度，同样只对块级元素的有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器的高度）。document.body的高度则是网页的实际高度。

// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight

Element.scrollHeight,Element,scrollWidth

Element.scrollHeight属性返回一个整数值（小数会四舍五入）表示当前元素的总高度（单位像素），它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话）

Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方与scrollHeight属性类似。这两个属性只读

整张网页的总高度可以从document.document.Element或者document.body上读取

// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight

Element.scrollLeft、Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个书序值为0

如果要查看整张网页的水平和垂直滚动距离要从Element.documentELement元素上读取

document.documentElement.scrollLeft
document.documentElement.scrollTop

Element.offsetHeight,Element.offsetWidth

Element.offsetHeight属性返回一个整数，表示元素的CSS垂直高度（单位像素），包括元素本身的高度，padding和border，以及水平滚动条的高度（如果存在滚动条）

Element.offsetWidth属性表示元素的CSS水平高度（单位像素），其他都与Element.offsetHeight一致

这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度和宽度，如果元素的CSS设不可见（比如display.none），则返回0

Element.offsetLeft,Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offserParent节点的水平位移，Element.offsetTop返回当前垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。

<div class="parent">
    <div class="box" id="box"></div>
</div>

.parent{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    left: 50px;
    top: 50px;
}
.box{
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    left: 50px;
    top: 50px;
}

var box = document.getElementById("box");
console.log(box.offsetLeft);
console.log(box.offsetTop);

6、css操作

HTML元素的style属性值

操作CSS样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid
black;'
);

元素节点的style属性

var divStyle =
document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

cssText属性

var divStyle =
document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'
  + 'width: 100px;';

7、事件处理程序

事件处理程序有以下几种：

• HTML事件处理
• DOM0级事件处理
• DOM2级事件处理

HTML事件

<!DOCTYPE html>
<html>
    <head lang="en">
                <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1"
onclick="demo()">按钮</button>
        </div>
        <script>
            function demo(){
                alert("hello html事件处理");
           }
        </script>
    </body>
</html>

DOM0级事件处理

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var
btn1=document.getElementById("btn1");
        btn1.onclick=function(){alert("Hello
DOM0级事件处理程序1");}//被覆盖掉
        btn1.onclick=function(){alert("Hello
DOM0级事件处理程序2");}
    </script>
</body>

DOM2级事件处理

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var
btn1=document.getElementById("btn1");
      
btn1.addEventListener("click",demo1);
      
btn1.addEventListener("click",demo2);
      
btn1.addEventListener("click",demo3);
        function demo1(){
            alert("DOM2级事件处理程序1")
       }
        function demo2(){
            alert("DOM2级事件处理程序2")
       }
        function demo3(){
            alert("DOM2级事件处理程序3")
       }
      
btn1.removeEventListener("click",demo2);
    </script>
</body>

鼠标事件

鼠标事件指与鼠标相关的事件，具体事件如下：

• click：按下鼠标时触发
• bdlclick：在同一个元素上双击鼠标触发
• mousedown：按下鼠标时触发时间
• mouseup：释放按下鼠标时触发
• mousemove：当鼠标在节点内部移动时触发，当鼠标持续移动时，该时间会连续触发
• mouseenter：鼠标进入一个节点时触发没进入子节点时不会触发这个事件
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
• mouseover：鼠标进入到一个节点时触发，进入子节点会再次触发这个事件
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
• wheel：滚动鼠标的滚轮时触发

var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    console.log("click事件");
}`

温馨提示

这些方法在使用时候，除了DOM2级事件，都需要添加前缀on

Event事件对象

事件发生后会产生一个事件对象，作为参数传给监听函数

Event对象属性

• Event.Target
• Event.type

Event.Target

Event.target属性返回事件当前所在的节点

// HTML代码为
// <p id="para">Hello</p>
function setColor(e) {
  console.log(this === e.target);
  e.target.style.color = 'red';
}
para.addEventListener('click', setColor);

Event.type

Event.type属性返回一个字符串，表示事件类型，事件的类型是在生成事件的时候，该属性只读

Event对象方法

• Event.preventDefault()
• Event.stopPropagation()

Event.preventDefault()

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器会默认跳转到另外一个页面，使用这个方法以后，就不会再跳转了

btn.onclick = function(e){
    e.preventDefault(); // 阻止默认事件
    console.log("点击A标签");
}

Event.stopPropagation()

stopPropagation方法阻止事件在DOM中继续传播，防止触发定义在别的节点上的监听函数，但是不包括在当前节点上的其他事件监听函数

btn.onclick = function(e){
    e.stopPropagation(); // 阻止事件冒泡
    console.log("btn");
}

键盘事件

键盘事件由用户敲击键盘触发，主要有keydown、keypress、keyup三个事件

• keydown：按下键盘时触发。

• keypress：按下有值的键时触发，按下Ctrl、Alt、Shift、Meta这样无值的键，这个事件不会触发，对于有值的键，按下时先触发keydown事件，再3触发这个事件

• keyup：松开键盘时触发该事件

• username.onkeypress = function(e){
      console.log("keypress事件");
  }
  

event对象

keyCode：唯一标识

var username =
document.getElementById("username");
username.onkeydown = function(e){
    if(e.keyCode === 13){
        console.log("回车");
   }
}

表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

• input事件
• select事件
• Change事件
• reset事件
• submit事件

input事件

input事件当<input>,<select>,<textarea>的值放生变化时触发，对于复选框（）或者单选框（）,用户改变选项时，也会触发这个事件

input事件的第一个特点，就是连续触发，比如用户每按下一次按键，就会触发一次input事件

var username =
document.getElementById("username");
username.oninput = function(e){
    console.log(e.target.value);
}

select事件

select事件在当<input>,<textarea>里面选中文本时触发

// HTML 代码如下
// <input id="test" type="text" value="Select
me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e)
{
  console.log(e.type); // "select"
}, false);

Change事件

Change事件当<input>,<select> ,<textarea> 的值发生变化时触发。它与

input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发

var email = document.getElementById("email");
email.onchange = function(e){
    console.log(e.target.value);
}

reset 事件，submit 事件

这两个事件发生在表单对象 上，而不是发生在表单的成员

上。

reset事件当表单重置（所有表单成员变回默认值）时触发。

submit事件当表单数据向服务器提交时触发。注意，submit事件的

发生对象是 <form> 元素，而不是 <button> 元素，因为提交的是表单，

而不是按钮

<form id="myForm" onsubmit="submitHandle">
    <button onclick="resetHandle">重置数据
</button>
    <button>提交</button>
</form>

var myForm =
document.getElementById("myForm")
function resetHandle(){
    myForm.reset();
}
function submitHandle(){
    console.log("提交");
}

事件代理（事件委托）

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监

听函数定义在父节点上，由父节点的监听函数统一处理多个子元素

的事件。这种方法叫做事件的代理（delegation）

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event)
{
  if (event.target.tagName.toLowerCase() ===
'li') {
    // some code
 }
});

8、定时器

setTimeout()

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定

时任务

setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay);

setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的

函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数

setTimeout(function(){
   console.log("定时器")
},1000)

温馨提示

还有一个需要注意的地方，如果回调函数是对象的方法，那么

setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义

时所在的那个对象

 var user = {
   name: "itbaizhan",
   getName: function () {
       setTimeout(function(){
           console.log(this.name);
      },1000)
  }
};
user.getName();

解决方法

 var name = "sxt";
 var user = {
    name: "itbaizhan",
    getName: function () {
        var that = this;
        setTimeout(function(){
           console.log(that.name);
       },1000)
   }
 };
 user.getName();

定时器可以进行取消

var id = setTimeout(f, 1000);
clearTimeout(id);

setInterval()

setInterval 函数的用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

 var timer = setInterval(function() {
2  console.log(2);
3 }, 1000)

通过setInterval方法实现网页动画

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="viewport"
content="width=device-width, initialscale=1.0">
	<title>Document</title>
	<style>
		#someDiv{
		width: 100px;
		height: 100px;
		background: red;
             }
	</style>
</head>
<body>
	<div id="someDiv"></div>
	<script>
		var div =
document.getElementById('someDiv');
 		var opacity = 1;
		var fader = setInterval(function() {
		opacity -= 0.05;
		if (opacity > 0) {
   			div.style.opacity = opacity;
 		} else {
   			clearInterval(fader);
 		}
 		}, 30);

	</script>
</body>
</html>

定时器可以取消

var id = setInterval(f, 1000);
clearInterval(id);