做网站排版,想在网上做设计接单有没有网站,wordpress文库插件,营销网站定位文章目录 1.HTML DOM1.1 表单相关元素① form 元素② 文本输入框类和文本域#xff08;input 和 textarea#xff09;③ select 元素 1.2 表格相关元素① table 元素② tableRow 元素#xff08;tr 元素#xff09;③ tableCell 元素 #xff08;td 或 th#xff09; 1.3… 文章目录 1.HTML DOM1.1 表单相关元素① form 元素② 文本输入框类和文本域input 和 textarea③ select 元素 1.2 表格相关元素① table 元素② tableRow 元素tr 元素③ tableCell 元素 td 或 th 1.3 快速创建 img 元素 2.事件3.1 事件监听① 给元素监听事件的三种方式② 解除事件的监听 3.2 事件流3.3 事件的回调函数中 this 的指向 4.常用事件总结4.1鼠标事件4.2 键盘事件4.3 文档事件4.4 表单事件4.5 图片事件4.6 过渡事件4.7 动画事件4.8 其他事件 5 Event 对象5.1 获取 Event 对象5.2 鼠标事件对象 MouseEvent 的属性和方法5.3 键盘事件对象 KeyborardEvent 的属性和方法5.4 所有类型的事件对象都有的属性和方法5.5 阻止事件冒泡5.6 浏览器的默认行为① 浏览器有哪些默认行为② 阻止浏览器默认行为 5.7 事件委托事件委派 6 DOM 对象深入分析6.1 元素对象的原型链关系(了解)6.2 事件对象的原型链关系(了解)6.3 HTMLCollection 和 NodeList 的区别① HTMLCollection 对象② NodeList 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 视口尺寸改变事件 需要监听给window5 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.prototype6.2 事件对象的原型链关系(了解)
以鼠标事件对象为例
鼠标事件对象 - MouseEvent.prototype - UIEvent.prototype - Event.prototype - Object.prototype6.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. 静态的集合
