头歌Web前端开发技术——JavaScript 事件处理-CSDN博客

本文链接：https://blog.csdn.net/fyjllll/article/details/147646570

第1关：注册事件处理程序

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

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

<!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" onclick="listenButton2()">按钮2</button>
    <button id="button3" onclick="listenButton3()">按钮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.addEventListener("button2",listenButton2);

        var button3 = document.getElementById("button3");
        button3.addEventListener("button3",listenButton3);

		/********** End **********/
    </script>
</body>
</html>

第2关：文档加载事件

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

在文档加载完成后（即文档加载事件发生后），在控制台输出Welcome!；

字符串放在英文双引号内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="loadEvent()">
    <script>
        function loadEvent() {
		//请在此处编写代码
		/********** Begin **********/
        
        console.log("Welcome!");
		/********** End **********/
        }       
    </script>
</body>
</html>

第3关：鼠标事件

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

第一步：通过id获取button（按钮）元素，赋给变量myButton；

第二步：通过addEventListener为按钮绑定一个事件处理程序，用来处理按钮的鼠标单击事件；

第三步：在事件处理程序中，通过id获取p元素，赋给变量myElement，然后设置当按钮被单击后，p里面的文本被改变为clicked；

字符串类型的参数用""包含在内；

请严格按照步骤操作。

<!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.addEventListener("click",function(){
                var myElement = document.getElementById("p");
                myElement.innerText="clicked";
            });
			/********** End **********/
        </script>
    </body>
</html>

第4关：键盘事件

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下，请按步骤操作：

获取用户按下的按键的编码，赋值给变量code；

判断code的值是否为13，是则在控制台打印cannot use enter。

<!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关：表单事件

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

通过id属性获取id为input的文本框，赋值给变量ele；

获取输入框中当前文本的长度，赋值给变量len；

判断len的值是否小于等于12，是则打印出too short input；

字符串参数务必置于双引号之内。

<!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关：拖动事件

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

在第一个Begin和End中间设置 id 为 p1 的 p 元素为可拖动的；

在第二个Begin和End中间使用event.target.innerText在控制台打印p元素里面的内容；

要求必须按照以上的步骤执行。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
        	<!-- 请在此处编写代码 -->
            <!---------Begin--------->
            <p id="p1" ondragstart="dragging(event)" draggable="true"></p>
            <!---------End--------->
        </div>
        <script>
            function dragging(event) {
			/********** Begin **********/
            console.log(event.target.innerText);
            
            
			/********** End **********/
            }
        </script>
    </body>
</html>

第7关：事件冒泡

编程要求
本关的编程任务是补全右侧代码片段中Begin至End中间的代码，具体要求如下：

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

<!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 **********/
        
            
			/********** End **********/
            console.log("parent");
            window.event?window.event.cancelBubble=true:event.stopPropagation();
        }
        function click3() {
            console.log("child");
        }
    </script>
</body>
</html>