zoukankan      html  css  js  c++  java
  • JS的事件对象

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

      (一)事件:

        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

  • 相关阅读:
    Python爬虫入门教程 59-100 python爬虫高级技术之验证码篇5-极验证识别技术之二
    CouchDB简介
    零成本打造抖音IP,轻松实现月入过万,90%的人都不懂
    couchdb集群搭建
    汽车测评详细操作流程,一篇赚300+
    基于docker部署的微服务架构: docker环境下的zookeeper和kafka部署
    零成本的互联网赚钱项目,都是怎么做的?
    SQuirrel连接hive配置
    本人有8万启动资金,做点什么生意好呢?
    PHP实现自己活了多少岁
  • 原文地址:https://www.cnblogs.com/liufuyuan/p/10394669.html
Copyright © 2011-2022 走看看