整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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

任务描述

本关任务:为指定的事件注册事件处理程序。

相关知识

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

下面是三种注册事件处理程序的方法。

为对象设置一个函数

页面上的元素对应一个对象,元素的每一个事件对应对象的一个属性,比如:

var myForm = document.getElementById("myForm"); myForm对应页面中id值为myForm的表单,myForm.onsubmit对应表单提交事件,myForm.onreset对应表单重置事件。通过为这些属性设置一个函数类型的值,实现事件处理程序的注册: //为表单提交事件注册处理程序 myForm.onsubmit = function() { console.log("表单提交的事件处理程序"); } //为表单重置事件注册处理程序 myForm.onreset = function() { console.log("表单重置的事件处理程序"); }

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

比如,设置form标签的属性的值为事件处理程序:

function submitForm() { console.log("表单提交的事件处理程序"); }

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

调用()函数

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

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

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

编程要求

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

通过()获取id为button2的按钮,赋值给变量button2,然后使用button2.onclick()方法为该按钮绑定事件处理程序();

通过()获取id为button3的按钮,赋值给变量button3,然后使用button3.()方法为该按钮绑定click事件的事件处理程序()。

测试说明

测试过程:

平台将读取用户补全后的.html;

执行其中的代码,检测click事件是否注册了指定的处理程序;

成功输出button2按钮设置事件处理成功,button3按钮设置事件处理成功,否则输出button2按钮设置事件处理失败,button3按钮设置事件处理失败。

以下是测试样例:

测试输入:

无测试输入

预期输出:

button2按钮设置事件处理成功,button3按钮设置事件处理成功

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考代码:


<html lang="zh">

    
    Title


    
    
    
    <script>
        function listenButton1() {
            console.log("监听button1");
        }
        function listenButton2() {
            console.log("监听button2");
        }
        function listenButton3() {
            console.log("监听button3");
        }
		//请在此处编写代码
		/********** Begin **********/
        var button2 =document.getElementById("button2");
        button2.onclick=listenButton2;
        var button3 =document.getElementById("button3");
        button3.addEventListener("click",listenButton3);
		/********** End **********/
    </script>


第2关:文档加载事件

任务描述

本关任务:处理文档加载事件。

相关知识

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

文档加载事件名字为load。

文档加载事件

当文档加载完成后,就会触发文档加载事件监听程序(即上一关所说的事件处理程序),一般我们会在这个时候监测用户浏览器的类型、版本,从而加载不同的脚本。

在大多数情况下,文档记载事件绑定在body元素上,表示网页主体加载完成后触发该事件,也有少数情况下绑定在image等元素上,表示相关的元素加载完成后触发该事件。

文档加载完成后监测用户的浏览器类型并在控制台打印:


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");
    };
}

编程要求

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

在文档加载完成后(即文档加载事件发生后),在控制台输出Welcome!;

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

测试说明

测试过程:

平台将读取用户补全后的OnLoad.html;

执行其中的代码,检测当文档加载完成后,是否在控制台输出Welcome!;

成功输出文档加载事件处理成功,否则输出文档加载事件处理失败。

以下是测试样例:

测试输入:

无测试输入

预期输出:

文档加载事件处理成功

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考代码:




    
    Title


    <script>
        function loadEvent() {
		//请在此处编写代码
		/********** Begin **********/
        var userAgent =navigator.userAgent;
        if(userAgent){
            console.log("Welcome!")
        }
        
		/********** End **********/
        }       
    </script>


第3关:鼠标事件

任务描述

本关任务:练习鼠标事件的处理。

相关知识

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

常见的鼠标事件

说到鼠标事件,最常见的无非是鼠标单击事件click,很多按钮都会绑定一个onclick()函数,表示当用户单击鼠标后会执行的函数。其实还有很多鼠标事件,比如双击鼠标、按下鼠标等,下面是一个总结:

在这里插入图片描述

为页面上的某一个元素绑定一个鼠标事件,当用户在该元素上用鼠标执行了指定的动作后,就会触发指定的鼠标事件处理程序,开始执行函数。

鼠标的按下和释放

表示鼠标按下的事件,是用户按下鼠标后会触发的事件处理程序;mouseup表示鼠标按键释放的事件,表示用户释放鼠标按键后会触发的事件处理函数。

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

html代码如下:


    

点我

页面的效果如下:

在这里插入图片描述

事件处理函数的代码如下:

() {

.(“p”). = “鼠标已经按下”;

upfunc() {

.(“p”). = “鼠标已经释放”;

用户在文字上面先按下鼠标,再释放鼠标,效果如下:

在这里插入图片描述

编程要求

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

第一步:通过id获取button(按钮)元素,赋给变量;

第二步:通过为按钮绑定一个事件处理程序,用来处理按钮的鼠标单击事件;

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

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

请严格按照步骤操作。

测试说明

测试过程:

平台将读取用户补全后的.html;

执行其中的代码,判断用户是否按照要求为按钮绑定鼠标单击事件处理程序;

成功输出“绑定鼠标单击事件成功”,否则输出“绑定鼠标单击事件失败”。

以下是测试样例:

测试输入:

无测试输入

预期输出:

鼠标点击事件代码_html鼠标点击显示事件_web鼠标点击事件

绑定鼠标单击事件成功

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考代码:



    
        
        Title
    
    
        

text

<script> //请在此处编写代码 /********** Begin **********/ var myButton = document.getElementById("but"); myButton.addEventListener("click",function(){ var myElement = document.getElementById("p"); myElement.innerText="clicked"; }) /********** End **********/ </script>

第4关:键盘事件

任务描述

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

相关知识

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

键盘事件有三种:

按键按下:keydown,用户按下键盘上的键;

按键释放:keyup,用户释放按键;

点击按键:,用户按下并且释放了按键。

点击按键

表示用户点击某个按键的事件,该事件会触发()事件处理程序,()有一个event参数,其中event.which表示点击的按键的编码。这个编码是该按键的unicode编码。

需要注意的是,按下键盘上的A时,keyCode值是a的编码,只有同时按下shift和A,keyCode的值才是A的编码。

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


    

keypress event

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

比如我们按下B时,控制台如下:

在这里插入图片描述

同时按下B和shift,控制台如下:

在这里插入图片描述

按下按键

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



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

如果你按下按键后没有释放,控制台将会一直进行打印,比如按下的是1,控制台的打印结果如下:

在这里插入图片描述

灰色的数字20表示这条信息已经打印了20次。

释放按键

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



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

比如,当用户按下1时,控制台没有输出,释放1后,控制台输出如下:

在这里插入图片描述

编程要求

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

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

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

测试说明

测试过程:

平台将读取用户补全后的.html;

执行其中的代码,检测是否按照要求操作;

成功输出检测用户是否使用回车键成功,否则输出检测用户是否使用回车键失败。

以下是测试样例:

测试输入:

无测试输入

预期输出:

检测用户是否使用回车键成功

参考代码:



    
        
        Title
    
    
        <script>
        	function pressEvent(event) {
				//请在此处编写代码
				/********** Begin **********/
                var code=event.which;
                if(code==13){
                  console.log("cannot use enter");  
                }
				/********** End **********/
    		}          
        </script>
    

第5关:表单事件

任务描述

本关任务:使用change事件检验用户的输入。

相关知识

表单,即form,是页面最基本的元素之一,通常,用户的输入会放置在表单里面,然后提交给后台。

form有很多子元素,分别表示不同类型的用户输入:例如input表示文本等类型;select表示下拉列表;button表示按钮。

这些子元素可以被绑定一些事件,比如change表示用户的输入发生了改变。这些事件是表单元素特有的。

change事件

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

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


    
<script> function changeEve() { var e = document.getElementById("t1"); console.log(e.value); } </script>

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

在这里插入图片描述

select事件

select事件:文本框中的文本被用户选中时发生。

只能作用在的文本框里面,可以用window.().()获取选择的文本。

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


    
    <script>
        function selectEve() { 
            console.log(window.getSelection().toString());
        }
    </script>

比如我们选择了郑王,然后松开鼠标,控制台的输出如下:

在这里插入图片描述

submit事件

表单的提交事件。

表单里面包含了用户输入的信息,最终要传到后台的服务器进行处理,这样就有一个表单的提交过程,submit即表单提交事件。

通常情况下,在submit的事件处理函数中,校验用户的输入是否符合要求,比如密码的长度够不够。

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


    
<script> function subEve() { var content = document.getElementById("pw").value; if (content.length < 6) { window.alert("密码不可以小于6位"); } } </script>

这时,用户在密码输入框输入123,点击提交,页面会弹出一个警告框如下:

在这里插入图片描述

编程要求

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

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

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

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

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

测试说明

测试过程:

平台将读取用户补全后的.html;

执行其中的代码,判断代码是否对用户的输入进行了检测;

执行了检测输出成功检查了用户的输入,否则输出没有检查用户的输入。

以下是测试样例:

测试输入:

无测试输入

预期输出:

成功检查了用户的输入

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考代码:



	
    	
    	Title
	
	
    	
<script> function changeEvent() { //请在此处编写代码 /********** Begin **********/ if(document.getElementById("input").value.length<=12){ console. log("too short input" ) } /********** End **********/ } </script>

第6关:拖动事件

任务描述

本关任务:学习处理拖动事件。

相关知识

元素的拖放

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

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

将元素的属性设置为true,即表示元素支持拖动。如:下面设置了p元素支持拖动:

元素支持鼠标的拖动

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

.(“p1”). = true;

ondrag

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


    

拖动我!

<script> function dragging(event) { console.log("正在拖动"); } </script>

拖动不放下,控制台如下:

在这里插入图片描述

111表示这条信息已经打印了111次。

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


    

拖动我!

<script> function dragStart(event) { console.log(event.target); console.log("你要拖动的文本的内容是:"+event.target.innerText); } </script>

拖动文本,效果如下:

在这里插入图片描述

第一行是要拖动的文本元素,第二行显示了文本里面的内容。

编程要求

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

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

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

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

测试说明

测试过程:

平台将读取用户补全后的Drag.html;

执行其中的代码,检测p元素是否为可拖动的,以及控制台的打印结果是否为p元素里面的内容;

成功输出拖动事件处理成功,否则输出拖动事件处理失败。

以下是测试样例:

测试输入:

无测试输入

预期输出:

拖动事件处理成功

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考答案:



    
        
        Title
    
    
        

drag me

<script> function dragging(event) { /********** Begin **********/ console.log(event.target.innerText); /********** End **********/ } </script>

第7关:事件冒泡

任务描述

本关任务:阻止事件冒泡的发生。

相关知识

文档树

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


    

点我

content

<script> function clickChild() { console.log("子"); } function clickParent() { console.log("父"); } </script>

对应这样一个模型:

在这里插入图片描述

其中,箭头的方向是子节点的方向,而反过来则是父节点的方向。比如,两个p元素的父节点(父元素)都是div元素。

事件冒泡

在上面的例子中,点击p元素里面的内容,显然会触发p元素的事件处理程序。然后,因为p元素是放在div里面的,点击p元素相当于点击了div元素,会触发div的事件处理程序,这个过程被称为事件冒泡。

事件冒泡是指,某个事件触发了某个元素的事件处理程序,接下来,就会自动沿着节点树往根节点的方向依次触发经过的路径上的所有元素的某个事件的处理程序。

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

在这里插入图片描述

第一行是子元素的click事件的事件处理程序的输出,第二行是父元素的,这里有一个先后的顺序,即从子元素一直到根节点。

事件冒泡的控制

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

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

() {

console.log(“子”);

window.event?window.event.=true:event.();

这个时候再次点击p里面的内容,控制台的输出如下:

在这里插入图片描述

可以看出,事件没有冒泡到父元素上面。所以,想要在哪里停止事件的冒泡,就在它的子元素的事件处理程序的最后调用event.()即可。

编程要求

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

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

测试说明

测试过程:

平台将读取用户补全后的.html;

执行其中的代码,检测click事件的冒泡是否在指定的位置被阻止;

成功输出成功阻止事件的冒泡,否则输出没有阻止事件的冒泡。

以下是测试样例:

测试输入:

无测试输入

预期输出:

成功阻止事件的冒泡

海到无边天作岸,山登绝顶我为峰。 ——林则徐

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

参考代码:




    
    Title


    

click me!

<script> function click1() { console.log("root"); } function click2() { //请在此处编写代码 /********** Begin **********/ event.stopPropagation(); /********** End **********/ console.log("parent"); } function click3() { console.log("child"); } </script>