标签：function console log DOM 事件 addEventListener 函数

事件监听

概念

事件：事件是在编程时系统内发生的动作或者发生的事情

事件监听：是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件

使用

语法：元素对象.addEventListener('事件类型', 函数)

事件监听三要素：

• 事件源： 触发事件的元素
• 事件类型： 触发事件的动作/行为，比如鼠标单击 click、鼠标经过 mouseover 等
• 事件调用的函数： 要做什么事,执行代码

注意：

1. 事件类型要加引号
2. 函数是触发之后再去执行，每次触发都会执行一次
   • 函数写法1：function() {执行代码}
   • 函数写法2：函数名 注意：不加小括号，加小括号立即执行，这里是触发执行

<input type="button" value="点击">
  <script>

    // 获取元素
    const btn = document.querySelector('input')
    btn.addEventListener('click',function () {
      console.log('hellow~')
    })
  </script>

完成事件监听分成3个步骤：

1. 获取 DOM 元素
2. 通过 addEventListener 方法为 DOM 节点添加事件监听
3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型，事件触发后，相对应的回调函数会被执行

大白话描述：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

事件类型

鼠标事件

鼠标触发

1. click:单击事件,dblclick：双击事件
2. mouseenter:当鼠标移动到元素上时，发生此事件
3. mouseleave:当用户将鼠标指针移出元素时，发生此事件
4. mousemove:当指针在元素上方移动时，发生此事件。
5. mouseup:当用户在元素上释放鼠标按钮时，发生此事件。
6. mousedown:当用户在元素上按下鼠标按钮时，发生此事件。
7. mouseover:当鼠标移动到元素或其中的子元素上时，发生此事件
8. mouseout:当用户将鼠标指针移出元素或其中的子元素时，发生此事件

mouseover 和 mouseout 会有冒泡效果(子到父)

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

<div>
    <p>123</p>
  </div>

<script>
     const div = document.querySelector("div")

    //  监听事件
    // mouseenter
     div.addEventListener('mouseenter', function () {
       div.style.background = 'skyblue'
     })

     // mouseleave
     div.addEventListener('mouseleave', function () {
       div.style.background = 'pink'
     })

     // mousemove
     div.addEventListener('mousemove', function () {
      //  console.log( Math.random())
     })

     // mousedown
     div.addEventListener('mousedown', function () {
       console.log( 'mousedown')
     }) 

     // mouseup
     div.addEventListener('mouseup', function () {
       console.log('mouseup')
     }) 
     
     // mouseover
     div.addEventListener('mouseover', function () {
       div.style.background = 'blue'
     })

     // mouseout
     div.addEventListener('mouseout', function () {
       div.style.background = 'green'
     })
  </script>

焦点事件

表单获得光标

focus 获得焦点

blur 失去焦点

  <input type="text">
  <script>
    const input = document.querySelector('input')

    // focus:获得焦点
    input.addEventListener('focus',function () {
      input.style.background = 'red'
    })

    // blur：失去焦点
    input.addEventListener('blur',function () {
      input.style.background = 'green'
    })
  </script>

键盘事件

键盘触发

Keydown 键盘按下触发

Keyup 键盘抬起触发

  <script>
    document.addEventListener('mousedown',function () {
      console.log('mousedown 键盘按下')
    })

    document.addEventListener('mouseup',function () {
      console.log('mouseup 键盘抬起')
    })
  </script>

文本事件

表单输入触发

input 用户输入事件

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // input:文本事件
    input.addEventListener('input',function () {
      console.log(input.value)
    })
  </script>

事件对象

概念

事件对象：事件触发时产生的对象，这个对象里有事件触发时的相关信息

获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

事件对象常用属性

1. type：获取当前的事件类型
2. clientX/clientY获取光标相对于浏览器可见窗口左上角的位置
3. offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

<style>
    body {
      height: 3000px;
    }
  </style>

<script>
    // e:接收的是事件对象

    document.addEventListener('click', function (e) {
      // e.type:事件类型
      console.log(e.type)
      // clientX,clientY:鼠标相对于浏览器（可视窗口）左上角的位置
      console.log(e.clientX,e.clientY)
      // pageX,pageY:鼠标相对于文档左上角的位置
      console.log(e.pageX,e.pageY)
      // offsetX,offsetY:鼠标相对于当前DOM元素左上角的位置
      console.log(e.offsetX,e.offsetY)
    })

4. key：用户按下的键盘键的值

   现在不提倡使用keyCode

    document.addEventListener('keydown', function (e) {
      // key：用户按下的键盘键的值
       console.log(e.key)
      if ( e.key === 'q' ) {
        console.log('qqqq技能')
      }
      
      // 现在不提倡使用keyCode
      // ASCII
      console.log(e.keyCode)
    })

环境对象

概念

环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

this的指向:调用函数的元素

1. 函数的调用方式不同，this 指代的对象也不同，事件处理函数中的this，指代事件源
2. 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
3. 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<div>123</div>
  <p>段落</p>
  <script>
    const div = document.querySelector('div')
    const p = document.querySelector('p')

    // 事件处理函数中的this，代表事件源
    div.addEventListener('click', function () {
      console.log(this)
    })

    p.addEventListener('click', function () {
      console.log(this)
    })

    document.addEventListener('click', function () {
      console.log(this)
    })

  </script>

回调函数

概念

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数，函数B为高级函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

    function fn ( n ) {
      console.log(n)
    }

    function getNum() {
      console.log('aaa')
    }
    fn( 3 )
    fn('hellow')
    fn(getNum)

函数 getNum 做参数传给了 fn 函数,fn 就是所谓的回调函数了！！！

我们回顾一下间歇函数 setInterval

<script>
	function fn() {
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

<script>
  // 调用定时器，匿名函数做为参数
  setInterval(function () {
    console.log('我是回调函数...');
  }, 1000);
</script>

结论：

1. 回调函数本质还是函数，只不过把它当成参数使用
2. 使用匿名函数做为回调函数比较常见

函数分为

• 具名函数：function 函数名() {}

  调用函数：函数名()

• 匿名函数： function () {}

  匿名函数调用：

  1. 赋值给变量（函数表达式） const fn = function () {}
  2. 自调用函数/自执行函数/立即执行函数

​ ;(function () {}())

​ ;(function () {})()

标签：function,console,log,DOM,事件,addEventListener,函数
来源： https://www.cnblogs.com/yyshow/p/16268517.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。