事件的绑定(二)

编程入门 行业动态 更新时间:2024-10-07 02:22:48

事件的<a href=https://www.elefans.com/category/jswz/34/1769902.html style=绑定(二)"/>

事件的绑定(二)

DOM 0级事件


DOM 0级事件

  1. 通过DOM获取HTML元素
  2. (获取HTML元素).事件=执行脚本
  • 语法:
    ele.事件=执行脚本
    功能:
    在DOM对象上绑定事件
    说明:
    执行脚本可以是一个匿名函数,也可以是一个函数的调用


不建议使用HTML事件的原因

  1. 多元素绑定相同的事件时,效率低
  2. 不建议在HTML元素中写JavaScript代码


选择练习

关于DOM0级事件,下列选项中说法正确的是?(选择两项)

A 直接在html元素上绑定事件
B 通过DOM获取HTML元素,在DOM对象上绑定事件
C 执行脚本是一个匿名函数,也可以是一个函数的调用
D 如果调用函数,那么语法是:ele.事件=函数名();

正确答案: B,C
参考解析:
该题考察的是DOM的0级事件,正确选项为BC;
DOM的0级事件通过DOM获取到html元素,语法是:ele.事件=执行脚本;执行脚本可以是一个匿名函数,也可以直接调用函数,如果调用函数,语法是:ele.事件=函数名,不加括号


编程练习 1

实现以下功能:

(1)如果按钮的值是“全选”, 当点击按钮时,按钮的值变为“反选”

(2)如果按钮的值是“反选”, 当点击按钮时,按钮的值变为“全选”

注意:

使用通过DOM获取HTML元素的方式绑定事件。

参考代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选和反选</title></head><body><input type="button" value="全选" /><script>btn=document.getElementsByTagName("input")[0];function fun(){if(this.value=="全选"){this.setAttribute("value","反选");} else{this.setAttribute("value","全选");}}btn.onclick=fun;</script></body>
</html>


编程练习 2

实现以下功能:

(1)当点击“录入”按钮时,循环弹出“请输入员工姓名”的输入框,每次录入一个员工的姓名。

(2)直到用户输入-1时,才停止弹出输入框,然后将用户输入的信息输出在页面上。

参考代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>信息录入</title></head><body><input type="button" value="录入" /><script type="text/javascript">var inputs=document.getElementsByTagName("input");var entry=inputs[0];entry.onclick=entryFn;function entryFn(){var arr=[];var inputwhile(input!="-1"){input=prompt("请输入员工姓名");arr.push(input);}arr.pop();for(var i=0;i<arr.length;i++){document.write("录入的第"+(i+1)+"个员工信息是:"+arr[i]+"<br/ >");}}</script></body>
</html>

更多推荐

事件的绑定(二)

本文发布于:2023-07-28 19:29:45,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1287739.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:绑定   事件

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!