JavaScript学习手册十五：事件处理

忘是亡心i 2023-01-16 06:47 209阅读 0赞

### 事件处理 ###

*  1.注册事件处理程序
 *   *  任务描述
     *  相关知识
     *   *  (1)为JavaScript对象设置一个函数
         *  (2)设置HTML标签属性的值为事件处理程序
         *  (3)调用addEventListener()函数
         *  代码文件
 *  2.文档加载事件
 *   *  任务描述
     *  相关知识
     *   *  文档加载事件
         *  代码文件
 *  3.鼠标事件
 *   *  任务描述
     *  相关知识
     *   *  (1)常见的鼠标事件
         *  (2)鼠标的按下和释放
         *  代码文件
 *  4.键盘事件
 *   *  任务描述
     *  相关知识
     *   *  （1）点击按键
         *  （2）按下按键
         *  （3）释放按键
         *  代码文件
 *  5.表单事件
 *   *  任务描述
     *  相关知识
     *   *  （1）change事件
         *  （2）select事件
         *  （3）submit事件
         *  代码文件
 *  6.拖动事件
 *   *  任务描述
     *  相关知识
     *   *  （1）元素的拖放
         *  (2)ondrag
         *  (3)ondragstart
         *  代码文件
 *  7.事件冒泡
 *   *  任务描述
     *  相关知识
     *   *  (1)文档树
         *  (2)事件冒泡
         *  (3)事件冒泡的控制
         *  代码文件

# 1.注册事件处理程序 #

## 任务描述 ##

1.本关任务：**为指定的事件注册事件处理程序**。

2.具体要求如下：

*  通过getElementById()获取id为button2的按钮，赋值给变量button2，然后使用button2.onclick()方法为该按钮绑定事件处理程序listenButton2()；
 *  通过getElementById()获取id为button3的按钮，赋值给变量button3，然后使用button3.addEventListener()方法为该按钮绑定click事件的事件处理程序listenButton3()。

## 相关知识 ##

*  页面上的每一个元素，会发生几种不同的事件，比如表单元素，可能会发生提交事件，也可能发生重置事件，我们需要为每一个事件绑定一个事件处理程序，也叫为事件注册事件处理程序。
 *  下面是三种注册事件处理程序的方法。

### (1)为JavaScript对象设置一个函数 ###

*  页面上的元素对应一个`JavaScript`对象，元素的每一个事件对应对象的一个属性，比如：

<form id="myForm"></form>
    var myForm = document.getElementById("myForm");

*  myForm对应页面中id值为myForm的表单，
 *  myForm.onsubmit对应表单提交事件，
 *  myForm.onreset对应表单重置事件。

通过为这些属性设置一个函数类型的值，实现事件处理程序的注册：

//为表单提交事件注册处理程序
    myForm.onsubmit = function() { 
        console.log("表单提交的事件处理程序");
    }
    //为表单重置事件注册处理程序
    myForm.onreset = function() { 
        console.log("表单重置的事件处理程序");
    }

### (2)设置HTML标签属性的值为事件处理程序 ###

比如，设置form标签的`onsubmit`属性的值为事件处理程序：

<form onsubmit="submitForm()"></form>
    function submitForm() { 
        console.log("表单提交的事件处理程序");
    }

这样提交表单时，就会触发`submitForm()`函数。

### (3)调用addEventListener()函数 ###

*  页面元素对应的JS对象，通过调用`addEventListener()`函数也可以注册事件处理程序，函数的第一个参数是事件的类型，第二个参数是事件处理程序：

<form id="myForm"></form>
    var myForm = document.getElementById("myForm");
    myForm.addEventListener("submit",function() { 
        console.log("表单提交中");
    });

submit表示这是一个表单提交事件，后面的匿名函数即表单提交的事件处理程序。

### 代码文件 ###

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button id="button1" onclick="listenButton1()">按钮1</button>
        <button id="button2">按钮2</button>
        <button id="button3">按钮3</button>
        <script>
            function listenButton1() { 
                console.log("监听button1");
            }
            function listenButton2() { 
                console.log("监听button2");
            }
            function listenButton3() { 
                console.log("监听button3");
            }
    		//请在此处编写代码
    		/********** Begin **********/
            var button2 = document.getElementById("button2");
            button2.onclick = function(){ 
                listenButton2();
            }
            var button3 = document.getElementById("button3");
            button3.addEventListener("click",function(){ 
                listenButton3();
            });
    		/********** End **********/
        </script>
    </body>
    </html>

# 2.文档加载事件 #

## 任务描述 ##

1.本关任务：**处理文档加载事件**。

2.具体要求如下：

*  在文档加载完成后（即文档加载事件发生后），在控制台输出Welcome!；
 *  字符串放在英文双引号内。

## 相关知识 ##

文档，指的是**网页上的所有元素构成的一种格式化文本**。文档加载事件指浏览器从服务器下载并渲染完文档后发生的事件。

文档加载事件名字为`load`。

### 文档加载事件 ###

1.  当文档加载完成后，就会触发文档加载事件监听程序（即上一关所说的事件处理程序），一般我们会在这个时候监测用户浏览器的类型、版本，从而加载不同的脚本。
2.  在大多数情况下，文档记载事件绑定在body元素上，表示网页主体加载完成后触发该事件，也有少数情况下绑定在image等元素上，表示相关的元素加载完成后触发该事件。
3.  文档加载完成后监测用户的浏览器类型并在控制台打印：

<body onload="detectBrowser()"></body>
    function detectBrowser(){ 
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent.indexOf("Opera") > -1) { //判断是否是Opera浏览器
            console.log("Opera");
        };
        if (userAgent.indexOf("Firefox") > -1) {  //判断是否是Firefox浏览器
            console.log("Firefox");
        }
        if (userAgent.indexOf("Chrome") > -1) {  //判断是否是Chrome浏览器
            console.log("Chrome");
        }
        if (userAgent.indexOf("Safari") > -1) { //判断是否是Safari浏览器
            console.log("Safari");
        }
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) { 
            console.log("IE");
        };
    }

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body onload="loadEvent()">
        <script>
            function loadEvent() { 
    		//请在此处编写代码
    		/********** Begin **********/
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            if (userAgent) { //判断是否是Opera浏览器
                console.log("Welcome!");
            };
            
    		/********** End **********/
            }       
        </script>
    </body>
    </html>

# 3.鼠标事件 #

## 任务描述 ##

1.本关任务：**练习鼠标事件的处理**。  
2.具体要求如下：

*  第一步：通过id获取button（按钮）元素，赋给变量myButton；
 *  第二步：通过addEventListener为按钮绑定一个事件处理程序，用来处理按钮的鼠标单击事件；
 *  第三步：在事件处理程序中，通过id获取p元素，赋给变量myElement，然后设置当按钮被单击后，p里面的文本被改变为clicked；
 *  字符串类型的参数用""包含在内；

## 相关知识 ##

鼠标是计算机最常见的外设之一，鼠标事件指用户操作鼠标的过程中触发的事件。

### (1)常见的鼠标事件 ###

*  说到鼠标事件，最常见的无非是鼠标单击事件click，很多按钮都会绑定一个`onclick()`函数，表示当用户单击鼠标后会执行的函数。其实还有很多鼠标事件，比如双击鼠标、按下鼠标等，下面是一个总结：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]
 *  为页面上的某一个元素绑定一个鼠标事件，当用户在该元素上用鼠标执行了指定的动作后，就会触发指定的鼠标事件处理程序，开始执行函数。

### (2)鼠标的按下和释放 ###

*  `mousedowm`表示鼠标按下的事件，
 *  `onmousedown`是用户按下鼠标后会触发的事件处理程序；
 *  `mouseup`表示鼠标按键释放的事件，
 *  `onmouseup`表示用户释放鼠标按键后会触发的事件处理函数。

下面是一个例子，页面上有一行文字“点我”，用户在文字上按下鼠标按键后，文字会变成“鼠标已经按下”，而用户释放鼠标后，文字会变成“鼠标已经释放”。

html代码如下：

页面的效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
事件处理函数的代码如下：

function downfunc() { 
        document.getElementById("p").innerText = "鼠标已经按下";
    }
    function upfunc() { 
        document.getElementById("p").innerText = "鼠标已经释放";
    }

用户在文字上面先按下鼠标，再释放鼠标，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
【我只是截了一个图】

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <p id="p">
                text
            </p>
            <button id="but">
                button
            </button>
            <script>
    			//请在此处编写代码
    			/********** Begin **********/
                var myButton = document.getElementById("but");
                myButton.onclick = function(){ 
                    var myElement = document.getElementById("p");
                    myElement.innerText = "clicked";
                }
                
    			/********** End **********/
            </script>
        </body>
    </html>

# 4.键盘事件 #

## 任务描述 ##

1.本关任务：**利用键盘事件判断用户在网页上是否使用了回车键。**

2.具体要求如下，请按步骤操作：

*  获取用户按下的按键的编码，赋值给变量`code`；
 *  判断code的值是否为13，是则在控制台打印cannot use enter。

## 相关知识 ##

键盘事件，是指**用户敲击键盘上的按键所代表的事件。**

键盘事件有三种：

1.  按键按下：keydown，用户按下键盘上的键；
2.  按键释放：keyup，用户释放按键；
3.  点击按键：keypress，用户按下并且释放了按键。

### （1）点击按键 ###

*  `keypress`表示用户点击某个按键的事件，该事件会触发`onkeypress()`事件处理程序，`onkeypress()`有一个`event`参数，其中`event.which`表示点击的按键的编码。这个编码是该按键的unicode编码。
 *  需要注意的是，按下键盘上的A时，keyCode值是a的编码，只有同时按下shift和A，keyCode的值才是A的编码。

下面是一个例子，当用户点击键盘上的按键时，会打印出该按键的编码值：

<body onkeypress="keyEvent(event)">
        <p>
            keypress event
        </p>
    </body>
    <script>
        function keyEvent(event) { 
            console.log("编码是:"+event.which);
        }
    </script>

比如我们按下B时，控制台如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]  
同时按下B和shift，控制台如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]

### （2）按下按键 ###

keydown表示用户按下按键，同上面一样，它也有一个event.which表示按下的按键的编码。

<body onkeydown="downEvent(event)">
    </body>
    <script>
        function downEvent(event) { 
            console.log("编码是:"+event.which);
        }
    </script>

如果你按下按键后没有释放，控制台将会一直进行打印，比如按下的是1，控制台的打印结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]  
灰色的数字20表示这条信息已经打印了20次。

### （3）释放按键 ###

`keyup`表示用户释放按键，可以有一个参数`event`，`event.which`表示释放的按键的编码。

<body onkeyup="upEvent(event)">
    </body>
    <script>
        function upEvent(event) { 
            console.log("编码是:"+event.which);
        }
    </script>

比如，当用户按下1时，控制台没有输出，释放1后，控制台输出如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body onkeypress="pressEvent(event)">
            <script>
            	function pressEvent(event) { 
    				//请在此处编写代码
    				/********** Begin **********/
                    var code = event.which;
                    if(code==13){ 
                        console.log("cannot use enter");
                    }
                    
                    
    				/********** End **********/
        		}          
            </script>
        </body>
    </html>

# 5.表单事件 #

## 任务描述 ##

1.本关任务：**使用change事件检验用户的输入**。

2.具体要求如下：

*  通过id属性获取id为input的文本框，赋值给变量ele；
 *  获取输入框中当前文本的长度，赋值给变量len；
 *  判断len的值是否小于等于12，是则打印出too short input；
 *  字符串参数务必置于双引号之内。

## 相关知识 ##

1.  表单，即form，是页面最基本的元素之一，通常，用户的输入会放置在表单里面，然后提交给后台。
2.  form有很多子元素，分别表示不同类型的用户输入：例如input表示文本等类型；select表示下拉列表；button表示按钮。
3.  这些子元素可以被绑定一些事件，比如change表示用户的输入发生了改变。这些事件是表单元素特有的。

### （1）change事件 ###

*  change事件表示当前元素失去焦点并且元素的内容发生了改变。失去焦点，指光标不在该元素上，比如光标本来在文本输入框里面，当用户在页面的其他地方点击了鼠标，文本框就会失去焦点。

下面是一个例子：当用户输入文本，并且鼠标点击页面上的其他地方后，我们将在控制台打印出用户的输入。

<body>
        <form>
            <input id="t1" type="text" onchange="changeEve()"/>
        </form>
        <script>
            function changeEve() { 
                var e = document.getElementById("t1");
                console.log(e.value);
            }
        </script>
    </body>

比如当用户输入`I changed`后，在页面的其他地方点击鼠标，控制台如下：

### （2）select事件 ###

*  select事件：文本框中的文本被用户选中时发生。
 *  只能作用在`<input type="text">`的文本框里面，可以用`window.getSelection().toString()`获取选择的文本。

下面的例子：当用户选择了一段文本后，我们在控制台打印出用户选择的文本：

<body>
        <input type="text" value="赵钱孙李，周吴郑王" onselect="selectEve()"/>
        <script>
            function selectEve() {  
                console.log(window.getSelection().toString());
            }
        </script>
    </body>

比如我们选择了郑王，然后松开鼠标，控制台的输出如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]

### （3）submit事件 ###

表单的提交事件。

*  表单里面包含了用户输入的信息，最终要传到后台的服务器进行处理，这样就有一个表单的提交过程，submit即表单提交事件。
 *  通常情况下，在submit的事件处理函数中，校验用户的输入是否符合要求，比如密码的长度够不够。

下面的例子，用户提交表单时，用js校验用户输入的密码长度是否达到6位。

<body>
        <form onsubmit="subEve()">
            <input type="password" id="pw"/>
            <input type="submit" value="提交" />
        </form>
        <script>
        function subEve() { 
            var content = document.getElementById("pw").value;
            if (content.length < 6) { 
                window.alert("密码不可以小于6位");
            }
        }
        </script>
    </body>

这时，用户在密码输入框输入123，点击提交，页面会弹出一个警告框如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    	<head>
        	<meta charset="UTF-8">
        	<title>Title</title>
    	</head>
    	<body>
        	<form>
            	<input id="input" type="text" onchange="changeEvent()" />
    			<input id="input2" type="text"  />
        	</form>
        	<script>
        		function changeEvent() { 
    			//请在此处编写代码
    			/********** Begin **********/
                var ele = document.getElementById("input").value;
                var len = ele.length;
                if (len <= 12) { 
                    console.log("too short input");
                }
    			/********** End **********/
        		}
        	</script>
    	</body>
    </html>

# 6.拖动事件 #

## 任务描述 ##

1.本关任务：**学习处理拖动事件**。

2.具体要求如下：

*  在第一个Begin和End中间设置p元素为可拖动的；
 *  在第二个Begin和End中间使用`event.target.innerText`在控制台打印p元素里面的内容；

## 相关知识 ##

### （1）元素的拖放 ###

鼠标指向元素，按下鼠标，然后移动鼠标到另一个地方释放，即拖动元素。

*  相比html4以及之前的版本，html5增加了一个全新的属性draggable，表示元素是否支持拖动，默认的情况下，图片和超链接元素是支持拖动的，其他元素不支持。

将元素的`draggable属性设置为true，即表示元素支持拖动。`如：下面设置了p元素支持拖动：

<p id="p1" draggable="true">
        元素支持鼠标的拖动
    </p>

也可以用下面的JavaScript代码设置p为可拖动的：

document.getElementById("p1").draggable = true;

### (2)ondrag ###

*  `ondrag()`是元素正在拖动时触发的事件处理程序。如果元素一直在拖动的过程中，ondrag()会每隔350ms被触发一次，比如，在下面的例子中，我们一直在拖动p元素，控制台会一直打印拖动的信息：

<body>
        <div>
            <p ondrag="dragging(event)" draggable="true">拖动我!</p>
        </div>
        <script>
        function dragging(event) { 
            console.log("正在拖动");
        }
        </script>
    </body>

拖动不放下，控制台如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]  
111表示这条信息已经打印了111次。

### (3)ondragstart ###

用户开始拖动元素时触发，可以带有一个event参数，其中的`event.target`表示拖动的元素，比如，下面的例子中，用户开始拖动元素时，触发了`ondragstart`程序，我们尝试打印一下event.target的内容：

<body>
        <p ondragstart="dragStart(event)"  draggable="true">拖动我!</p>
        <script>
            function dragStart(event) { 
                console.log(event.target);
                console.log("你要拖动的文本的内容是："+event.target.innerText);
            }
        </script>
    </body>

拖动文本，效果如下：  
![在这里插入图片描述][20210424202703781.png]  
第一行是要拖动的文本元素，第二行显示了文本里面的内容。

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div>
            	
                
                <p ondrag="dragging(event)" id="p1" draggable="true">drag me</p>
                
            </div>
            <script>
                function dragging(event) { 
    			/********** Begin **********/
                
                console.log(event.target.innerText);
            }
                
                
    			/********** End **********/
                }
            </script>
        </body>
    </html>

# 7.事件冒泡 #

## 任务描述 ##

1.本关任务：**阻止事件冒泡的发生**。

2.具体要求如下：

*  在id为div2的元素上面阻止click事件的冒泡。

## 相关知识 ##

### (1)文档树 ###

在前面的学习中，我们说过，文档元素之间有层次关系，比如：

<body>
        <div onclick="clickParent()">
            <p onclick="clickChild()">点我</p>
            <p id="p">content</p>
        </div>
        <script>
            function clickChild() { 
                   console.log("子");
            }
            function clickParent() { 
                   console.log("父");
            }
    </script>
    </body>

对应这样一个模型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]  
其中，箭头的方向是子节点的方向，而反过来则是父节点的方向。比如，两个p元素的父节点（父元素）都是div元素。

### (2)事件冒泡 ###

*  在上面的例子中，点击p元素里面的内容，显然会触发p元素的事件处理程序clickChild。然后，因为p元素是放在div里面的，点击p元素相当于点击了div元素，会触发div的事件处理程序clickParent，这个过程被称为事件冒泡。
 *  `事件冒泡`是指，某个事件触发了某个元素的事件处理程序，接下来，就会自动沿着节点树往根节点的方向依次触发经过的路径上的所有元素的某个事件的处理程序。

比如上面的例子中，用鼠标点击p标签里面的文字点我，控制台的打印结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 11]  
第一行是子元素的click事件的事件处理程序的输出，第二行是父元素的，这里有一个先后的顺序，即从子元素一直到根节点。

### (3)事件冒泡的控制 ###

事件冒泡不是所有的时候都受到欢迎，有的时候需要控制它的发生，使用`event.stopPropagation()`即可。

比如，对于上面的例子，我们在子元素的事件处理程序clickChild()的最后一行添加一行代码：

function clickChild() { 
       console.log("子");
       window.event?window.event.cancelBubble=true:event.stopPropagation(); 
    }

这个时候再次点击p里面的内容，控制台的输出如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 12]  
可以看出，事件没有冒泡到父元素上面。所以，想要在哪里停止事件的冒泡，就在它的子元素的事件处理程序的最后调用event.stopPropagation()即可。

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="div1" onclick="click1()">
            <div id="div2" onclick="click2()">
                <p id="p" onclick="click3()">click me!</p>
            </div>
        </div>
        <script>
            function click1() { 
                console.log("root");
            }
            function click2() { 
    			//请在此处编写代码
    			/********** Begin **********/
                
                event.stopPropagation();
                
    			/********** End **********/
                console.log("parent");
            }
            function click3() { 
                console.log("child");
            }
        </script>
    </body>
    </html>

> 【小白今天吃了冒菜，蹭了室友的油条，(●’◡’●)，真好吃，吼吼吼吼~晚上又蹭了室友的菠萝，可甜可甜了，就是贵了点，不然我也想整一个了，偷偷告诉你们（四块钱一斤呢，一块单卖4元钱，/(ㄒoㄒ)/）】
> 
> > 句子君：
> 
> “看到路上尽情歌唱的，在路口弹着吉他的青年，感受到的是对梦想和远方的呼唤，在狭长的胡同小巷，看到的是生活的不易却乐观待人，面对起落却能够每天燃起新的希望，迎接新的挑战，因为还可以为想成为的人，想做的事而奋斗，甘之如饴。”

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/9aeb99291eb44c56805ac57208802ec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/6dcc6b26f82e41d49ad27aa2812257e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/8244048f210f49ce971b374d47caae22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20221022/f2a00039cb7c4581a3b8fe75b7d18bc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20221022/1b5b6beda43d44d6874a29debafef322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20221022/93452c640c454d05a37fa22fbd8d8b6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20221022/a232cc06cb7545dd8951005368ec343b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: /images/20221022/3209e22da9f946e89e80133b75f8de2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]: /images/20221022/9b4a805efffc403eb3f257207b00ea3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]: /images/20221022/e0cc920c605e4d9faac1a18782e9ef02.png
[20210424202703781.png]: /images/20221022/b18d901c993d459aadf1d4524e5546fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]: /images/20221022/29ff04720ba84796af8a4e14f5b6710c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 11]: /images/20221022/837a077bb0c44f768101a62bc35a0c4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 12]: /images/20221022/e86ba46e6b8244788751bb7d605a804d.png