【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结(js九)DOM基础

操作表单元素属性:

                表单.value (获取和赋值) 表单.type

                表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示:disabled,checked,selected

自定义属性:data-自定义属性  以dataset对象方式获取

                设置:data-id   获取:dataset.id

定时器:间歇函数 setInterval(函数,时间间隔)

                let 变量名=setInterval(函数,时间间隔)

                clearInterval(变量名)  关闭定时器

事件监听:元素对象.addEventListener('事件类型',要执行的函数)

               三要素:

                                事件源:dom元素

                                事件类型:click,change,mouseover等

                                事件调用的函数:要做什么事

(on方式的监听,会被addEventListener 覆盖,而且不能绑定多次)

                事件类型

                                1.鼠标事件:click:鼠击 mouseenter鼠标经过  mouseleave 鼠标离开

                                2.焦点事件:focus获得焦点 blur 失去焦点

                                3.键盘触发:Keydown键盘按下触发  Keyup键盘抬起触发

                                4.文本事件:input 用户输入事件,change 文本改变

                事件对象  e

                 环境对象 this  对调用,this就指向谁  代表着当前函数运行时所处的环境

                回调函数:当一个函数当做参数来传递给另一个函数的时候,这个函数就是回调函数

                函数的本质还是一个函数,只不过把它当成参数使用,使用匿名函数作为回调函数比较常见

事件流:事件完整执行过程中的流动路径(捕获阶段(从父到子),冒泡阶段(从子到父))

                实际工作都是使用事件冒泡为主

                事件捕获:从DOM根元素开始去执行的对应的时间(从外到里)

                        DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

                        第三个参数传入true代表捕获阶段触发,默认是冒泡 false

                事件冒泡:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先中依次被触发,这一过程叫做事件冒泡.(依次向上调用所有父级元素的同名事件)

                阻止冒泡:事件对象.stopPropagation()

                                阻止默认行为(阻止链接的跳转,表单的跳转)  e.preventDefault()

                解绑 事件:匿名函数无法解绑

                                on事件 直接用null覆盖    οnclick=null

                                addEventListener方式使用removeEventListener(事件类型,fn)

                鼠标经过事件

                                        mouseover 和mouseover 有冒泡效果

                                        mouseenter mouseleave 没有冒泡效果(推荐)

下一节:事件委托(3)