第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>