首页 > 编程语言> > JavaScript--事件监听机制和表格全选案例

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

2020-02-27 20:01:25 作者：互联网

5-事件监听机制：

5-1概念：

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

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

5-2常见的事件：

1-点击事件：

onclick：单击事件
ondblclick：双击事件

2-焦点事件

onblur：失去焦点
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>

在这里插入图片描述

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万+ 私信关注

标签：function,鼠标,JavaScript,cbs,getElementById,全选,事件,document,监听
来源： https://blog.csdn.net/Pit3369/article/details/104543493