js事件

事件：在某一时刻，用户在页面做了某一件事，要给出的反馈

事件的三要素：
        1、事件源
        2、事件类型
        3、事件处理函数

DOM 0级事件绑定     事件源.on + 事件类型 = 事件处理函数
    弊端：无法绑定多个同类型的事件，会覆盖原来的事件

DOm 2级事件绑定     事件源.addEventListener('事件类型'，事件处理函数，第三个参数)
oDiv.addElventListener('clik(事件类型)',function())

1、滚动事件

    window.onload (当页面所有资源加载完毕后执行)
    // var oDiv = document.querySelector('div')
    // console.log(oDiv)    //                  null

    window.onload = function () {
        // 当 页面 所有资源加载完毕时 执行

        var oDiv = document.querySelector('div')
        console.log(oDiv)
    }

2、js的鼠标事件

1、左键单击         元素.onclick = function(){}
2、双击事件         元素.ondblclik  = function(){}\
3、右键事件         元素.oncontextmenu = function(){}
4、鼠标按下事件     元素.onmousedown
5、鼠标抬起事件     元素.onmouseup
6、鼠标移入事件     元素.onmouseover    移入元素和移入元素子盒子时都会触发
7、鼠标移出事件     元素.onmouseout     移出元素和移出元素子盒子时都会触发
8、鼠标移动事件     元素.onmousemove
9、鼠标移入事件2    元素.onmouseenter   只会在移入元素时触发
10、鼠标移出事件2   元素.onmouseleave   只会在移出元素时触发

3、键盘事件

    键盘事件：document或者input
1、键盘抬起事件     document.onkeyup
2、键盘按下事件     document.onkeydown  = function(){}
3、键盘按下抬起事件 document.onkeypress

4、表单事件

1、获取焦点事件     input.onfocus = function(){}
2、失去焦点事件     inp.onblur  = function(){}
3、文本框内容改变时触发 inp.onchange  = function(){}
4、文本输入内容时触发  inp.oninput = function(){}

事件对象

       当事件触发时, 携带一些信息 
       当前时间的事件源是谁?
       鼠标点击的位置在哪里(点击事件)
       键盘按下了那个按键(键盘事件) 


    oDiv.onclick = function (e) {
                console.log(e)
            }
    
        e:every

获取鼠标位置

 * 获取鼠标按下时的坐标
     *      相对于
 * 1. 事件源
    e.offsetX
    e.offsetY
 *2. 页面
    e.pageX
    e.pageY
 *3. 浏览器窗口
    e.clientX
    e.clientY

获取键盘按键

e.key===>返回按下的按键
e.keyCode       返回按下的按键的进制码

• var inp = document.querySelector('#inp')
    inp.onkeyup = function (e) {
        console.log(e)
        if (e.ctrlKey && e.key == 'a') {
            console.log('此时按下了 ctrl健 和 a键')
        }
    }
  

事件传播

    定义：在触发事件传播
        在触发了子元素的事件中，会将行为传播给父级的同类类型事件
        触发了子元素的点击事件时，会将该行为传播给父级
        并触发父级的同类型事件
    
    
            在传递行为时，会将行为一直向上传播，如果父级有同类型的事件，那么触发该事件，如果没有，则继续向上传递


        阻止事件传播：    e.stopPropagation()       必须传e

目标冒泡捕获

    冒泡：事件传播时，从目标开始传播，一直到父级，body...window
    window：默认冒泡传播
    捕获：事件传播时，从顶层开始逐层向下传播，一直到目标
            需要第三个参数：true

    元素.addEventListtener('click',function(e){},第三个参数)
            第三个参数默认false 代表传播方式为冒泡
            如果改变传播方式为捕获，那么需要将第三个参数传递为true

事件委托

     *  事件委托
     *      因为事件冒泡的存在, 所以点击子元素时, 一定会触发给父级
     * 
     *      所以可以将 子元素统一的事件, 都提交给 父级
     * 
     *  e.target: 触发事件的事件源
     * 
     * 
     * 总结:
     *      为什么要用事件委托
     *          动态的添加了 li 时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦
     *          所以此时可以利用 事件委托
     * 
     *      li 的点击事件必须委托给父级的 点击事件

阻止默认事件

    e.preventDefault()
    return false