javaScript----事件监听

事件监听

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

例如：用户在网页上单击一个按钮

什么是事件监听：

检测是否有事件发生，一旦有事件发生，就立即调用函数做出响应

例如：鼠标经过显示下拉菜单，用户点击按钮更换轮播图等

语法：

元素对象.addEventLister('事件类型'，要执行的函数)

事件监听三要素：

1、事件源：被事件触发的dom元素

2、事件类型：就是触发方式：click、mouseover等

3、执行函数：要做出什响应

<div>
        <button>点击</button>
    </div>
    <script>
        const btn=document.querySelector('button') //获取button元素

        btn.addEventListener('click',function(){       //为button元素添加事件监听，
            alert('hi')                            //事件类型为点击
        })                                         //响应为弹出窗口

    </script>

常见事件

1、鼠标事件

鼠标点击事件：addEventListener('click',function(){})

鼠标经过事件：addEventListener('mouseenter',function(){})

鼠标离开事件：addEventListener('mouseleave',function(){})

 <div>
        <button>点击</button>
    </div>

    <script>
        const btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log('点击事件触发');
        })

        btn.addEventListener('mouseenter',function(){
            console.log('鼠标经过事件触发');
        })

        btn.addEventListener('mouseleave',function(){
            console.log('鼠标离开事件触发')
            
        })
    </script>

2、表单事件

光标获得事件：addEventListener('focus',function(){})

光标失去事件：addEventListener('blur',function(){})

用户输入事件：addEventListener('input',function(){})

 <div>
        <input type="text">
    </div>
    <script>
        const ipt=document.querySelector('input')
        ipt.addEventListener('focus',function(){
            console.log('获得光标事件触发')
        })

        ipt.addEventListener('blur',function(){
            console.log('失去光标事件触发')
        })

        ipt.addEventListener('input',function(){
            console.log('用户输入事件触发')
        })
    </script>

3、 键盘事件

键盘按下事件：addEventListener('keydown',function(){})

键盘弹起事件：addEventListener('keyup',function(){})

<div>
        <input type="text">
    </div>
    <script>
        const ipt=document.querySelector('input')
         ipt.addEventListener('keydown',function(){
            console.log('键盘按下事件触发')
        })

        ipt.addEventListener('keyup',function(){
            console.log('键盘弹起事件触发')
        })
    </script>

事件对象

1、什么是事件对象：一个对象里面有事件触发时的信息

2、常见属性：事件对象中包含事件的许多属性

type:表示事件的类型

client/client:获取光标相对于浏览器左上角的位置

offsetX/offsetY:获取光标相对于DOM元素左上角的位置

key：用户按下的键盘值

3、表示： 在事件绑定的回调函数第一个参数就是事件对象

addEventListener('事件'，function(事件对象){})

<input type="text">
    <script>
       const ipt=document.querySelector('input')
       ipt.addEventListener('keyup',function(event){
       console.log(event.key)
       })
    </script>

环境对象

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

普通函数this:指向window

被调用函数this:指向调用者

<input type="text">
    <script>
        function fn(){
        console.log(this)      //普通函数this指向window
        }
        fn()
        
       const ipt=document.querySelector('input')
       ipt.addEventListener('keyup',function(){
       console.log(this)      //调用函数this指向input
       })
    </script>

回调函数

回调函数：当一个函数作为另一个函数的参数时为回调函数

  <script>
        function fn(){
        console.log('回调函数....')
            
        }
       

        setInterval(fn,1000) //fn作为setInterval()的参数
       
        
      
    </script>