JS-事件（内容的设定、鼠标事件、事件对象、键盘事件、触摸事件、特殊事件、事件对象的目标、事件委托）

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){
    //  按下 ctrl键           按下,按键编码是69的按键
    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触发的事件');
    // 阻止冒泡事件  / 阻止事件的传播
    // 给最外层加载,只是阻止当前标签,触发父级标签的事件
    // 不影响,子级标签,触发父级标签事件
    // 阻止当前div,触发父级标签的事件
    // 但是不影响子级的两个div标签
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

oDivMiddle.onclick = function(e){
    e = e || window.event;
    console.log('我是middle-div触发的事件');
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

oDivInner.onclick = function(e){
    e = e || window.event;
    console.log('我是inner-div触发的事件');
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }

}


document.onclick = function(){
    console.log('我是document');
}


总结
    外 中 内
        都写,就都只触发自己
        外写,就管自己,外,不触发父级
            中,内,没有变化,中触发自己和外  内触发自己和中外
        中写,就管自己,外,会触发父级   内触发只到中
        内写,就管自己,外,会触发父级   中触发,自己和外

八.事件的委托

事件的委托
    给当前标签添加事件
    通过判断触发事件的标签,是子级元素的标签
    根据不同的标签,执行不同的代码,称为事件的委托

给标签添加事件,子级标签触发,不同标签,触发不同程序


var oDiv = document.querySelector('div')
oDiv.onclick = function(e){
    // e 事件对象  和 e.target 事件对象目标 都应该有兼容
    // console.log(e)

    // 通过,判断 e.target 不同的属性值
    // 判断,点击的是不同的标签,执行不同的程序

    // e.target 中 存储的是 一个标签对象  不是字符串
    // e.target == 'div'  是绝对绝对绝对错误的写法

    // 使用 e.target 对象的属性来进行判断
    // e.target.id                       触发事件标签对象的id属性值
    // e.target.className                触发事件标签对象的class属性值
    // e.target.tagName                  触发事件标签对象的标签名称
    //                                   都是大写字母
    // e.target.getAttribute('属性')     通过getAttribute,获取属性




    // e.target.innerHTML   触发事件标签对象的内容,包括标签
    // e.target.innerText   触发事件标签对象的内容,不包括标签

    // 只会触发符合条件时执行程序,点击不同的标签,触发不同的事件

    // id属性值
    if(e.target.id == 'div1'){
        console.log('触发事件的标签是div')
    }

    // 标签名称 必须都是大写字符
    if(e.target.tagName == 'BUTTON'){
        console.log('触发事件的标签是button')
    }

    // class属性值 
    if(e.target.className == 'span1'){
        console.log('触发事件的标签是第一个span标签')
    }

    // class属性值 
    if(e.target.className == 'span2'){
        console.log('触发事件的标签是第二个span标签')
    }


    // 通过 getAttribute() 获取属性的属性值
    if(e.target.getAttribute('name') == 'abc'){
        console.log('触发事件的标签是strong标签')
    }

}