（四）JS中事件和方法（属性）

的事件和属性

事件：

@input 适用于实时监听输入字符
@blur 适用于失去焦点
@focus 适用于获取焦点

属性：

Placeholder 在内容为空时显示，在输入内容时获取焦点。用于提示所需输入信息
Accept 规定通过文件上传来提交的文件类型
image/* 接受所有的图像文件
Video/* 接受所有的视频文件
Audio/* 接受所有的声音文件
Readonly 规定输入字段是只读的。
Required 规定必须在提交表单之前填写输入字段
Step 规定元素的合法数字间隔
Width 规定元素的宽度，只针对type=“image”

检测input、textarea输入改变事件

（1）onkeyup/onkeydown 捕获用户键盘输入事件，缺陷是复制粘贴无法检测
（2）Oninput 当前对象属性改变就会触发，缺陷是只支持低版本IE
（3）Onpropertychange 当前对属性改变就会触发，缺陷是不支持低版本IE
（4）通常oninput和onpropertychange结合使用

触摸事件touch

Touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指方在屏幕上也会触发。
Touchmove事件：当手指在屏幕上滑动的时候连续的触发，在这个事件发生期间，调用preventDefault（）事件可以阻止滚动。
Touchend事件：当手指从屏幕上离开时触发。
Touchcancel事件：当系统停止跟踪触摸的时候触发。

每个触摸事件被触发后，都会生成一个event对象，event对象里额外包括三个触发列表
Touches：当前屏幕上所有手指的列表。
TargetTouches：当前dom元素上手指的列表。
ChangedTouches：涉及当前时间的手指的列表。

触摸列表里的每次触摸都有touch对象组成，touch对象里包含着触摸信息，主要属性如下
ClientX/clientY：触摸点相对浏览器窗口的位置。
PageX/pageY：触摸点相对于页面的位置。
ScreenX/screenY：触摸点相对于屏幕的位置。
Identifier：touch对象的ID。
Target：当前的dom元素。

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放，所以在调用touch事件时，要注意禁止缩放和滚动。
禁止缩放：通过meta标签来设置。
···<meta name=”viewport” content=”target-densitydpi=320,width=640,user-scalable=no”>···
禁止滚动：preventDefault是阻止默认行为，touch事件的默认行为就是滚动
Event.preventDefault()

formData对象

formData对象是XMLHttpRequest 2级定义的，为序列化表以及创建于表单格式相同的数据提供便利
用途：
（1）将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
（2）异步上传文件
创建方式：
（1）let formData=new FormData() 创建一个空的formdata对象，可以用formdata.append(key,value)来添加数据；
（2）Let formdata=new FormData(form) 使用已有的表单来初始化一个formdata对象。
FormData对象的操作方法，全部在原型上，自己本身没有属性和方法。
如 ：
formData.append(key，value) 通过append在数据末尾追加数据
formData.forEach()
formData.get(key) 通过get对数据进行提取，获取相对应的值
formData.getAll(key) 通过get对数据进行提取，获取相对应的值
formData.set(key,value) 通过set来设置修改数据，如果key不存在则新增一条数据，如果key存在则会修改相对应的value值。
formData.has(key) 通过has来判断是否存在某条数据，存在返回true，反之为flase。
formData.delete(key) 通过delete来删除数据
formData.entries() 通过entries来遍历数据，获取一个遍历器
formData.values() 通过values来遍历数据，获取一个遍历器
上传数据：
Fetch（“链接路径”，{
Method：“post” //上传方式
Body：formdata //上传数据
}）

Js全局函数（顶层函数）

decodeURI()：解码某个编码的 URI。（可对encodeURL()函数编码过的URL进行解码）
decodeURIComponent()：解码一个编码的 URI 组件。（可对encodeURIComponent()函数编码过的URL进行解码）
encodeURI()：把字符串编码为 URI。无法对url中的分隔符进行编码
encodeURIComponent()：把字符串编码为 URI 组件。可以对URL中一些特殊的分隔符进行编码，比如？、#、；、$
escape()：对字符串进行编码。
unescape()：对由 escape() 编码的字符串进行解码。
eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()：返回一个 JavaObject 的 JavaClass。
isFinite()：检查某个值是否为有穷大的数。
isNaN()：检查某个值是否是数字。
Number()：把对象的值转换为数字。
String()：把对象的值转换为字符串。
parseFloat()：解析一个字符串并返回一个浮点数。
parseInt()：解析一个字符串并返回一个整数。
new RegExp() ：正则对象，检索字符串的一种规则，可用于检索url
正则方法：
.test(字符串)：检验字符串中有没有正则能匹配到的内容，返回值为true，false
.exec(字符串)：捕获，用于检索字符串中的正则表达式的匹配，返回一个数组，存放匹配的结果，如果未找到匹配，返回值为null
str.match()：把匹配到的字符放入数组中，不匹配返回null

Event对象属性及方法

Event对象代表事件的状态

Event对象标准属性：

Bubbles：返回布尔值，指示事件是否是起冒泡事件类型。
Cancelable：返回布尔值，指示事件是否有可取消的默认动作。
CurrentTarget：返回其事件监听器触发该事件的元素。
EventPhase：返回事件传播的当前阶段。
Target：返回触发此事件的元素（事件的目标节点）。
TimeStamp：返回事件生成的日期和时间。
Type：返回当前event对象表示的事件名称。

Event对象标准方法：

InitEvent()：初始化新创建的Event对象的属性。
PreventDefault()：通知浏览器不要执行与事件关联的默认动作。
StopPropagation()：不再派发事件。

js数组方法

Join()将数组的元素之间添加分隔符，参数为空时默认用逗号作为分隔符。
Arr.join（“-”）
Push()将任意参数逐个添加到数组末尾，并返回修改后数组的长度
Pop()将数组末尾的最后一项移除，减少数组的length值，然后返回移除的值；没有参数
Shift()删除原数组的第一个值，并返回删除元素的值，如果数组为空返回undefined
Unshift()将参数添加到原数组的开头，并返回数组的长度
Sort()将数组的值按升序排列
Reverse()翻转数组的排列顺序
Concat()将参数添加到原数组中，数组拼接，会改变原数组
Slice()截取数组中指定开始下标到结束下标之间的元素组成的新数组。
如果只有一个参数，返回从该参数指定位置开始到数组末尾的所有项
如果有两个参数，返回从起始位置到结束位置之间的项，但不包括结束位置的项
Splice()删除、插入和替换数组中的元素
删除：两个参数，要删除的第一项的位置和要删除的个数，splice(a,b)
插入：三个参数，起始位置、要删除的个数、要插入的项。
该方法始终会返回一个数组，包含从原数组中删除的项，如果没有删除任何项，返回一个空数组
IndexOf()两个参数：要查找的项和查找起点位置的下标。从数组的开头开始向后查找
lastIndexOf()两个参数：要查找的项和查找起点位置的下标。从数组的末尾开始查找
ForEach()对数组的每一项运行给定函数，没有返回值。循环数组中的每一项，循环过程不 会终止
Some()对数组中的每一项运行给定函数，如果该函数与任意一项返回true，则返回true
Every()对数值中的每一项运行给定函数，