建网站业务如何开展,用笔记本做网站服务器,wordpress排除置顶文章,网站关键词排名系统内容回顾
DOM编程 document对象 有属性 有方法 节点类型 元素节点 属性节点 文本节点 操作DOM属性 DOM对象.属性名称 DOM对象[属性名称] 调用DOM对象的API 操作DOM样式 获取有单位的样式值 标签对象.style.样式名称#xff0c;这种方式只能操作行内样式。 使用getComputedSty…内容回顾
DOM编程 document对象 有属性 有方法 节点类型 元素节点 属性节点 文本节点 操作DOM属性 DOM对象.属性名称 DOM对象[属性名称] 调用DOM对象的API 操作DOM样式 获取有单位的样式值 标签对象.style.样式名称这种方式只能操作行内样式。 使用getComputedStyle标签对象.样式名称这种方式既可以操作行内的也可以操作页面或外部的。缺点是需要高版本的浏览器IE9以上。 标签对象.currentStyle.样式名称这种方式是适用于低版本的浏览器。 获取无单位的样式值 offsetwith获取宽度 offsetHeight获取高 offsetTop获取距离顶部的值 offsetLeft获取距离左边的值 操作DOM内容 处理没有value属性的标签对象如div、p、span innerHTML它是可以解析带有HTML标签的内容因此我们使用它的时候要谨慎因为存在安全隐患 innerText它不会解析HTML标签而是会原样输出但它不是W3C的标准 textContent它不会解析HTML标签而是会原样输出但它是W3C的标准 处理带有value属性的标签如input、textarea 标签对象.value 标签对象[value] 事件对象*
在JS中采用事件驱动的方式来进行编程通过事件驱动来响应用户的操作。如用户点击、鼠标移动等。
所谓事件就是浏览器与用户进行交互的动作。
事件驱动机制
在JS中事件有三个元素事件源、事件对象event、事件处理函数 事件源一般是页面的标签元素浏览器的窗口、鼠标点击等。
事件对象该事件中的所有事件信息
事件处理函数对这个事件最后的处理行为
这三个元素对应三种事件模型标签属性绑定、DOM0事件模型、DOM2事件模型 标签绑定
这是一种最简单最传统的一种事件方式。 这样注册的事件相当于动态调用的函数。 DOM0事件模型
这种模型是为了实现三层分离由W3C组织提供了基于DOM0的绑定方式先获取DOM对象然后再绑定事件。它是一种常见的方式。 DOM2事件
这种事件模型是支持同一个DOM元素可以注册多个事件而在它里面新增了事件的捕获和冒泡的操作。它是通过addEventListener和romoveEventListener来进行管理。
addEventListener有三个参数事件名称、事件回调函数、事件捕获/冒泡。 捕获/冒泡
相比DOM0去掉了前边的on而已回调时和DOM0一样也会默认传入一个event参数同时this是触发该事件的dom节点。最后一个参数是布尔型true代表捕获事件false代表冒泡事件如图 意思就是说某个元素触发了某个事件最先得知的是window然后是document依次而入直到真正触发事件的那个元素目标元素为止这个过程就是捕获。接下来事件会从目标元素开始起泡再依次而出直到window对象为止这个过程就是冒泡。
!DOCTYPE html
html langen
head meta charsetUTF-8 title捕获/冒泡/title style .test { width: 300px; height: 300px; background: #317FE5; } .test-inner { width: 200px; height: 200px; background-color: #C44F00; } /style
/head
body
div classtest div classtest-inner/div
/div
script // 1. 获取事件源对象 let outer document.querySelector(.test) // 2. 绑定捕获事件第三个参数是一个布尔值true表示捕获false表示冒泡 outer.addEventListener(click, function (e) { console.log(外层捕获) }, true) // 2. 绑定冒泡事件即将第三个参数变为 false outer.addEventListener(click, function (e) { console.log(外层冒泡) }, false) // 获取第二个事件源对象 let inner document.querySelector(.test-inner) inner.addEventListener(click, function (e) { console.log(内层捕获) }, true) inner.addEventListener(click, function (e) { console.log(内层冒泡) }, false)
/script
/body
/html 事件解除
解除事件的语法 要想注册过的事件能够被解除必须将回调函数保存起来否则无法解除。 窗口事件属性Window Event Attributes
由窗口触发该事件 (适用于标签)。 属性 描述 onafterprint 在打印文档之后运行脚本 onbeforeprint 在文档打印之前运行脚本 onbeforeonload 在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 onerror 当错误发生时运行脚本 onfocus 当窗口获得焦点时运行脚本 onhaschange 当文档改变时运行脚本 onload 当文档加载时运行脚本 onmessage 当触发消息时运行脚本 onoffline 当文档离线时运行脚本 ononline 当文档上线时运行脚本 onpagehide 当窗口隐藏时运行脚本 onpageshow 当窗口可见时运行脚本 onpopstate 当窗口历史记录改变时运行脚本 onredo 当文档执行再执行操作redo时运行脚本 onresize 当调整窗口大小时运行脚本 onstorage 当 Web Storage 区域更新时存储空间中的数据发生变化时运行脚本 onundo 当文档执行撤销时运行脚本 onunload 当用户离开文档时运行脚本 表单事件Form Events
表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内)。 键盘事件Keyboard Events 鼠标事件Mouse Events
通过鼠标触发事件, 类似用户的行为。 多媒体事件Media Events
通过视频videos图像images或者音频audio 触发该事件多应用于HTML媒体元素。 属性 描述 onabort 当发生中止事件时运行脚本 oncanplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 oncanplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 ondurationchange 当媒介长度改变时运行脚本 onemptied 当媒介资源元素突然为空时网络错误、加载错误等运行脚本 onended 当媒介已抵达结尾时运行脚本 onerror 当在元素加载期间发生错误时运行脚本 onloadeddata 当加载媒介数据时运行脚本 onloadedmetadata 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 onloadstart 当浏览器开始加载媒介数据时运行脚本 onpause 当媒介数据暂停时运行脚本 onplay 当媒介数据将要开始播放时运行脚本 onplaying 当媒介数据已开始播放时运行脚本 onprogress 当浏览器正在取媒介数据时运行脚本 onratechange 当媒介数据的播放速率改变时运行脚本 onreadystatechange 当就绪状态ready-state改变时运行脚本 onseeked 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本 onseeking 当媒介元素的定位属性为真且定位已开始时运行脚本 onstalled 当取回媒介数据过程中延迟存在错误时运行脚本 onsuspend 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 ontimeupdate 当媒介改变其播放位置时运行脚本 onvolumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本 onwaiting 当媒介已停止播放但打算继续播放时运行脚本 其他事件 事件演示 1窗口事件 2表单事件 !DOCTYPE html html langen head meta charsetUTF-8 title事件类型-表单事件/title style input { border-radius: 3px; outline: none; font-size: 12px; } .blue { border: 1px solid #317FE5; } .green { border: 1px solid green; } .red { border: 1px solid red; } span { font-size: 12px; } /style /head body input typetext nameusername classblue placeholder请输入用户名 span/span script let input document.querySelector(input) let span document.querySelector(span) /*input.onfocus function () { }*/ input.addEventListener(focus, function (e) { //console.log(e) //console.log(e.target.className); e.target.className green span.innerHTML 请输入用户名 }) input.onblur function (e) { //console.log(e) let val e.target.value if (val ) { e.target.className red span.innerHTML 用户名不为空 span.style.color red } else { e.target.className blue span.innerHTML 用户名有效 span.style.color green } } /script /body /html 3键盘事件 4鼠标事件
