【JavaScript基础13】

1.事件：能被js监听到的行为：

     1.1事件三要素：

       1. 事件源: 触发事件的源头，谁触发的这个事件（oBtn）

       2. 事件类型：是哪种事件类型，如：鼠标事件，键盘事件。。。。。（click，dblclick，mouseover，mouseout.....）

       3. 事件处理函数: 事件触发后执行的行为（{}中会执行的代码）

举例：   

        oBtn.onclick = function(){}

        oBtn.onclick =  fn（不要带括号）   function fn(){}

      事件中的this： 指向事件源；

      普通函数中的this：指向的是window；

      oBtn.onclick = function(){

        this指向的就是oBtn  

      }

      oBtn.onclick =  fn（不要带括号）   function fn(){   this指向的就是oBtn   }

      <button onclick = 'del(this)'></button>

      function del(obj){

        obj 指代的就是点击元素

    }

---

2、事件绑定（事件注册）：

        1.1  DOM0级事件绑定

          语法：事件源.on事件类型 = 事件处理函数

          举例：div.onclick = function(){}

          缺点：不能给同一个对象的同一个事件进行多次绑定

          优点：书写简单，兼容性好

        1.2 DOM2级事件绑定（事件监听）

         1.2.1

          语法：事件源.addEventListener("事件类型",事件处理函数，布尔值)；第三参数可以省去

          优点：可以给同一个对象的同一个事件进行多次绑定

          缺点：兼容性不好（IE低版本的不支持该写法）

          1.2.2 IE低版本支持

           语法：事件源.attachEvent('on事件类型',事件处理函数)；只有两个参数；

---

3.DOM事件解绑：

      DOM0级解绑：

        事件源.on事件类型 = null

     DOM2级解绑：

        语法：事件源.removeEventListener('事件类型',事件处理函数)

        注意：先绑定再移除（函数在外面单独书写）

             1·绑定 事件源.addEventListener('事件类型',fn)

             2·移除 事件源.removeListener('事件类型',fn)

             function fn(){}

---

4. js类型：

      鼠标事件：

           click 单击

           dblclick 双击

           mouseover/mouseout 移入移出

           mouseenter/mouseleave 移入移出

           mousedown/mousemove/mouseup 按下/移动/抬起  （拖拽）

           contextmenu 右键

      表单事件：

           focus 获取焦点时触发

           blur 失去焦点时触发

           input 输入内容时触发

           change 内容改变时触发

           submit 提交时触发

           reset  重置时触发

       键盘事件：

         注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的

           keydown ：按下键盘的键时触发的，会连续触发

           keypress：按住键盘中键时触发的，会连续触发                    

           keyup：从键盘中的一个键抬起时触发，从键上抬起的那一刻触发一次（**）        

      浏览器事件(都只有仅有window触发)：

        window.onscroll = function(){}   页面滚动时触发

        window.onresize = function(){}   页面窗口大小变化时触发

        window.onload = function(){}     页面资源（图片，音频，视频，dom节点）加载完成时触发

   

---

 5.事件对象：

         干什么的：事件对象中包含（记录）该事件发生时的一系列的信息；

事件对象的获取：

        标准浏览器下获取:

            事件处理函数的参数位置，书写一个参数，这个参数就是事件对象

            odiv.onclick = function(e){

                e就事件对象

       }

       IE低版本获取： 事件处理函数的内部用window.event来表示事件对象   

       处理兼容性问题：

          odiv.onclick = function(e){

                var ev = e || window.event;  (ev就是兼容性的事件对象)

         }

 鼠标事件对象的一些属性：

          1. e.pageX和e.pageY  : 鼠标点击位置距离页面的左偏移量和上偏移量；

          2. e.clientX和e.clientY  ：鼠标点击位置距离浏览器窗口的左偏移量和上偏移量；

          3. e.offsetX和e.offsetY  ：鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量；