1,DOM操作,内容的设定
写入
标签对象.innerHTML = '内容' 支持解析标签
标签对象.innerText = '内容' 不支持,不解析标签
获取
var 变量 = 标签对象.innerHTML 获取标签的所有内容,包括标签
var 变量 = 标签对象.innerText 获取标签的所有文本内容,没有标签
2,事件
鼠标事件:
左键单击 click
左键双击 dblclick
右键单击 contextmenu
鼠标移入
mouseover 当前标签,子级标签边界线,都会触发
mouseenter 只有当前标签边界线,会触发
鼠标移出
mouseout 当前标签,子级标签边界线,都会触发
mouseleave 只有当前标签边界线,会触发
鼠标移动
mousemove
表单事件
获取焦点 focus
失去焦点数值改变 change
输入事件 input
提交事件 submit
3,事件对象
标签对象.绑定的事件类型 = function(e){
e = e || window.event
}
4,键盘事件
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.altKey 判断alt键是否按下
true 按下
false 没按
e.shiftKey 判断shift键是否按下
true 按下
false 没按
所谓的按键组合 ctrl / alt / shift + 其他按键
5,触摸事件和特殊事件
触摸事件:应用与移动端,对PC端无效
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
特殊事件:
transitionend 当过渡结束时
animationend 当动画结束时
6,事件对象的目标
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,不用管代码的执行顺序,也就是添加事件时,动态标签是否已经生成
因为是给一直存在的父级标签添加的事件
不用管动态的子级标签是否已经生成了
事件的三大要素
事件绑定对象
指的是,绑定事件和事件处理函数的标签
这个标签有可能不是触发事件的标签
事件类型
绑定的标签的事件类型
鼠标事件 表单事件 键盘事件 触摸事件 特殊事件
事件处理函数
触发事件时执行的程序
一个标签,往往相同的事件类型只能绑定一个事件处理函数
如果要绑定多个事件处理函数,需要使用事件监听语法
一.事件类型之鼠标事件
鼠标事件
通过操作鼠标,来触发事件
var oDiv = document.querySelector('div');
1,左键单击事件 click
oDiv.onclick = function(){
console.log('触发的是鼠标左键单击事件');
}
2,左键双击事件 dblclick
oDiv.ondblclick = function(){
console.log('触发的是鼠标左键双击事件');
}
3,右键单击事件 contextmenu
oDiv.oncontextmenu = function(){
console.log('触发的是鼠标右键事件');
}
4,鼠标按键按下事件 mousedown
当鼠标按下时,触发事件
鼠标的点击事件是 两个动作完成的
一个是鼠标按下,一个是鼠标抬起
如果只有按下动作,只会触发 mousedown
抬起时,完成一个完整的点击效果,才会触发 click
oDiv.onmousedown = function(){
console.log('鼠标按下了');
}
5,鼠标按键抬起事件 mouseup
当鼠标抬起时,触发事件
oDiv.onmouseup = function(){
console.log('鼠标抬起来了');
}
总结:
1,鼠标点击事件,分为两部分完成
鼠标按下 鼠标抬起
2,只操作鼠标按下,只会触发鼠标按下事件
3,只操作鼠标抬起,只会触发鼠标抬起事件
4,两个操作都完成后,才会触发鼠标点击事件
5,鼠标按下抬起,不区分左键右键
6,鼠标移入事件
经过标签边界线的时候触发
mouseover mouseenter
经过子级会触发
oDiv.onmouseover = function(){
console.log('我进来了1111');
}
经过子级不触发
oDiv.onmouseenter = function(){
console.log('我进来了2222');
}
7,鼠标移出事件
经过标签边界线的时候触发
mouseout mouseleave
经过子级会触发
oDiv.onmouseout = function(){
console.log('我出去了1111');
}
经过子级不会触发
oDiv.onmouseleave = function(){
console.log('我出去了2222');
}
总结:
1,鼠标移出,移出事件,只有经过标签边界线时触发
在标签内部时,不会触发
2,mouseover mouseout
经过当前标签边界线时会触发
经过子级标签边界线时也会触发
3,mouseenter mouseleave
只有经过当前标签时会触发
经过子级标签时,不会触发
8,mousemove 鼠标移动
鼠标在标签范围内移动,会触发事件
效果类似于 :hover
oDiv.onmousemove = function(){
console.log('我动来动去');
}
二.事件类型之表单事件
表单事件
与form表单相关的事件
var oIpt = document.querySelector('input');
var oForm = document.querySelector('form');
1, focus 标签获取焦点事件
所谓的鼠标检点,就是鼠标点击的对象是当前标签
oIpt.onfocus = function(){
console.log('我被点击了,我获取了焦点');
}
2, change 标签失去焦点,并且数据改变,触发事件
触发事件有两个条件
1,标签失去焦点 --- 焦点在其他标签上
2,标签的数据,发生改变
oIpt.onchange = function(){
console.log('我失去焦点了,而且我被改变了')
}
3, input 标签输入内容时,触发事件
oIpt.oninput = function(){
console.log('我被输入数据了')
}
4, submit 表单提交事件
绑定给form表单标签
可以阻止提交表单
多用于,提交数据时,做判断操作
如果数据不符合要求,就阻止表单提交
oForm.onsubmit = function(e){
e.preventDefault();
window.alert('您输入的数据有误')
}
三.事件类型之键盘事件
<div>123</div>
<input type="text">
键盘事件
与 按键 相关的事件
键盘事件,不能绑定给某个标签
必须是, window 或者 document 两个使用效果完全一致
或者是, 可以被选中的,可以获取焦点的标签
input select textarea button a ....
keydown 按键按下事件 , 如果按住不会,会一直触发
keyup 按键抬起事件
window.onkeydown = function(){
console.log(123);
}
document.onkeydown = function(){
console.log(456);
}
var oDiv = document.querySelector('div');
oDiv.onkeydown = function(){
console.log(789);
}
var oIpt = document.querySelector('input');
oIpt.onkeydown = function(){
console.log(11111);
}
按键的事件对象
e.key 存储你按下的按键的名称
键盘区域的数值和小键盘区域的数值,不做区分,都是相同的
e.keyCode 每个按键对应一个数值,绝对不会重复
使用这个属性来区分每个按键
按键编码
需要做兼容处理,兼容的是低版本的火狐浏览器
var 变量 = e.keyCode || e.which
现在用的很少了
window.onkeydown = function(e){
console.log(e);
}
按键组合
ctrl alt shift + 其他组合按键
事件对象e中有3个属性
ctrlKey 按下 ctrl 结果是 true 没有按结果是false
altKey 按下 alt 结果是 true 没有按结果是false
shiftKey 按下 shift 结果是 true 没有按结果是false
判断按下按键是 ctrl + e (69)
window.onkeydown = function(e){
if(e.ctrlKey == true && e.keyCode == 69){
console.log('同时按下ctrl和e键');
}
}
四.事件类型之触摸事件和特殊事件
触摸事件
用于移动端事件
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
其他事件实际就是这三个事件的组合使用
长按 : 触摸开始和触摸结束之间的时间差 大于 1秒 0.5秒
计算 两个 触发时 时间戳 的 差
: 或者触发 触摸开始事件 超过 1秒 或者 0.5秒
轻触 : 触摸时间差小于 100毫秒
左移 : 触摸开始,触摸结束,坐标差
到3阶段,讲App和小程序时会有框架的语法形式,来定义执行事件
特殊事件
当过度结束时 transitionend 当过度结束时执行
当动画结束时 animationend 当动画结束时执行
有几个执行属性,程序就执行几次操作
var oDiv = document.querySelector('div');
oDiv.ontransitionend = function(){
console.log('过度结束了');
}
五.事件对象event
事件对象event
事件对象,指的是触发绑定事件的标签
有时触发事件的标签和绑定事件的标签,不是一个标签
就是所谓的 事件委托(明天讲)
事件对象,是事件处理函数的参数
这个参数中,JavaScript自动存储触发事件标签的相关信息
这个参数可以随便定义,一般定义成 event 或者 e,表示是 事件对象
事件对象有兼容处理
低版本ie有专门的语法来存储事件处理函数对象
一般浏览器 || 低版本IE浏览器
兼容语法 e = e || window.event
<div>我是div</div>
var oDiv = document.querySelector('div');
没有参数,就没有容器,就没有存储内容的变量
定义了参数,JavaScript程序,就自动向这个参数中,存储事件对象的相关信息
oDiv.onclick = function(e){
e = e || window.event;
console.log(e);
}
要阻止默认事件的执行,必须是
事件对象.preventDefault();
阻止默认事件的执行,也有兼容,我们明天讲
六.事件对象的目标
1,事件对象
触发事件时,JavaScript自动向参数中存储的触发事件的标签的信息
兼容语法 e = e || window.event
2,事件对象的目标
e.target
绑定事件标签的子级标签,也会触发父级绑定的事件
此时触发事件的对象是子级标签,不是绑定事件的标签
低版本的IE浏览器,没有 事件对象.target
有 srcElement
兼容语法 : var eTar = e.target || e.srcElement
var oDiv = document.querySelector('div');
oDiv.onclick = function(e){
e = e || window.event;
console.log(e);
}
七.冒泡事件
冒泡事件 / 事件的传播
什么是冒泡事件:
子级标签触发事件,JavaScript中,父级程序,默认也会触发相同类型的事件
这样的效果,称为冒泡事件
只与标签在HTML中的层级关系有关,与css和显示效果无关
执行顺序,都是从当前标签向父级元素,执行
实际的标签的捕获顺序是有区别的
IE浏览器是 从 子级向父级 获取标签,称为 冒泡机制
其他浏览器 是 从 父级向子级 获取标签,称为 捕获机制
虽然获取标签的方式不一样
但是现在所有的执行顺序都是从当前标签向父级标签执行
阻止事件的传播 / 阻止冒泡事件
事件对象.stopPropagation()
哪个标题有阻止冒泡事件代码,冒泡事件,执行就到这个标签为止
只触发自己身上的事件,不会触发父级标签,相同类型的事件
只管自己,谁写,谁不触发,子级父级,都不管,就自己触发自己的事件
兼容问题
低版本IE浏览器
事件对象.cancelBubble = true; 阻止冒泡事件,阻止事件的传播
兼容语法
if(事件对象.stopPropagation){
事件对象.stopPropagation();
}else{
事件对象.cancelBubble = true;
}
var oDivBox = document.querySelectorAll('div')[0];
var oDivMiddle = document.querySelectorAll('div')[1];
var oDivInner = document.querySelectorAll('div')[2];
oDivBox.onclick = function(e){
e = e || window.event;
console.log('我是box-div触发的事件');
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
oDivMiddle.onclick = function(e){
e = e || window.event;
console.log('我是middle-div触发的事件');
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
oDivInner.onclick = function(e){
e = e || window.event;
console.log('我是inner-div触发的事件');
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
document.onclick = function(){
console.log('我是document');
}
总结
外 中 内
都写,就都只触发自己
外写,就管自己,外,不触发父级
中,内,没有变化,中触发自己和外 内触发自己和中外
中写,就管自己,外,会触发父级 内触发只到中
内写,就管自己,外,会触发父级 中触发,自己和外
八.事件的委托
事件的委托
给当前标签添加事件
通过判断触发事件的标签,是子级元素的标签
根据不同的标签,执行不同的代码,称为事件的委托
给标签添加事件,子级标签触发,不同标签,触发不同程序
var oDiv = document.querySelector('div')
oDiv.onclick = function(e){
if(e.target.id == 'div1'){
console.log('触发事件的标签是div')
}
if(e.target.tagName == 'BUTTON'){
console.log('触发事件的标签是button')
}
if(e.target.className == 'span1'){
console.log('触发事件的标签是第一个span标签')
}
if(e.target.className == 'span2'){
console.log('触发事件的标签是第二个span标签')
}
if(e.target.getAttribute('name') == 'abc'){
console.log('触发事件的标签是strong标签')
}
}