事件与DOM和BOM对象

1 事件的概念

事件是指在 页 面 上 与 用 户 进 行 交 互 时 发 生 的 操 作 ，主要包括用 户 动 作 和用 户 状 态 的变化。例如，当用 户单击一个超链接或按钮时就会触发单击事件，浏览器会根据用户的动作进行相关的事件处理操作。

2. 事件处理

在Javascript中，事件处理可以分为三个步骤，即 ①触发事件 ②启动事件处理程序 ③事件处理程序对相关事件进行处理，返回处理结果。

3. 事件分类

Javascript事件大致可以分为以下4类

1、页面事件：是指因页面状态的变化而产生的事件

2、鼠标事件：是指用户进行单击或移动鼠标操作而产生的事件

3、键盘事件：是指用户在键盘敲击、输入时触发的事件

4、表单事件：是指与表单相关的事件，是Javascript中最常用的事件

事件绑定

事件绑定是指将HTML文档的元素事件属性与事件处理程序（主要是指函数）相关联，使得当 事件发生时就会触发该事件关联函数的执行。

事件的绑定有两种方式，一种是静态绑定，另一种是动态绑定；

事件的属性是指在事件名称前加上前缀“on”，在Javascript中，事件属性名称就是“on”+“事件名 称”。如click是单击事件名，onclick就是对应的事件属性名，也可以将事件属性名简称为事件名。按照 事件属性名的定义，

事件                                 说明                                         事件                                      说明

onload                         文档载入事件                         onmouseover                         鼠标滑过事件

onresize                       改变窗口大小事件                 onmouseout                            鼠标移出事件

onclick                                 单击事件                         onkeydown                             键盘按下事件

ondbclick                         双击事件                            onkeyup                              键盘弹起事件

onmousedown                按下鼠标事件                     onkeypress                         键盘按压事件

onmouseup                 鼠标按钮弹起事件                   onchange                         元素内容改变事件

onfocus                         鼠标获得焦点事件                 onblur                                 鼠标失去焦点事件

onsubmit                         表单提交事件                        onunload                                 文档卸载事

1、 静态绑定

静态绑定是指将事件处理程序（函数）直接作为HTML元素的事件属性值。

语法：事件属性名=“事件处理程序”

添加事件属性

<div   οnclick="函数名（）"></div>

2、动态绑定

在Javascript中，事件也是对象的组成部分，也可以通过点“·”运算符来调用事件。 动态绑定就是指将事件处理函数赋值给HTML元素对象的事件属性。

语法：元 素 对 象、 事 件 属 性 =函 数 对 象

元素对象、οnclick=function(){}

事件分类

页面事件

onload 页面加载

onunload 页面卸载

onerror 加载失败

onresize 改变窗口大小

onbeforeunload 卸载之前

onscroll页面滚动事件

鼠标事件

总分两大类

1、鼠标单击事件onclick(单击)、ondblclick(双击)、onmousedown(鼠标按下）、onmouseup(鼠标弹起)事件

2.、鼠标移动事件 onmouseover(鼠标滑过事件)、onmouseout(鼠标移出事件)、onmousemove(鼠标移动事 件)

键盘事件

onkeypress                键盘按压事件

onkeydown                键盘按下事件

onkeyup                     键盘弹起事件

表单事件

onblur 失去焦点事件

onfocus 获得焦点事件

onchange 内容改变事件

onsubmit 提交事件

Event对象

在Javascript事件对象中，Event对象代表事 件 的 状 态 ，如发生事件的元素名称、键盘按键的状 态、鼠标的位置、鼠标按钮的状态等。

使用Event对象的type属性可以返回当前Event对象表示的事件名称。只有当事件发生时Event 对象才有效，只能在事件处理程序中访问Event对象。

Event对象属性

属性                                                                                 说明

type                                                         返回事件名称,如单击事件名click

srcElement                                              返回产生事件的元素对象。如当单击按钮产生 click 事件 时，该事件的 srcElement属性就是对于这个按钮对象的引用

returnValue                                              指定事件的返回值，默认为true。若设置为false，则取消该事件的默认处理 动作

x,y                                                           指示鼠标相对于页面的X、Y坐标，即水平和c垂直位置，单位为像素

screenX,screenY                                     指示鼠标指针和对于电脑屏幕的X、Y坐标

fromElement                                            用于mouseover和 mouseout事件，指示鼠标指针从哪个元素移来

altKey                                                       指示Alt键的状态，当Alt键按下时为 true

keycode                                                   指示键盘事件的按键Unicode键码值

cancelBubble                                         表示是否取消当前事件向上冒泡、传递给上层的元素对象。默认为false,允许 冒泡;否则为true。禁止该事什冒泡

repeat                                                    指示Keydown事件是否正在重复，并且只适用于Keydown事件:

clientX,clientY                                         指示鼠标指针相对于窗口浏览区的X、Y坐标

offset,offsetY                                           指示鼠标指针相对于触发事件的元索的X、Y坐标

toElement                                                 用于mouseover和 mouseout事件，指示鼠标指针移向哪个元素

ctrlKey                                                     指示ctrl键的状态，当ctrl键按下时为 true

阻止默认行为

event.preventDefault()

阻止冒泡行为

event.stopPropagation()

Dom和Bom对象

常见Bom对象

BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供了一系列 对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。

Window对象是可以省略不写的

window对象还是 ECMAScript 中的 Global 对象，（Global是全局的意思）所有全局变量和函数都是它的属性，且所有原生 的构造函数及其他函数也都存在于它的命名空间下。

弹框类方法

方法名称                         作 用                               参数说明

alert(con)                         警 告 框                         con表示警告框弹出时显示内容

confirm(con)                   确 认 弹 框                     con 表示弹框弹出时 显示确认信息

prompt(con,val)                 输 入 弹 框                  con 表示弹框内容，val 表示输入框的默认显示值

open(url,name,fet,replace) |、打 开 一 个 浏 览 器 窗 口|、 url 可选，表示显示网页的路径，name 可选，打开窗口的 名称 fet 可选 设置要设置新窗口的窗口特征,replace 可选 布尔值，true —URL 替换浏览历史中的当前条目，false - URL 在浏览历史中创建新的条目

close()                            关 闭 当 前 的 网 页

定时器类方法

方法名称                                        ​​​​​​​        ​​​​​​​        ​​​​​​​        作用

setTimeout(fn,time)                                延时器，只执行一次

clearTimeout()                                        清除定时器，用于停止setTimeout方法的函数代码

setlnterval(fn,time)                                定时器，每个一段事件执行一次，无限执行

clearlnterval()                                        清除定时器用于停止setlnterval()方法执行的函数代码

history对象

包含浏览器的历史记录

back()返回历史记录中的上一页

forward（）返回历史记录中的下一页

go（num）返回历史记录中指定页。num等于-1表示上一页，等于1表示下一页

location对象

用于获得当前页面的地址（URL）并把浏览器重定向新的页面

href：获取或者设置url地址

hostname：返回主机的域名

pathname：返回当前页面的路径和文件名

port：返回主机的端口（80或443）

portocol：返回页面使用的协议。http：或https：

DOM对象

1. 获取html元素的四种方式
    document.getElementById()                通过标签的id值获取元素
    document.getElementsByClassName()        通过标签的类名获取元素集合
    document.getElementsByTagName()                通过标签名称获取元素集合
    document.getElementsByName()                通过标签属性值获取元素集合
2. dom对象的时候，有哪些节点？
         元素节点   
   属性节点       文本节点       样式
document.createElement(tagname) // 创建一个html元素

追加HTML元素

element.appendChild(node) // 向element对象内部的最后添加一个节点，参数node表示节点对 象

elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入 newNode元素

移除HTML元素

element.removeChild(node) //删除当前节点element下指定的子节点node，删除成功返回该被 删除的节点，否则返回null

HTML属性操作

1. 获取元素的属性值 element.getAttribute(attributeName) //括号传入属性名，返回对应属性的属性值

2. 设置元素的属性值 element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

3. 移除元素的属性值 element.removeAttribute(attributeName) //删除传入属性

4. 以下属性可以直接通过获取的对象进行操作 id,src,checked
1. 文本节点的操作
    获取文本节点的内容
        dom对象.innerHTML
    修改文本节点的内容
        dom对象.innerHTML = 要修改的值

element.innerHTML //返回元素的所有文本，包括html代码

element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

element.value // 返回表单元素的值
2. 属性节点的操作
    a)  对象.属性名称  并不适合全部属性
        1)  img标签的src、alt
        2)  标签的class属性要使用 className
        3)  表单标签的value、name、type
        4)  表单标签中复选框和单选按钮的checked
    b) getAttribute(属性名称)   获取对象属性的值
       setAttribute(属性名称,值)   设置对象属性

1. 获取当前元素的父节点

element.parentNode //返回当前元素的父节点对象

2. 获取当前元素的子节点

element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点

element.chilidNodes //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当 做一个节点）

element.firstChild //返回当前元素的第一个子节点对象

 element.lastChild //返回当前元素的最后一个子节点对象

3. 获取当前元素的同级元素

element.nextSibling //返回当前元素的下一个同级元素 没有就返回null

element.previousSibling //返回当前元素上一个同级元素 没有就返回null
3. 样式操作

1. 通过style来设置样式 element.style.css属性名称 2. 通过添加类名来操作样式 element.className
    dom对象.style.样式属性=值

    样式属性书写注意：对于有连字符(-)的样式属性，需要去掉连字符并且下一个单词首字母大写

JS案例新加知识点

1、selectedIndex:可以获取到当前下拉框所选中的选项的索引

2、&lt：左箭头         &gt：右箭头

3、checked：选中状态。例：<imput type="checkbox"checked>