JavaScript 基础（四）

五、DOM编程

1.常用事件

onload 页面加载后触发事件

onscroll 滚动时触发

onresize 尺寸变化时

onclick 鼠标点击

onmouseover 鼠标悬停

onmouseout 鼠标移出

onmousemove 鼠标移动，会触发多次

onfocus 对象获得光标（焦点）时（通常用于input标签）

onblur 对象失去光标（焦点）时

onselect 文本框里的文字被选中

onchange 文本框中的文字被改变时（通常用于下拉菜单）

onkeydown 按下键盘上的按钮

onkeyup 松开键盘上的按钮

onkeypress 上面两个共同

oncontextmenu 鼠标右击菜单

2.事件绑定

• 侵入式绑定：将事件直接写在html标签中

div οnclick= 'add()' dianji div

function add(){}

• 绑定式事件方式：通过DOM，使用js代码绑定

div /div

let divobj = document.getElementsByTagName('div')[0];

divobj.onclick = function(){}

• 监听函数式事件方式：addEventListener()

addEventListener() 参数（事件名（没有前缀on），事件处理函数，布尔类型（一般为false）

true：进行事件捕获； false：不进行事件捕获；

div /div

let divobj = document.getElementsByTagName('div')[0];

divobj.addEventListener('click',function(){

},false);

3.表单元素事件

3.1表单元素事件

button onClick、onBlur、onFocus

checkbox onClick、onBlur、onFocus

FileUpload onClick、onBlur、onFocus

hidden none

password onBlur、onFocus、onSelect

radio onClick、onBlur、onFocus

reset onReset

select onBlur、onFocus、onChange

submit onSubmit

text onClick、onBlur、onFocus、onChange

textarea onClick、onBlur、onFocus、onChange

六、JSON轻量级数据交换格式

1.定义

JSON：JavaScript Obiect Notation

是一种轻量级的数据交换格式，易于编写和机器解析，采用完全独立于语言的数据交换语言

2.json数据格式

json数据属性以“键值对”的形式书写

let userArr = [

{userId:1, userName:'张三', userSex:'男'},

{userId:2, userName:'李四', userSex:'女'}

]

//获取json数组中的第一个对象

let user = userArr[0];

console.log(user.userId);

console.log(user.userName);

console.log(user.userSex);

//遍历json数组

for(let i = 0;i<userArr.length;i++){

console.log(userArr[i].userId,userArr[i].userName,userArr[i].userSex);

}

3.json与字符串之间的转换

let str = JSON.stringify(user); //将JSON对象转换成字符串

let str = JSON.stringify(userArr); //将JSON数组转换成字符串

let new_user = JSON.parse(str); //将字符串转换成JSON数组

七、Web存储

1、Web存储

客户端存储：Cookie,它是网站的身份证，是网站为了辨别用户身份，进行Session跟踪而存储在用户本地终端上的数据。Cookie每次都会跟随http请求发送到服务端，存在安全性问题

Cookie大小具有局限性，每个网站的Cookie个数也具有局限性，一般浏览器默认20个，而且会默认跟随http请求发送，即使不需要也会发送，会造成网络资源浪费。

对于Cookie的局限，Web Storage随之出现，它实现了支持大量数据存储，支持复杂的本地数据库，不会默认跟随http请求

2.Web Storage技术

2.1Session Storage

会话范围：从打开浏览器窗口到关闭

Session Storage 存储有效范围就是一个Session范围

• setItem()： 该方法接受一个键和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值著作权归作者所有。

• getItem()：该方法接受一个键名作为参数，返回键名对应的值。

• removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除著作权归作者所有。

sessionStorage.setItem('user','张三)

let str = sessionStorage.getItem(user)

2.2Local Storage

Local Storage:永久存储，只要不主动移除，就一直在 localStorage.setItem('user','张三');

let str = localStorage.getItem('user');

2.3WebSQL(sql)

2.4indexedDB(no sql)

2.5Cookie

3.存储对象

SessionStorage 和LocalStorage中只能存储字符串数据。

如果需要存储对象，可以将对象转换为字符串进行存储，取出时，再将字符串转换为对象。

sessionStorage.setItem('user',JSON.stringify(user));

let obj = JSON.parse(sessionStorage.getItem('user'));

console.log(obj);