事件 e||window.event

兼容： e||window.event、事件注册    e.srcElement    e.target 

事件：比如点击一个按钮，会弹出一个对话框，在js中，“点击“这个事情看作一个事件。”弹出对话框“就是点击事件中做的一些事

事件三要数：1、事件源 2、事件类型 3、事件处理函数function(){}

事件对象event：

        作用：处理事件的,比如鼠标点击里面就包含了鼠标相关信息，鼠标坐标等。键盘：判断用户按下了哪个键

        创建方式：当触发事件的时候由系统自动创建，比如点击时候创建、绑定不算创建。创建之后事件对象会赋给形参

        获取事件对象：在事件处理函数中拿到

兼容写法：e||window.event  （识别不到为undifund）

<div onclick="demo(event)"></div>
    <p>123</p>
//属性式
function demo() {
    console.log(event);
}
//赋值式
var p = document.querySelector('p')
p.onclick = function (e) {
    console.log(e);
}
//监听式
div.addEventListener('click', function(e) {
    console.log(e);

})

 

 事件类型

        鼠标事件

                click ：点击事件
                dbclick ：双击事件
                contextmenu ： 右键单击事件
                mousedown ：鼠标左键按下事件
                mouseup ：鼠标左键抬起事件
                mousemove ：鼠标移动
                mouseover ：鼠标移入事件
                mouseout ：鼠标移

                onfocus 获得鼠标焦点触发事件          没有冒泡阶段
                onblur 失去鼠标焦点触发事件             没有冒泡阶段
                mouseenter ：鼠标移入事件               没有冒泡阶段
                mouseleave ：鼠标移出事件

                                pointer-events: none;

                        

鼠标事件对象的属性:

        鼠标事件获取光标位置属性

                相对于浏览器可视区：e.clientX  e.clientY

                相对于自身位置 ：offsetX,offsetY

                相对于文档：pageX pageY

                相对于电脑屏幕 screenX  screenY

        表单事件form

                onchange 表单内容改变

                oninput 表单内容输入事件

                onsubmit 表单提交事件 :先执行表单提交事件(表单验证)，执行完毕执行form cation动作

        键盘事件（三个一起有执行顺序 down > press > yup ）文档对象的事件document.onkey 

               组合键 altkey shiftkey ctrlket按下为为true 

                 onkeyup 按键弹起触发

                onkeydown  按键按下触发

                onkeypress    按键按下触发（不识别功能键 比如ctrl shift）

                键盘对象

                        keyCode 返回键的ASCII码值（区分大小写）

事件对象方法

e.preventDefault()方法 阻止执行表单action动作             （让链接不跳转 或则让提交按钮不提交）

Bom:跳转地址 loction.href

注册(绑定)事件的方式       

addEventListener第三个参数true捕获 flase冒泡    省略就是flase冒泡阶段----target返回触发的对象

属性式

赋值式

侦听式

    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件 只能一个
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('hao a u');
        }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })

            // 3. attachEvent ie9以前的版本支持
        // btns[2].attachEvent('onclick', function() {
        //     alert(11);
        // })
    </script>

删除事件

divs[0].onclick = function() {
    alert(11);
// 1. 传统方式删除事件
    divs[0].onclick = null;
}




2.监听式: 
3. detachEvent   

DOM事件流

        事件在元素之间按特定顺序    传播的过程 为dom事件流

        1 捕获阶段 2当前目标阶段 3冒泡阶段

             

 js只能得到捕获或者冒泡其中一个阶段

冒泡监听：addEventListener第三个参数true flase 判断是捕获还是冒泡阶段 省略就是flase冒泡阶段

冒泡：先子后父

        onclick等  和ie监听  attachEvent只能得到冒泡阶段

        onblur onfocus onmouseenter 没有冒泡阶段

        

事件对象常用的属性和方法   e.target||e.srcElement 兼容

e.target  返回触发事件的对象 （标准） 省略就是flase冒泡阶段                        this返回绑定事件的对象

e.srcElement   返回触发事件的对象 （非标准 ie6-8）

e.type  返回事件类型

e.returnValue 该属性阻止默认行为   非标准   ie

e.e.preventDefault()阻止默认行为（dom推荐标准）（让链接不跳转 或则让提交按钮不提交）        return false也可以阻止默认行为 没有兼容问题  但是后面的代码不执行   只使用传统注册方式！！  （属性、赋值式）

阻止冒泡

        e.stopPropagation() 标准

        e.canselBubble=true 

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true

        

事件委托、代理（jquery叫委派）

        【原理】不是每个子节点单独设置事件监听器，二十事件监听器设置在父节点上，然后冒泡原理影响每个子节点