一,Javascript中常用的事件
事件是页面上的某种操作,事件的源头来自用户。当用户鼠标点击或者按下某个键时进行和页面交互时就会触发事件。
事件 | 事件触发时机 |
onblur | 元素失去焦点时 |
onchange | 元素值发生改变且已失去焦点后 |
onclick | 鼠标在元素上单机时 |
onblclick | 鼠标在元素上双击时 |
onfocus | 元素获得焦点 |
onkeydown | 键盘上某个键被按下时 |
onmousedown | 在元素上按下鼠标时 |
onmousemove | 在元素上移动鼠标指针时 |
onmouseout | 鼠标指针移出元素时 |
onmouseup | 鼠标指针移动到元素的上方时 |
onsubmit | 表单被提交时 |
二,多选框的全选与不全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="checkbox" id="selectAll" />全选/全不选
<hr>
<ul class="shop">
<ol><input type="checkbox" />苹果</oi>
<oi><input type="checkbox" />梨</oi>
<oi><input type="checkbox" />葡萄</oi>
<oi><input type="checkbox" />香蕉</oi>
<oi><input type="checkbox" />榴莲</oi>
</ul>
<script type="text/javascript">
//给全选绑定一个单击事件
document.getElementById("selectAll").onclick = function() {
//this:指的是当前触发单击事件的元素
console.log(this.checked)
//获取当前全选的选中状态
var isChecked = this.checked
//获取到所有的水果的复选框
var cbs = document.querySelectorAll(".shop input")
//通过循环来将全选的状态赋值给水果的复选框
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = isChecked
}
//给所有的水果的复选框绑定单击事件
for (var i = 0; i < cbs.length; i++) {
cbs[i].onclick = function() {
var count = 0; //用来统计选中的复选框的个数
for (var j = 0; j < cbs.length; j++) {
//判断复选框的选中状态
if (cbs[j].checked) {
count++
}
}
//判断选中的复选框的个数与实际的复选框的个数是否相等
if (count == cbs.length) {
//将全选的复选框的状态改为选中
document.getElementById("selectAll").checked = true
} else {
//将全选的复选框的状态改为取消
document.getElementById("selectAll").checked = false
}
}
}
}
</script>
</body>
</html>