事件 Bom Dom

事件 Bom Dom

事件
什么是事件
load加载事件：
当页面加载完毕后执行的事件
常用事件：
onload：当页面或图像加载完后立即触发
onfocus：元素获得焦点
onblur：元素失去焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
事件流：
接收事件的顺序
事件流的顺序：
事件冒泡和事件捕获
事件冒泡（从小到大）
事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）
事件捕获（从大到小）
事件开始时由document对象接受，然后逐级向下传播到具体的节点
事件处理程序
事件处理程序
响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头
1. HTML事件处理程序
2. DOM 0级事件处理程序
将一个函数赋值给一个事件处理程序属性
只能为同一个元素的同一个事件设定一个事件程序（覆盖）
3. DOM 2级事件处理程序
addEventListener() 和 removeEventListener()
有三个参数：
参数1：事件名
参数2：处理事件的函数
参数3：事件冒泡（false）或捕获（true）
可以为同一个元素的同一个事件设定多个事件程序
document.getElementById(“id属性值”); 通过id属性值获取元素对象

BOM对象
系统对话框
（1）消息框:alert， 常用
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
window对象方法
window.open() 打开窗口
既可以导航到一个特定的URL也可以用来打开一个新的窗口
window.close() 关闭窗口
时间函数
setTimeout()
在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识
也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。
setInteval()
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。
该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
history对象
history对象的属性
length，返回浏览器历史列表中的 URL 数量。
history对象的方法
back()：
加载 history 列表中的前一个 URL。
forward()：
加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
go(number|URL):
URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
loaction对象
location 对象的属性
href：设置或返回完整的 URL
location对象的方法
reload()：重新加载当前文档。
​ replace()：用新的文档替换当前文档。(不能后退)

DOM对象
节点
文档节点
文档本身整个文档
document
元素节点
所有的HTML元素
、

、

属性节点
HTML元素内的属性
id、href、name、class
文本节点
元素内的文本
hello
注释节点
HTML中的注释
<! – – >
获取节点
处理方式两种:
（1）把 script 调用标签移到html末尾即可；
（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS
获取方式如下
getElementById()
根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()
根据标签名获取dom对象数组
getElementsByClassName()
根据样式名获取dom对象数组
getElementsByName()
根据name属性值获取dom对象数组，常用于多选获取值
注意
操作 dom 必须等节点初始化完毕后，才能执行。
说明
说明：href=“javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。
创建节点和插入节点
创建节点
createElement()
创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()
创建一个文本节点，可以传入文本内容
innerHTML
也能达到创建节点的效果，直接添加到指定位置了
插入节点
write()
将任意的字符串插入到文档中
appendChild()
向元素中添加新的子节点，作为最后一个子节点
insertBefore()
向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点 需要参考父节点
间接查找节点
方法 | 属性
firstChild
返回元素的第一个子节点
firstElementChild
lastChild
返回元素的最后一个子节点
lastElementChild
nextSibling
返回元素的下一个兄弟节点
nextElementSibling
childNodes
返回元素的一个子节点的数组
children
返回元素的所有的子元素数组
parentNode
返回元素的父节点
parentElement
previousSibling
返回元素的上一个兄弟节点
previousElementSibling
删除节点
removeChild()
从元素中移除子节点

表单
获取表单
1、document.表单名称
var form1 = document.form1;
console.log(form1);
2、document.getElementById(表单 id);
var form2 = document.getElementById(“form2”);
console.log(form2);
var forms = document.forms;
console.log(forms);
3、document.forms[表单名称]
var form3 = forms[‘form1’];
console.log(form3);
4、document.forms[索引]; //从 0 开始
var form4 = forms[0];
console.log(form4);
获取input元素
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始
获取表单的按钮
(1)获取单选按钮组
document.getElementsByName(“name属性值”);
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
选中状态： checked=‘checked’ checked cheked=true
未选中状态： 未设置checked属性或checked=false
获取 多选按钮
document.getElementsByName(“name属性值”);
选中状态： checked=‘checked’ checked cheked=true
未选中状态： 未设置checked属性或checked=false
获取下拉选项
1. 获取下拉框（id属性值、name属性值、class属性值、元素）
2. 获取下拉框的所有下拉选项
下拉框对象.options
3. 获取下拉框被选中项的索引
下拉框对象.selectedindex
4. 获取被选中项的值
注意：当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
​ 若存在value属性，则取value属性的值
5. 获取被选中项的文本
选中状态设定：selected=‘selected’、selected=true、selected
未选中状态设定：不设selected属性
提交表单
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
最后必须返回：return true|false;
trim()
去除字符串前后空格（不去除字符串中间的空格）
表单校验