学习JavaScript第五天

文章目录

1.HTML DOM
2.事件
4.常用事件总结
5 Event 对象
6 DOM 对象深入分析

1.HTML DOM

1.1 表单相关元素

① form 元素

length		获取该表单中表单控件的数量

elements    获取该表单中表单控件元素的集合

submit()	执行该方法表单会提交

reset()     执行该方法表单会重置

② 文本输入框类和文本域（input 和 textarea）

blur()		执行该方法会失去焦点

focus()		执行该方法会获取焦点

select()	执行该方法会选中里面的文字

③ select 元素

length				获取到选项的数量

options				获取到所有选项元素的集合

selectedIndex		获取当前被选中的选项的索引

add(option元素)		添加一个新的选项

remove(选项的索引)	  删除指定索引的选项

blur()				 执行该方法会失去焦点

focus()				 执行该方法会获取焦点

快速创建 option 元素的方式：

new Option('内容'， 'value值')

1.2 表格相关元素

① table 元素

rows			获取所有行元素的集合

insertRow(索引)	添加一行，如果不设置参数添加到最后

deleteRow(索引)	删除一行

② tableRow 元素（tr 元素）

rowIndex		本行的索引

cells			获取本行中单元格元素的集合

insertCell(索引)	添加一个单元格，，如果不设置参数添加到最后

deleteCell(索引)	删除一个单元格

③ tableCell 元素（td 或 th）

cellIndex		本单元格的索引（同一行内）

1.3 快速创建 img 元素

new Image();

new Image(width, height);

2.事件

3.1 事件监听

① 给元素监听事件的三种方式

第一种方式：事件作为HTML标签的属性：

<标签名 on事件名="代码..."></标签名>

相同的事件如果设置多次，只有前面的生效！

第二种方式：事件作为元素对象的方法：

元素对象.on事件名 = 回调函数;

相同的事件如果设置多次，最后面的生效！

第三种方式：使用 addEventListenrer 方法：

元素对象.addEventListener('事件名', 回调函数);

相同的事件如果设置多次，都可以生效！

② 解除事件的监听

第一种和第二种方式监听的事件：

元素对象.on事件名 = null;

第三种方式监听的事件：

元素对象.removeEventListener('事件名', 函数名);

3.2 事件流

事件触发的过程分为三个阶段：

捕获阶段： 从 window、document 、html 开始层层向下，直到找到具体发生了事件动作的元素，该元素称为目标元素。

目标阶段： 找到目标元素的那一刻，标志着捕获阶段的结束，冒泡阶段的开始。

冒泡阶段： 从目标元素开始，层层向上，直到 html、document、window，事件的回调函数默认在冒泡阶段执行。

注意：事件流也可以只分为捕获阶段和冒泡阶段。

注意： addEventListener 设置第三个参数为 true，该事件会在捕获阶段触发！

3.3 事件的回调函数中 this 的指向

this 指向事件监听的元素！

4.常用事件总结

4.1鼠标事件

click			单击

dblclick		双击

contextmenu		右击，菜单事件

mousedown		鼠标按键按下

mouseup			鼠标按键抬起

mousemove		鼠标在元素上移动

mouseover		鼠标进入元素

mouseout		鼠标离开元素

mouseenter		鼠标进入元素，用来代替 mouseover，后代元素不会冒泡

mouseleave		鼠标离开元素，用来代替 mouseout，后代元素不会冒泡

mousewheel		滚轮事件，用于	Chrome、Safari、Opear、Edge

DOMMouseScroll	滚轮事件，用于 Firefox，只能通过 addEventListener 监听事件

鼠标按键按下和抬起事件如何获取按的是哪个键？

事件对象有button属性，值规则如下：

0	左键

1   滚轮键

2   右键

鼠标移动事件中如何获取鼠标位置？

通过事件对象获取鼠标光标的位置，具有如下属性：

offsetX / offsetY		获取鼠标在目标元素上的位置

clientX / clientY		获取鼠标在视口上的位置

pageX / pageY			获取鼠标在页面上的位置

screenX / screenY		获取鼠标在屏幕上的位置

滚轮滚动事件兼容性处理：

// Chrome、Safari、Opear、IE

window.onmousewheel = wheelScrollFn;

// Firefox 浏览器

window.addEventListener('DOMMouseScroll', wheelScrollFn);

// 定义滚轮事件的回调函数

function wheelScrollFn(event) {

    if (event.wheelDelta) {

        // chrome、safari、ie 等

        if (event.wheelDelta < 0) {

            console.log('滚轮向下滚');

        } else {

            console.log('滚轮向上滚');

        }

    } else if (event.detail) {

        // firefox 浏览器

        if (event.detail > 0) {

            console.log('滚轮向下滚');

        } else {

            console.log('滚轮向上滚');

        }

    }

}

4.2 键盘事件

keydown		键盘按键按下

keyup		键盘按键抬起

keypress	键盘按键按下

keypress 和 keydown 的区别：

keypress：

控制按键不能触发，只有可输入字符按键才能触发

可以区分字母按键的大小写

keydown：

所有的按键按下都可以触发

无法区分字母按键的大小写

哪些元素可以监听键盘事件？

1. 表单控件元素，获取焦点之后按键盘

2. document对象

如何获取按的是哪个键？

通过事件对象获取，键盘事件对象具有如下属性：

keyCode		获取所按按键对应的ascii码，是个数字

which		同keyCode

key			获取所按按键的名字，是个字符串

4.3 文档事件

load				文档加载完毕，需要监听到window或者body元素

DOMContentLoaded	文档加载完毕，需要监听到window或者body元素

load 事件与 DOMContentLoaded 事件的区别：

load： 文档中所有的一切加载完毕，包括引用的外部文件

DOMContentLoaded： 文档中元素加载完毕，不包括引用的外部文件，只能使用addEventListener监听事件

4.4 表单事件

submit		表单提交的时候，需要监听到form元素上

reset		表单重置的时候，需要监听到form元素上

blur		失去焦点的时候，需要监听到表单控件元素

focus		获取焦点的时候，需要监听到表单控件元素

select		里面的文字内容被选中的时候，需要监听到输入框或文本域元素上

input		输入框内容改变，需要监听到输入框或文本域元素上

change		监听到输入框元素，输入的内容改变且失去焦点

            监听到选择框元素，一改变就触发

4.5 图片事件

load		图片加载完毕

error		图片加载失败

4.6 过渡事件

transitionstart		过渡开始事件，过渡延迟之后触发

transitionrun 		过渡开始事件，过渡延迟之前触发

transitionend		过渡结束事件

4.7 动画事件

animationstart		动画开始事件，延迟之后触发

animationend		动画结束之后

animationiteration	动画每执行一次就触发一次

4.8 其他事件

scroll		滚动事件，需要监听给内容可以滚动的元素或者window

resize		视口尺寸改变事件， 需要监听给window

5 Event 对象

5.1 获取 Event 对象

给事件的回调函数设置形参，自动获取到事件对象

5.2 鼠标事件对象 MouseEvent 的属性和方法

button				按键值， 0表示左键，1表示滚轮键，2表示右键

offsetX / offsetY   获取鼠标在目标元素上的位置

clientX / clientY	获取鼠标在视口上的位置

pageX / pageY		获取鼠标在页面上的位置

screenX / screenY	获取鼠标在屏幕上的位置

5.3 键盘事件对象 KeyborardEvent 的属性和方法

keyCode		获取按键对应的ascii码，是个数字

which		同keyCode

key			获取按键的名字，是个字符串

5.4 所有类型的事件对象都有的属性和方法

type		获取事件名

timeStamp	获取事件触发时的时间戳（从页面打开的那一刻开始算）

target		获取目标元素

stopPropagation()	阻止事件冒泡

preventDefault()	阻止浏览器默认行为

5.5 阻止事件冒泡

事件对象.stopPropagation()

5.6 浏览器的默认行为

① 浏览器有哪些默认行为

1. 点击超链接跳转

2. 点提交按钮会按回车键表单可以提交； 点重置按钮表单重置

3. 鼠标右键弹出系统菜单

4. 滚动滚轮页面滚动

...

② 阻止浏览器默认行为

1. 事件对象.preventDefault()

2. 如果是第二种事件监听方式， return false 也可以阻止浏览器默认行为

5.7 事件委托（事件委派）

事件委托的原理：

1. 将事件监听到某个祖先元素

2. 在事件的回调函数进行判断， 只有目标元素是指定的元素才进行相应的操作

   可以使用 event.target 获取目标元素，类名、标签名都可以作为判断依据

事件委托能解决什么问题？

1. 让新增加的元素也具有事件

2. 如果需要给大量的元素监听事件，使用事件委托可以提升效率，减少内存

6 DOM 对象深入分析

6.1 元素对象的原型链关系(了解)

div元素对象 -> HTMLDivElement.prototype -> HTMlElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype

6.2 事件对象的原型链关系(了解)

以鼠标事件对象为例：

鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype -> Event.prototype -> Object.prototype

6.3 HTMLCollection 和 NodeList 的区别

① HTMLCollection 对象

1. 能够返回HTMLCollection 对象的属性和方法： getElementsByTagName()、getElementsByClassName()、children

2. HTMLCollection 对象的成员只能是元素类型对象

3. 没有 forEach 方法

4. 是动态的集合，如果文档中新增了满足条件的元素，集合会自动更新

② NodeList

1. 能够返回 NodeList 对象的属性和方法： querySelectorAll()、getElementsByName()、childNodes

2. NodeList 对象的成员可以是节点类型的对象（包括元素类型、document 等）

3. 具有 forEach 方法

4. 静态的集合