✊总有人要成为第一，为什么不是你。

2021年08月13日

工作重点

| | 3 | 下午讲鼠标事件，键盘事件等 | 已完成 |
- [x]

| | 4 | 晚上做了增删改查的练习 | 已完成 |
- [x]

|

遇到的问题和解决思路法

遇到的问题

1. 当输入框限制字数时

2. 
   

   解决思路

3. 不应该用maxlength，应该用输入框value的长度来做

4. 
   

   今日总结

   (1)事件

   
   
   
   改变
   

   (2)兼容问题

(3)表单事件

JavaScript-事件

1.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发—- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

1.2 事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。

*多学一招

事件对象的event作为函数参数的兼容性

box.onclick = function(e) {
    //获得event对象兼容性写法 
    e = e || window.event;
    var target = e.target || e.srcElement
    }

2. 事件的类型

2.1 表单事件

2.2 鼠标事件

注意：mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡

2.3 键盘事件

e.keyCode：获取输入键盘的键码，13回车

2.4 窗口事件

3. 注册事件处理程序

3.1 通过HTML标签属性注册事件处理程序

<button onclick="alert('Hello World')">点我</button>

3.2 通过DOM元素属性注册事件处理程序

<button id="mybutton">点我</button>
<script> 
    var mybutton = document.getElementById('mybutton');
    mybutton.onclick = function() { 

        alert('Hello World');

    };

    mybutton.onclick = function() { 

    alert('Hi');

    };
</script>

注意：通过上面这种方式添加事件，同一个类型的事件如果添加多次的话，只执行最后添加的事件。

3.3 使用addEventListener()方法注册事件处理程序

• addEventListener事件绑定、监听、捕获 —-》标准浏览器中有作用，非标准IE不兼容
• 语法：元素.addEventListener(事件名,函数,true/false) true代表事件捕获，false代表事件冒泡。
• 由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。

<button id="mybutton">点我</button>
<script>
    var mybutton = document.getElementById('mybutton');
        mybutton.addEventListener('click', function() { 
        alert('Hello World'); 
    }, false);
    mybutton.addEventListener('click', function() { 
        alert('Hi'); 
    }, false);
</script>

注意：同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。

4. 事件处理程序

事件就是用户或浏览器自身执行的某种动作。比如click、load和mouseover，都是事件的名字。而相应事件的函数就叫做事件处理程序（或事件侦听器）。

添加事件处理程序的方法有两种：

• 第一种：“on”加事件类型，如onclick、onload等；

var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
    alert("点击事件被触发了1");
}

注意：通过上面这种方式添加事件，同一个类型的事件如果添加多次的话，只执行最后添加的事件。

• 第二种是通过addEventListener()方法：

btn.addEventListener("dblclick", function(){
      alert("双击1");
});
btn.addEventListener("dblclick", function(){
      alert("双击2");
});

同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。

补充：浏览器兼容性的事件绑定

function addMyEvent(ele, type, handleFun) {
    // 标准浏览器的方法
    if (ele.addEventListener) {
        console.log(1);
        ele.addEventListener(type, handleFun);
        // IE浏览
    } else if (ele.attachEvent) {
        console.log(2);
        ele.attachEvent('on' + type, handleFun);
    } else {
        console.log(3);
        ele['on' + type] = handleFun;
    }
};

5. 事件的传递过程

JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段，和冒泡阶段。

1. 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

2. 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

3. 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

从图中我们可以知道

• 1、一个完整的JS事件流是从window开始，最后回到window的一个过程
• 2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程

var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];
console.log(div)
btn.onclick = function(){
     alert("点击事件被触发了1");    
}
div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}
div[1].onclick = function(){
      alert("div接受到了btn传递上来的事件了2");
}
window.onclick = function(){
      alert("window");
}

6. 事件冒泡

var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];
 console.log(div);
btn.onclick = function(){
     alert("点击事件被触发了1");                  
}
div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}
div[1].onclick = function(){
      alert("div接受到了btn传递上来的事件了2");
}
window.onclick = function(){
      alert("window");
}

自己总结

鼠标事件的总结

event

用event.target获取事件源

this

当以函数的形式调用时，this是window
当以方法的形式调用时，谁调用方法this就是谁
当以构造函数的形式调用时，this就是新创建的那个对象
事件处理程序中：this指向事件源

事件冒泡

事件的冒泡（Bubble）
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡