1,获取标签的占位
(1),通过属性值方式获取标签对象的对应属性
标签对象.sytle.width
(2),通过标签对象的属性来获取
offsetHeight offsetWidth
高/宽 + padding + border
clientHeight clientWidth
高/宽 + padding
clientLeft clientTop
左/上 边框线
offsetLeft offsetTop
左/上 定位父级元素的间距
2,DOM操作,内容的设定
写入
标签对象.innerHTML = '内容' 支持解析标签
标签对象.innerText = '内容' 不支持,不解析标签
获取
var 变量 = 标签对象.innerHTML 获取标签的所有内容,包括标签
var 变量 = 标签对象.innerText 获取标签的所有文本内容,没有标签
3,事件
鼠标事件:
左键单击 click
左键双击 dblclick
右键单击 contentmenu
鼠标移入
mouseover 当前标签,子级标签边界线,都会触发
mouseenter 只有当前标签边界线,会触发
鼠标移出
mouseout 当前标签,子级标签边界线,都会触发
mouseleave 只有当前标签边界线,会触发
鼠标移动
mousemove
表单事件
获取焦点 focus
失去焦点数值改变 change
输入事件 input
提交事件 submit
4,事件对象
标签对象.绑定的事件类型 = function(e){
e = e || window.event
}
1,button按钮
是H5专门强化的标签,实际项目中,推荐使用button标签,替换input按钮
样式设定更方便,功能更加强大
在一般情况下,button按钮默认没有任何功能,配合JavaScript使用
在form标签中
button 按钮默认是提交功能 type="submit"
重置标签恢复默认值 type="reset"
普通按钮没有功能 type="button"
2,键盘事件
keydown 按键按下,如果一直按下,会一直触发
keyup 按键抬起
(1),键盘事件只能绑定给特殊的对象
window document
特殊标签:可以被选中的标签
input select textarea button a...
(2),按键事件对象的常用属性
e.key 按键名称
数值和小键盘数值会重复,不推荐使用
e.keyCode 按键编码,全世界所有的计算机语言都是统一的
每个按键都有自己独立的编码不会重复
兼容性:低版本的火狐浏览器,现在一般不用
var 变量 = e.keyCode || e.which
按键组合
e.ctrlKey 判断ctrl键是否按下
true 按下
false 没按
e.altlKey 判断alt键是否按下
true 按下
false 没按
e.shiftKey 判断shift键是否按下
true 按下
false 没按
所谓的按键组合 ctrl / alt / shift + 其他按键
3,触摸事件和特殊事件
触摸事件:应用与移动端,对PC端无效
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
特殊事件:
transitionend 当过渡结束时
animationend 当动画结束时
4,事件对象的目标
e.target 以对象的形式,来存储触发事件目标的相关信息
兼容语法: var 变量 = 事件对象.target || 事件对象.srcElement;
e.target.tagName 触发事件标签的名称
都是大写英文字母
e.target.id 触发事件标签的id属性值
e.target.className 触发事件标签的class属性值
e.target.getAttribute('属性') 触发事件标签的属性的属性值
小总结: 事件对象相关的兼容 有3个兼容
1,兼容事件对象
标签.事件 = function(形参){
参数 = 参数 || window.event
}
2,兼容事件对象目标
标签.事件 = function(形参){
参数 = 参数 || window.event
var 变量 = 参数.target || 参数.srcElement;
}
3,兼容按键编码
window.onkeydown = function(形参){
参数 = 参数 || window.event
var 变量 = 参数.keyCode || 参数.which;
}
事件委托
给父级添加事件类型,通过判断触发事件的目标,不同的触发目标,执行不同的程序
往往是动态添加标签时,使用事件委托,给动态添加的标签,定义事件
优点:
1,不用循环遍历所有的标签,只要给一个一直存在的,不是动态生成的父级标签添加事件即可
2,不用管代码的执行顺序,也就是添加事件时,动态标签是否已经生成
因为是给一直存在的父级标签添加的事件
不用管动态的子级标签是否已经生成了