JavaWeb1 Json+BOM+DOM+事件监听

JS对象-Json

//Json 字符串转JS对象
var jsObject  = Json.parse(userStr);
//JS对象转JSON字符串
var jsonStr = JSON.stringify(jsObject);

JS对象-BOM

BOM是浏览器对象模型，允许JS与浏览器对话
它包括5个对象：window、document、navigator、screen、history
常用方法：

alert()：弹出一个警告框，用于提示用户。

window.alert("hello");

confirm()：弹出一个确认框，用于确认或取消某个操作。
prompt()：弹出一个输入框，用于用户输入一些内容。
setTimeout()：在指定的毫秒数后执行一次指定的函数或一段代码。
setInterval()：每隔指定的毫秒数重复执行一次指定的函数或一段代码。

location

window.location.属性（其中window可以省略）

location.href//获得地址

DOM对象

文档对象模型
将标记语言的各个 组成部分封装为对应的对象：

getElementById()：根据id属性获取一个元素节点。
getElementsByClassName()：根据class属性获取一组元素节点。
getElementsByTagName()：根据标签名获取一组元素节点。
querySelector()：根据CSS选择器获取一个元素节点。
querySelectorAll()：根据CSS选择器获取一组元素节点。

<!-- HTML代码 -->
<ul id="list">
  <li class="item">第一项</li>
  <li class="item">第二项</li>
  <li class="item">第三项</li>
</ul>

// 根据id获取元素
var list = document.getElementById('list');
console.log(list);
 
// 根据class获取元素
var items = document.getElementsByClassName('item');
console.log(items);
 
// 根据标签名获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);
 
// 根据CSS选择器获取元素
var firstItem = document.querySelector('.item');
console.log(firstItem);
 
var allItems = document.querySelectorAll('.item');
console.log(allItems);

JS事件监听

1.通过HTML标签中的事件属性绑定

<button id="myButton" onclick="on()">点击我</button>

function on(){
	alert("点了");
}

2.通过DOM属性绑定

<button id="myButton">点击我</button>

（1） -> 语法 事件源.on事件类型 = 事件处理函数
-> 特点 同一个事件源的同一个事件类型只能绑定一个事件处理函数
（2） -> 语法 事件源.addEventListener(‘事件类型’, 事件处理函数)
-> 特点 可以个同一个事件源的同一个事件类型绑定多个事件处理函数，会按照顺序依次触发

// 获取按钮元素
var button = document.getElementById('myButton');
//语法(1)
 button.onclick=function(){
 	console.log("点了");
 }
// 语法(2)为按钮绑定点击事件
button.addEventListener('click', function() {
    alert('按钮被点击了!');
});

常见事件

JS事件绑定 各种事件讲解见：https://blog.csdn.net/huangwfu/article/details/128554495
常见的事件类型

1. 鼠标事件
   click 鼠标左键点击
   dblclick 鼠标左键双击
   contextmenu 鼠标右键单击
   mousedown 鼠标按下
   mouseup 鼠标抬起
   mousemove 鼠标移动
   mouseover 鼠标移入
   mouseout 鼠标移出
   mouseenter 鼠标移入事件
   mouseleave 鼠标离开
2. 键盘事件
   keydown 键盘按下事件
   keyup 键盘抬起
   keypress 键盘键入事件
   。。。