JS-事件

JS-事件

什么是事件

事件是在编程时系统内发生的动作或者发生的事情
比如一个用户在网页上单击一个按钮

什么是事件监听

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

语法

元素.addEventListener(‘事件’，要执行的函数)

事件监听的三要素

1.事件源:哪个DOM元素被事件触发了,要获取DOM元素
2.事件:用什么方式触发,比如鼠标单击click,鼠标经过mouseover等
3.事件调用函数:要做什么事

注意

1.事件类型要加引号
2.函数是点击之后再去执行，每次点击都会执行一次
例如：

//获取元素
let btn=document.querySelector('button');
//注册事件
btn.addEventListener('click',function(){
    alert('被点击了');
})

常见事件类型

鼠标事件

鼠标触发:
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件

表单获取光标:
focus 获取焦点
blur 失去焦点

键盘事件

键盘触发:
keydown 键盘按下触发
keyup 键盘抬起触发

文本事件

表单输入触发:
input 用户输入事件

微博输入案例

<div class="w">
        <div class="controls">
            <textarea placeholder="说点什么吧" id="area" cols="30" rows="10"
            maxlength="200"></textarea>
            <div>
                <span class="useCount">
                    0
                </span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>
        </div>
</div>

通过事件来监听输入的内字符个数

        //获取元素
        let area=document.querySelector('#area');
        let useCount=document.querySelector('.useCount');
        //注册事件
        area.addEventListener('input',function(){
            //获取文本字符长度
            useCount.innerHTML=area.value.length;
        })

购物车加减案例

<div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" id="add" value="+" >
    <input type="button" id="reduce" value="-" disabled>
</div>

通过事件监听来进行加减

//获取
    let total=document.querySelector('#total');
    let add=document.querySelector('#add');
    let reduce=document.querySelector('#reduce');
    //监听加减号
    add.addEventListener('click',function(){
        total.value++
        reduce.disabled= false
    })
    reduce.addEventListener('click',function(){
        total.value--
        if(total.value<=0){
            reduce.disabled= true
        }
    })

高阶函数

高阶函数可以被简单地理解为函数的高级应用，JavaScript中函数可以被当成 值 来对待，基于这个特性实现函数的高级应用
值 就是JavaScript中的数据，比如值、字符串、布尔、对象等

函数表达式

let fun=function(x,y){
    return x+y
}
let result=fun(1,2)
console.log(result)

回调函数

如果将函数A作为参数传递给函数B时，我们成函数A为回调函数
简单理解:当一个函数当作参数来传递给另外一个函数的时候,这个函数就是回调函数

常见的应用场景

function fun(){
    console.log("我是一个回调函数")
}
//setIntervalue(function(){},时间) 间歇函数
setIntervalue(fn,1000)

环境对象

环境对象指的是函数内部特殊的变量this，他代表着当前函数运行时所处的环境
作用:弄清楚this的指向，可以让我们的代码更加简洁

首先了解一下函数内部的this指向谁

function fun(){
    console.log(this);
}
fun();

因此我们可以了解到 环境对象 this 他就是一个对象

this指向问题

1.函数的调用方式不同，this指向的对象也不同
2.[谁调用，this就是谁] 是判断的 this 指向的粗略规则

例如通过点击按钮来确定this指向

<button>点击</button>
    <script>
        let btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            console.log(this);
        })
    </script>