常见事件类型
- click:单击事件
- mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发
- mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发
- input:文本输入框内容变化所触发的事件，只要内容变化就会触发
- fcous:文本框聚焦事件，文本框获取焦点，焦点就是光标点
- change:文本框失焦事件，前提是内容改变了
- blur:文本框的失焦事件，只要失焦就会触发，不关注内容是否变化
- keydown:键按下时自动触发
- keyup:键松开时自动触发
- change:对于表单元素file而言，它 是用户选择好文件之后触发
全选案例的代码 html与css略
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let cks = document.querySelectorAll('.ck')
console.log(all);
checkAll.addEventListener('click', function () {
let chk = true
if (checkAll.checked == false) {
chk = '全选'
} else if (checkAll.checked == true) {
chk = '取消'
}
all.innerHTML = chk
cks.forEach(function (ele, index) {
ele.checked = checkAll.checked
})
})
//伍老师写法type1
/* cks.forEach(function (ele, index) {
ele.addEventListener('click', function () {
let sum = 0
cks.forEach(function (ele, index) {
if (ele.checked) {
sum++
}
})
if (sum == cks.length) {
checkAll.checked = true
} else {
checkAll.checked = false
}
all.innerHTML = checkAll.checked ? '取消' : '全选'
})
}) */
//伍老师写法type2
/* cks.forEach(function (ele, index) {
ele.addEventListener('click', function () {
let quanxuan = document.querySelectorAll('.ck:checked')
console.log(quanxuan.length);
if (quanxuan.length == cks.length) {
checkAll.checked = true
} else {
checkAll.checked = false
}
all.innerHTML = quanxuan.length == cks.length ? '取消' : '全选'
})
}) */
//pink老师写法
cks.forEach(function (ele, index) {
ele.addEventListener('click', function (ele, index) {
let flag = true
cks.forEach(function (ele, index) {
if (ele.checked == false) {
flag = false
}
})
checkAll.checked = flag
all.innerHTML = flag ? '取消' : '全选'
})
})
