JavaScript事件高级导读

一.注册事件方式

1.传统注册事件，注册事件唯一性

        btns[0].onclick=function(){
            alert("hi");
        }

2. 方法监听注册事件 addEventListener  

       ie9才以上支持

    (1)里面的事件类型是字符串 必须加引号  而且不带on    

    (2)同一个元素  同一个事件可以添加 多个侦听器(事件处理程序)

btns[1].addEventListener("click",function(){
    alert(22);
})

二·.删除事件方式

1.传统方式删除事件

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

2.removeEventListener删除事件

        divs[1].addEventListener("click",fn);//里面的fn不需要调用加小括号
        function fn(){
            alert(33);
            divs[1].removeEventListener("click",fn);
        }

三.事件对象

       var div=document.querySelector("div");
        // div.onclick=function(event){
        //     console.log(event);
 
        // }
        div.addEventListener("click",function(e){
            console.log(e);
        })

   1.event 就是一个事件对象  写的我们侦听函数的小括号里面 当形参来看

   2.事件对象只有有了事件才会存在 它是系统给我们自动创建的，不需要我们传递参数

  3.事件对象 是我们事件的一系列相关数据的集合 跟事件相关 比如鼠标点击就包含了鼠标的相关信息、鼠标坐标啊，如果是键盘事件里面就包含了键盘事件的信息  比如判断用户按下了那个键。

  4.这个事件对象我们可以自己命名，比如 event evt e

  5.事件对象也有兼容性问题ie678 可以通过window.event 兼容性的写法：e=e||window.event

四.常见事件对象属性和方法

1.鼠标事件

onclick          鼠标点击左键触发
onmouseover    鼠标经过触发
onfocus         获得鼠标焦点触发
onblur          失去鼠标焦点触发
onmousemove   鼠标移动触发
onmouseup     鼠标弹起触发
onmousedown   鼠标按下触发
onmouseenter 鼠标移入
onmouseleave鼠标移出

   e.target返回的是触发事件的对象(元素)  this 返回的是绑定事件的对象(元素)

  区别 ：e.traget 点击哪个元素就返回哪个元素  this是哪个元素绑定了这个事件就返回谁

（1） e.type 返回事件的类型  比如 点击  鼠标经过

（2） e.traget 指向我们点击的对象  谁触发了这个事件  我们点击了li ， e.traget 返回的是li

（3）阻止默认行为e.preventDefault()

var a=document.querySelector("a");
a.addEventListener("click",function(e){
    e.preventDefault();//dom 标准写法
})
//阻止a链接跳转

（4）contextmenu 禁止右键菜单

        document.addEventListener("contextmenu",function(e){
            e.preventDefault();
        })

（5）禁止选中文字 selectstart

 document.addEventListener("selectstart",function(e){
            e.preventDefault();
        })
client 鼠标在可视区的屏幕坐标（e.clientX  ,  e.clientY）;

page 鼠标在页面文档的坐标 （e.pageX   ,  e.pageY);

（6） 鼠标移动事件 mousemove

2.常用键盘事件

  （1）keyup 按键弹起的时候触发

  （2）keydown 按键按下的时候触发

  （3）keypress 按键按下的时候触发 不能识别功能键  比如ctrl shift 左右箭头

键盘事件对象中的keyCode 属性可以得到相应键的ASCII值

            我们的keydown和keyup事件不区分字母大小写 a 和 A 得到的都是65

            我们的keypress 是区分字母大小写的 a 97  和 A 65

            我们可以利用keyCode返回的ASCII值来判断用户按下了哪个键