JS学习笔记Day11

一、什么是事件对象(黑匣子)

  (一)事件:

    onclick

    ondblclick

  (二)当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象

    

二、如何获取事件对象

  (一)标准浏览器:给事件触发函数传递的第一个参数;

  (二)IE浏览器:全局对象的属性window.event;

  (三)兼容:evt = evt || window.event

        var e = evt ||window.event

三、如何获取鼠标的编码值

  (一)event.button

    标准浏览器:左键:0;滚轮键:1;右键:2

    IE9以下:左键:1;滚轮键:4;右键:2

    兼容:

    function getButton(evt){

      var e = evt || window.event;

      if(evt){

        return e.button;

      }else if(window.event){

        switch(e.button){

          case 1:return 0;

          case 2:return 1;

          case 3:return 2;

        }

      }

    }

四、如何获取鼠标的坐标值

  (一)相对坐标值:event.offsetX  event.offsetY;相对鼠标所在对象上的坐标值

  (二)绝对坐标值(页面坐标值):event.pageX  event.pageY;鼠标到页面的坐标值

  (三)可视区坐标值:event.clientX  event.clientY;鼠标到页面中可视区域的坐标值

  (四)屏幕坐标值:event.screenX  event.screenY;鼠标到电脑屏幕的坐标值

  思考:如何实现鼠标跟随效果

五、什么是事件流,什么是事件冒泡

  (一)事件流:指事件的流向,有三个阶段:事件捕获/事件目标/事件冒泡

  (二)事件捕获:由外而内,由祖先元素向子孙元素一次传递事件的过程

  (三)事件冒泡:由内而外,由子孙元素向祖先元素一次传递事件的过程

  注:浏览器默认开启的是事件冒泡,IE与欧朋浏览器不支持事件捕获

  (四)如何阻止事件冒泡

    1.标准浏览器:event.stopPropagation()

    2.IE:eventcancelBubble = true;

    兼容:event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

六、如何获取键盘的编码值

  (一)event.keyCode event.charCode event.which

     onkeydown/onkeyup : 监听是整个键盘.

     event.keyCode : 获取整个键盘的编码值,字母只获取大写的编码值.,

     onkeypress : 监听除功能键外的键盘值

  兼容 : event.keyCode || event.charCode || event.which

    火狐:

     event.keyCode : 0,

     event.charCode : 大小写字母的编码值,

     event.which : 大小写字母的编码值,

    谷歌:

     event.keyCode : 大小写字母的编码值,

     event.charCode : 大小写字母的编码值,

     event.which : 大小写字母的编码值,

七、如何设置组合键(快捷键)

  (一)event.ctrlKey

  (二)event.shiftKey

  (三)event.altKey

猜你喜欢

转载自www.cnblogs.com/liufuyuan/p/10394669.html