【12-15】事件

一、事件：能被监听的行为

1、事件的三要素

1-1事件源：触发事件的源头，谁触发的这个事件(oBtn)

1-2事件类型：是哪种事件类型，如：鼠标事件、键盘事件...(click,dbclick,mouseover,mouseout...)

1-3事件处理函数：事件触发后执行的行为

    oBtn.onclick = function (){执行的代码}

    oBtn.onclick = fn (不要带括号)  ===> function fn(){执行的代码}

2、事件中的this：指向事件源

2-1  oBtn.onclick = function(){ this.指向的就是oBtn }

2-2【所有事件fn后面不带括号】

      oBtn.onclick = fn 

      oBtn.onmouseover = fn

      oBtn.onmouseout = fn

      oBtn.onmousemove = fn 。。。

2-3 <button onclick = 'del(this)'></button>

         function del(obj){

            obj 指代的就是点击元素

         }

2-4 普通函数内的this，指向window

          function method(){

           consoloe.log(this)

          }

          method()；

---

二、事件的绑定

1、DOM 0级事件绑定

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

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

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

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

    2、DOM 2级事件绑定

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

        举例：oDiv.addEventListener("click",function(){ })

        缺点：兼容性不好(IE低版本不支持该写法)

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

【注】IE低版本写法

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

---

三、事件的解绑

1、DOM 0级解绑

    语法：事件源.on事件类型 = null;

2、DOM 2级解绑

    语法：事件源.removeEventListener('事件类型'，fn)

    【注意】先绑定事件才可以解绑事件(函数fn在外面单独书写)

绑定  事件源.addEventListener('事件类型',fn)      函数  function fn(){ }

解绑  事件源.removeEventListener('事件类型',fn)      函数  function fn(){ }

       

绑定和解绑的例题

---

 

四、事件的类型

js类型

1、鼠标事件：

        click  ===>单击

        dblclick ===>双击

        mouseover/mouseout ===>移入移出

        mouseenter/mouseleave ===>移入移出

        mousedown/mousemove/mouseup ===>按下/移动/抬起  （拖拽效果）

        contextmenu ===>右键

2、表单事件

        focus ===>获取焦点时触发

        blur   ===>失去焦点时触发

        input   ===>输入内容时触发

        change   ===>内容改变时触发

        submit ===>提交时触发

        reset   ===>重置时触发

3、键盘事件

【注意】不是任何元素都能绑定键盘事件，window,document等表单元素是可以绑定这几个事件的

        keydown   ===>按下键盘按键时触发，会连续触发

        keypress   ===>按住键盘按键时触发，会连续触发

        keyup     ===>弹起键盘按键时触发，弹起一次触发一次

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

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

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

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

---

五、事件对象

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

1、事件对象的获取：

1-1 标准浏览下获取:事件处理函数的参数位置，书写一个参数，这个参数就是事件对象

            odiv.onclick = function(e){

                e就是事件对象

            }

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

1-3 处理兼容性问题：

         odiv.onclick = function(e){

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

         }

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

   2-1 page 距离页面

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

  2-2 client 距离浏览器窗口

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

  2-3 offset 距离事件源

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

---

六、课堂例题

1、鼠标结合使用

 

运行效果： 

鼠标滑入第一个li ，P的色块跟随鼠标 

 鼠标滑入第二个li ，P的色块跟随鼠标 

  鼠标滑入第三个li ，P的色块跟随鼠标 

 

2、移入显示移出隐藏

 运行效果

 当鼠标划入按钮

 当鼠标移出按钮