js事件
一、事件
发生的某一件事。触发特定的条件,完成某一项功能
二、事件的两种绑定方式
1、on事件绑定方式
document.onclick = function () {
console.log("点击1");
}
document.onclick = function () {
console.log("点击2");
}
// 只打印"点击2"
// 原因：on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
// 事件的移除
document.onclick = null;
2、非on事件绑定方式
// addEventListener('事件名', 回调函数, 冒泡方式(true|false))
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// 事件的移除
document.removeEventListener('click', fn);
// 注:绑定与移除需要指向同一个方法(地址)
三、事件的冒泡和默认事件
冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
event:存放事件信息的回调参数
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
// 事件的兼容
// ev = ev | event;
// 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
console.log(ev);
console.log("body click");
}
</script>
默认事件：取消默认的事件动作，如鼠标右键菜单
<script>
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
console.log("sub menu click");
}
body.oncontextmenu = function (ev) {
console.log("body menu click");
// 方式二
return false;
}
</script>
//注 父级取消了默认事件,子级都被取消掉了
四、鼠标事件 *********
- 鼠标事件
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
- 事件参数ev
ev.clientX：点击点X坐标
ev.clientY：点击点Y坐标
五、键盘事件 *******
- 键盘事件
onkeydown：键盘按下
onkeyup：键盘抬起
- 事件参数ev
ev.keyCode：按键编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键
六、表单事件 *******
onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件
七、文档事件 *
- 文档事件由window调用
onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
八、图片事件 *
onerror：图片加载失败
九、页面事件 *********
onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离