《javascript基础》学习笔记 六

---

前言

学习地址：https://www.bilibili.com/video/BV1ZE411c7yM?p=67

一、事件介绍

1、事件简介

事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript是以事件驱动为核心的一门语言。JavaScript与HTML之间的交互是通过事件实现的。

事件的三要素

事件的三要素:事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是∶手。事件是∶按开关。事件驱动程序是∶灯开了或者关了。
再比如，网页上弹出一个广告，我点击右上角的x，广告就关闭了。这件事情里，事件源是:x。事件是：onclick。事件驱动程序是:广告关闭了。

于是我们可以总结出︰谁引发的后续事件，谁就是事件源。

总结如下:
● 事件源:引发后续事件的html标签。
● 事件:js已经定义好了（见下图）。
● 事件驱动程序:对样式和html的操作。也就是DOM.

也就是说，我们可以在时间对应的属性中写一些is代码，当事件被触发时，这些代码将会执行。

代码书写步骤如下∶（重要）
● (1 ）获取事件源:document.getElementByld("box");//类似于Android里面的findViewByld 也可以document.querySelector("#box")
● (2）绑定事件:事件源box.事件onclick = function(){事件驱动程序};
● (3）书写事件驱动程序:关于DOM的操作。

代码举例：

<style>
        #d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>

</div>

<button type="button">点击改变颜色</button>

<script>
    var btn =document.querySelector("button")
    console.log([btn])
    btn.onclick = function(event){
        //浏览器在事件函数调用的时候，都会默认传入一个事件对象，该对象包含了此次事件的详细信息
        console.log(event)
        var d1 = document.querySelector("#d1")
        if( d1.style.backgroundColor == "black"){
        d1.style.backgroundColor = "aqua";
      }else{	
        d1.style.backgroundColor = "black";
      }
    }
</script>

打印结果：

点击按钮 颜色来回切换 此次事件的详细信息

常见的事件如下：

第二种绑定事件的方式（不建议使用）

.......
<button type="button"  onclick="changeColor">点击改变颜色</button>
    
   .......
   function changeColor(){
        var d1 = document.querySelector("#d1")
        if( d1.style.backgroundColor == "black"){
        d1.style.backgroundColor = "aqua";
      }else{	
        d1.style.backgroundColor = "black";
      }
    }

2、按键事件

   <input type="text" name="username" id="username" value = ""/>
    <script>
        var inputDom = document.querySelector("#username");
        //键盘按下事件
        inputDom.onkeydown = function(event){
              console.log(event)
        }
       
        //键盘按下事件
        inputDom.onkeypress = function(){
        console.log(event)
        }
      
        //键盘弹起事件
        inputDom.onkeyup = function(){
        console.log(event)
       }
      
         </script>

onkeydown 事件会在用户按下一个键盘按键时发生。
onkeypress 事件会在键盘按键被按下并释放一个键时发生。
onkeyup 事件会在键盘按键被松开时发生。

打印结果：
按下了"a"键和Ctrl键的结果

3、鼠标事件

<input type="text" name="username" id="username" value=""/>
    <select name="city" id="">
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="beijing">北京</option>
        <option value="hangzhou">杭州</option>
    </select>
<script >
var inputDom = document.querySelector( "#username" );
//获取焦点事件
inputDom.onfocus = function(e){
   console.log(e)
}
//失去焦点事件
inputDom.onblur = function(e){
   console.log(e)
}

//输入选项内容的改变
var selectDom = document.querySelector( "select" );
selectDom.onchange = function(event){
     console.log(event)
}
</script>

打印结果：

//鼠标移入事件
var d1 = document.querySelector( "#d1");
d1.onmouseenter = function(e){
console.log(e)
d1.style.backgroundColor = "purple"
}//结果：当鼠标移入目标元素时，会在控制台显示此事件的详细内容

//鼠标移出事件
d1.onmouseleave = function(e){
console.log(e)
d1.style.backgroundColor = "skyblue"
}//结果：当鼠标移出目标元素时，会在控制台显示此事件的详细内容

//鼠标在元素上移动事件
d1.onmousemove = function(e){
console.log(e)
}//结果：当鼠标在目标元素上移动时，会在控制台显示多个此事件的详细内容