首页 / JAVASCRIPT / JavaScript--事件监听机制和表格全选案例

JavaScript--事件监听机制和表格全选案例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript--事件监听机制和表格全选案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5741字，纯文字阅读大概需要9分钟。

内容图文

5-事件监听机制：

5-1概念：

某些组件被执行了某些操作后，触发某些代码的执行。

  • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
  • 事件源：组件。如： 按钮 文本输入框…
  • 监听器：代码。
  • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

5-2常见的事件：

1-点击事件：

  1. onclick：单击事件
  2. ondblclick：双击事件

2-焦点事件

  1. onblur：失去焦点
  2. onfocus:元素获得焦点。

3-加载事件：

onload：一张页面或一幅图像完成加载。

//2.加载完成事件  onl oad
window.onload = function(){
	...
}

4-鼠标事件：

onmousedown 鼠标按钮被按下。

//3.绑定鼠标点击事件
document.getElementById("username").onmousedown = function(event){
   // alert("鼠标点击了....");
    alert(event.button);
}

onmouseup 鼠标按键被松开。

onmousemove 鼠标被移动。

onmouseover 鼠标移到某元素之上。

//3.绑定鼠标移动到元素之上事件
document.getElementById("username").onmouseover = function(){    
	alert("鼠标来了....");
}

onmouseout 鼠标从某元素移开。

5-键盘事件：

onkeydown 某个键盘按键被按下。

document.getElementById("username").onkeydown = function(event){
    // alert("鼠标点击了....");
   // alert(event.button);
    if(event.keyCode == 13){
        alert("提交表单");
    }

}

onkeyup 某个键盘按键被松开。

onkeypress 某个键盘按键被按下并松开。
?

6-选择和改变

onchange 域的内容被改变。

document.getElementById("username").onchange = function(event){
    alert("改变了...")
}

document.getElementById("city").onchange = function(event){
    alert("改变了...")
}

onselect 文本被选中。

7-表单事件：

onsubmit 确认按钮被点击。

document.getElementById("form").onsubmit = function(){
    //校验用户名格式是否正确
    var flag = false;


    return flag;
}

onreset 重置按钮被点击。

6-案例：表格全选

分析：全选：

  • 获取所有的checkbox
  • 遍历cb，设置每一个cb的状态为选中 checked

6-1页面建立


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
    table {
        border: 1px solid;
        width: 500px;
        margin-left: 30%;
    }

    td, th {
        text-align: center;
        border: 1px solid;
    }

    div {
        margin-top: 10px;
        margin-left: 30%;
    }
</style>
</head>
    
<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

JavaScript--事件监听机制和表格全选案例 - 文章图片

6-2新增js事件


document.getElementById("unSelectAll").onclick = function () {
    //全选
    //1.获取所有的CheckBox
    var cbs = document.getElementsByName("cb");
    //注意：getElementsByName()这个方法
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每个cb的状态选中：checked
        cbs[i].checked = false;
    }
}

document.getElementById("unSelectAll").onclick = function () {
    //全不选
    //1.获取所有的CheckBox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每个cb的状态选中：checked
        cbs[i].checked = false;
    }
}

document.getElementById("selectRev").onclick = function(){
    //反选
    //1.获取所有的checkbox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每一个cb的状态为相反
        cbs[i].checked = !cbs[i].checked;
    }
}
//点第一个复选框进行全选操作
document.getElementById("firstCb").onclick = function () {
    //点击第一个cb
    //1.获取所有的checkbox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i <= cbs.length; i++) {
        //3.设置每一个cb的状态和第一个cb的状态
        cbs[i].checked = this.checked;//由于匿名事件本身就是第一个复选框引起的，本身就是this
    }

}

//给所有tr绑定鼠标移到元素之上和移除元素事件
//注意：over和out在style中的定义形式
/*
.over{
    background-color: pink;
}
.out{
    background-color: white;
}
*/
var trs = document.getElementsByTagName("tr");
//2.遍历
for (var i = 0; i < trs.length; i++) {
    //移到元素之上
    trs[i].onmouseover = function () {
        this.className = "over";
    };
    //移除元素
    trs[i].onmouseout = function () {
        this.className = "out";
    };
}



document.getElementById("unSelectAll").onclick = function () {
    //全选
    //1.获取所有的CheckBox
    var cbs = document.getElementsByName("cb");
    //注意：getElementsByName()这个方法
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每个cb的状态选中：checked
        cbs[i].checked = false;
    }
}

document.getElementById("unSelectAll").onclick = function () {
    //全不选
    //1.获取所有的CheckBox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每个cb的状态选中：checked
        cbs[i].checked = false;
    }
}

document.getElementById("selectRev").onclick = function(){
    //反选
    //1.获取所有的checkbox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i < cbs.length; i++) {
        //3.设置每一个cb的状态为相反
        cbs[i].checked = !cbs[i].checked;
    }
}
//点第一个复选框进行全选操作
document.getElementById("firstCb").onclick = function () {
    //点击第一个cb
    //1.获取所有的checkbox
    var cbs = document.getElementsByName("cb");
    //2.遍历
    for (var i = 0; i <= cbs.length; i++) {
        //3.设置每一个cb的状态和第一个cb的状态
        cbs[i].checked = this.checked;//由于匿名事件本身就是第一个复选框引起的，本身就是this
    }

}

//给所有tr绑定鼠标移到元素之上和移除元素事件
//注意：over和out在style中的定义形式
/*
.over{
    background-color: pink;
}
.out{
    background-color: white;
}
*/
var trs = document.getElementsByTagName("tr");
//2.遍历
for (var i = 0; i < trs.length; i++) {
    //移到元素之上
    trs[i].onmouseover = function () {
        this.className = "over";
    };
    //移除元素
    trs[i].onmouseout = function () {
        this.className = "out";
    };
}
锅巴QAQ 发布了92 篇原创文章 · 获赞 23 · 访问量 6万+ 私信 关注

内容总结

以上是互联网集市为您收集整理的JavaScript--事件监听机制和表格全选案例全部内容，希望文章能够帮你解决JavaScript--事件监听机制和表格全选案例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/640911.html

来源：【匿名】