JS-DOM事件总结

1.事件三要素（重点）

     事件：点击某个东西时会产生一个事件，然后去执行某些操作。

   （1）事件源：触发事件的事件源（就是点击谁时触发的）

   （2）事件类型：例如单击事件 onclick 

   （3）事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

2.事件类型（重点）

  2.1 鼠标事件（个人观点：标红的是常用的需要记忆）

        语法：  事件源（点击谁） . 事件类型（触发什么事件） = function （）{

                                    执行语句（干什么）

                     }

            onmouseover           鼠标刚进入时触发  （会触发事件冒泡）

            onmouseenter           鼠标完全进入时触发（会触发事件冒泡）

            onmouseout             鼠标刚要离开时触发

            onmouseleave           鼠标完全离开时触发

            onmousemove         鼠标移动时触发

            onmousedown            鼠标按下时触发

            onmouseup                 鼠标弹起时触发

            onclick                       鼠标单击时触发

            ondblclick                   鼠标双击时触发

            onmousewheel           滚轮滚动时触发

            onscroll                       滚动条滚动时触发

            oncontextmenu           右键菜单栏打开时触发

  2.2 键盘事件

onkeydown	键盘按键按下时触发
onkeypress	键盘按着不放时触发
onkeyup	键盘按键弹起时触发

onkeydown   快捷键设置或设置时特殊建用

  2.3 表单事件

onchange	内容改变事件
onfocus	获取焦点时触发的事件
onblur	失去焦点时触发的事件
oninput	输入事件
onsubmit	表单提交事件
onreset	表单重置事件

  2.4 窗口事件

onload	文档及其资源文件都加载完成时触发
onresize	事件会在窗口或框架被调整大小时发生。
onunload	关闭网页时

3.事件对象（ event  ）

       触发某个元素身上的时间是，会产生一个 event 事件对象，这个事件对象中包含着所有与事件有关的信息。例如谁触发的事件，触发的什么事件等等.....

  3.1 事对象的使用

     

  //获取元素
 
  var box = document.getElementById('box');
  // 触发对象. 触发事件=function（ event ）{
  //
  //  
  // }

  box.onclick = function(e){
      console.log(e)
      .........
  }

3.2 事件对象 event 的属性 （个人观点：标红的需要记忆）

type	返回当前 event 对象表示的事件的名称。
preventDefault()	通知浏览器不要执行与事件关联的默认动作(阻止默认行为)
target	返回触发此事件的元素（事件的目标节点）。
currentTarget	返回其事件监听器触发该事件的元素。
keyCode	返回键盘事件中的键码值
stopPropagation()	阻止事件传播。

3.3 事件注册处理程序

       js是单线程的运行，当1个元素绑定两个相同的事件时，前者会覆盖后者。

     例如:

        box.onclick = function() {
            console.log(1);
        }


        box.onclick = function() {
            console.log(2);
        }

  通过 addEventListener(  ) 方法注册， 1个元素绑定两个相同的事件时，不会被覆盖，会依次执行。

btn.addEventListener("dblclick", function(){
      alert("双击1");
});

btn.addEventListener("dblclick", function(){
      alert("双击2");
});

 3.4  移除事件

  null移除事件： curEle.οnclick= null;（将事件赋值为空）

   具名函数的移除

      function clickHandler(){}；
      curEle.addEventListener('click',clickHandler)；
      curEle.removeEventListener('click',clickHandler);