关于 JavaScript事件之鼠标跟随

JavaScript事件之鼠标跟随

事件三要素
1. 事件源: 绑定在谁身上的事件(和谁约定好)
2. 事件类型: 绑定一个什么事件
3. 事件处理函数: 当行为发生的时候, 要执行哪一个函数

1. 获取元素
   var box = document.querySelector(‘div’)

2. 给 div 绑定一个点击事件
   事件源: div
   事件类型: click(点击行为)
   事件处理函数: 准备一个函数, 在点击行为触发的时候执行

   on 是我们绑定事件的一种方式
   click 叫做事件类型
   当页面打开, 点击在 box 这个元素上的时候, 会执行后面的函数

 box.onclick = function () {
      // 当我执行的时候, box 元素身上的 click 行为被触发了
      console.log('我被点击了')
    }

常见的事件类型

1. 鼠标事件
   都是一些和鼠标相关的事件
   => click 点击事件
   => dblclick 双击事件
   => contextmenu 右键单击事件
   => mousedown 鼠标按下
   => mouseup 鼠标抬起
   => mousemove 鼠标移动
   => mouseover 鼠标移入
   => mouseout 鼠标移出
   => mouseenter 鼠标移入
   => mouseleave 鼠标移出

2. 键盘事件
   因为键盘事件, 没有办法确定我是在某一个元素上按下的键盘
   所以一般来说我们的键盘事件绑定在 表单元素 或者 document 上
   因为 表单元素 可以被选中, 有没有焦点
   因为 document 表示页面, 你在这个页面中和不再这个页面中
   => keydown 键盘按下
   => keyup 键盘抬起
   => keypress 键盘按下

3. 浏览器事件
   => load 加载完毕
   => resize 窗口改变
   => scroll 滚动条滚动

4. 表单事件
   专门给 form 标签和 input 标签 和 textarea 标签 和 select 标签 使用的
   => focus 聚焦事件
   => blur 失焦事件
   => change 改变事件
   => input 输入事件
   => submit 提交事件 (绑定给 form 标签)
   => reset 重置事件 (绑定给 form 标签)

5. 移动端触摸事件
   => touchstart 触摸开始(手放在屏幕上的时候)
   => touchmove 触摸移动(手在屏幕上移动)
   => touchend 触摸结束(手离开屏幕的时候)

6. 其他事件
   => transitionend 过渡动画结束 需要特殊的绑定方式
   => animationend 帧动画结束 需要特殊的绑定方式
   => selectstart 开始框选文本

1.鼠标事件

    // 点击事件
    // box.onclick = function () { console.log('点击事件触发') }

    // 双击事件(每一个双击事件都会触发两个单击行为)
    // box.ondblclick = function () { console.log('双击事件触发') }

    // 右键单击事件
    // box.oncontextmenu = function () { console.log('鼠标右键单击') }

    // 鼠标按下(当鼠标左键按下去的时候, 不需要抬起来就触发了)
    // box.onmousedown = function () { console.log('鼠标按下去了') }

    // 鼠标抬起
    // box.onmouseup = function () { console.log('鼠标抬起来了') }

    // 鼠标移动(只要鼠标在元素上移动, 就会触发)
    // box.onmousemove = function () { console.log('鼠标在移动呢') }

    // 鼠标移入(当光标从元素外面移动到元素里面的时候)
    // box.onmouseover = function () { console.log('鼠标移入元素') }

    // 鼠标移出(当光标从元素里面移动到元素外面的时候)
    // box.onmouseout = function () { console.log('鼠标移出元素') }

    // 鼠标移入
    // box.onmouseenter = function () { console.log('鼠标移入') }

    // 鼠标移出
    // box.onmouseleave = function () { console.log('鼠标移出') }

键盘事件

 // 键盘按下事件
    // inp.onkeydown = function () { console.log('键盘按下去了') }

    // 键盘抬起事件
    // inp.onkeyup = function () { console.log('键盘抬起来了') }

    // 键盘按下事件
    // inp.onkeypress = function () { console.log('键盘按下事件') }

表单事件

 // 聚焦事件
    // inp.onfocus = function () { console.log('文本框聚焦了') }

    // 失焦事件
    // inp.onblur = function () { console.log('文本框失焦了') }

    // 改变事件(当用户输入结束的时候, 只要和输入之前的不一样, 就会触发改变行为)
    //   失去焦点的时候表示我输入完毕了
    // inp.onchange = function () { console.log('文本框内容改变了') }

    // 输入事件(只要用户在文本框里面输入内容就触发)
    // inp.oninput = function () { console.log('你在输入内容') }

    // 表单提交事件(当点击 submit 的时候会触发)
    // 因为以点击 submit 按钮, 就会自动提交表单, 会刷新页面
    // 所以, 其实打印了, 但是我们看不到
    // 我先暂时加一个 return false, 为了看到内容
    // return false 的能力就是不让表单自动提交
    // form.onsubmit = function () {
    //   console.log('我要提交表单了')

    //   return false
    // }

    // 表单重置事件
    // 当你点击 reset 按钮的时候会触发, 绑定在 form 标签上
    // form.onreset = function () { console.log('表单重置了') }

其他事件

// document.onselectstart = function () {
    //   console.log('你要框选文本框, 请先付费')
    //   return false
    // }

事件对象

在每一个事件触发的时候都应该有一些描述性的信息
=> 触发的什么事件
=> 触发的哪一个元素身上的事件
=> 鼠标事件的时候, 光标坐标点时什么
=> 键盘事件的时候, 按下的时哪一个按键

当我们把这些信息放在一个 对象 里面的时候
我们管这个对象叫做 事件对象
事件对象: 就是一个保存了本次事件的描述信息的对象数据类型
当你触发事件的时候, 浏览器会帮我们记录好这些内容
你只要获取到事件对象, 去里面进行查看就可以了

当你绑定好一个事件的以后
当用户触发这个事件的时候
那么浏览器会帮我们把关于这个事件的所有信息都记录下来给到我们, 让我们使用

如何在事件里面获取事件对象
标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式
box.onclick = function (e) {}
e => 就是一个形参, 你可以写 event 或者 ev 或者 e
=> 会在事件触发的时候, 由 浏览器 给我们传递实参
=> 我们直接在事件处理函数里面使用 e 就可以了
=> 得到的就是事件对象(里面包含本次事件的一些描述信息)
=> 所有事件都有事件对象
IE 低版本 => 要使用 window.event 来获取
直接在事件处理函数里面使用 window.event 来获取
兼容方式
接收形参 e
在事件处理函数里面写 e = e || window.event
给形参 e 进行重新赋值
赋值的内容, 如果有实参, 就使用实参, 如果没有, 就使用 window.event

// document.onselectstart = function () {
    //   console.log('你要框选文本框, 请先付费')
    //   return false
    // }

小案例-鼠标跟随

代码片.

 <div class="icon">
    <img src="./angel.gif" alt="">
  </div>

  <script>
    /*
      案例 - 鼠标跟随

      思路:
        1. 绑定一个鼠标移入事件, 在移入事件里面让图片显示
          => 绑定给谁 ?
            因为移入 页面 就要显示, 所以绑定给 document

        2. 绑定一个鼠标移出事件, 在移出事件里面让图片消失
          => 绑定给谁 ?
            因为移出 页面 就要消失, 所以绑定给 document

        3. 绑定一个鼠标移动事件
          => 绑定给谁 ?
            因为在整个 页面 移动的时候, 都要跟着走
            所以绑定给 document

        4. 在移动事件里面进行光标的获取
          => 获取那一组光标 ?
            因为我们使用的 fixed 定位
            所以我们就获取相对于浏览器可视窗口的一组坐标
            clientX 和 clientY

        5. 获取到光标以后, 给小图片设置定位位置
          x 轴坐标设置给 left 属性的值
          y 轴坐标设置给 top 属性的值
    */

    // 0. 获取元素
    var icon = document.querySelector('.icon')

    // 1. 给 document 绑定一个移入事件
    document.onmouseover = function () {
      // 1-2. 让 icon 显示
      icon.style.display = 'block'
    }

    // 2. 给 document 绑定一个移出事件
    document.onmouseout = function () {
      // 2-2. 让 icon 消失
      icon.style.display = 'none'
    }

    // 3. 给 document 绑定一个移动事件
    document.onmousemove = function (e) {
      // 处理事件对象兼容
      e = e || window.event

      // 4. 获取相对于可视窗口的坐标
      var x = e.clientX
      var y = e.clientY

      // 5. 给 icon 元素赋值 left 属性和 top 属性
      icon.style.left = x + 'px'
      icon.style.top = y + 'px'
    }

CSS代码

代码片.

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 50px;
      height: 50px;
      /*
        要有一个定位, 使用什么定位
        因为要在整个可视窗口来出现
        使用 fixed

        如果使用 absolute, 还要确定一个定位父级
      */
      position: fixed;
      top: 0;
      left: 0;

      /* 默认隐藏, 移入 document 的时候显示, 移出 document 的时候隐藏 */
      display: none;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

  </style>

PS:如果想获取更多的知识视频，加QQ好友10398975免费送给大家。