一.事件的两种绑定方式
// on
绑定
div.onclick = function(){}
解绑
div.onclick=null
// 非on
var fn = function(){}
绑定
div.addEventListener('click', fn);
解绑
div.remove
EventListener('click', fn);
二.冒泡和默认事件
- 冒泡: 子级父级都有点击事件时,子级区域点击,子级响应事件,但父级也响应
- 阻止冒泡
sub.onclick = function (ev) {
// 方式1
ev.stopPropagation();
// 方式2
// ev.cancelBubble = true;
console.log("sub click");
}
sup.onclick = function (ev) {
console.log("sup click");
}
- 默认事件: 一些事件存在默认的系统动作,eg:鼠标右键会弹出菜单栏
- 取消默认
sub.oncontextmenu = function (ev) {
// 方式1
// ev.preventDefault();
console.log("sub menu click");
// 方式2
return false;
}
三.鼠标事件
onclick:鼠标点击
ondblclick:鼠标双击
onmousedown:鼠标按下
onmousemove:鼠标移动
onmouseup:鼠标抬起
onmouseover:鼠标悬浮 onmouseenter
onmouseout:鼠标移开 onmouseleave
oncontextmenu:鼠标右键
鼠标事件ev反馈的鼠标点
ev.clientX | ev.clientY
相当于页面原点(左上角)
四.键盘事件
onkeydown: 键盘按下
onkeyup: 键盘抬起
// 绑定的对象: 对象自身不录入文本,绑给document,自身录入文本(表单标签),绑给自身
ev.keyCode
五.表单事件
onfocus:获取焦点
onblur:失去焦点
onselect:文本被选中
oninput:值改变,一直触发
onchange:值改变,且需要在失去焦点后才能触发
onsubmit:表单默认提交事件,附属于form
六、文档事件 *
onload:页面加载成功
onbeforeunload:页面退出或刷新警告,需要设置回调函数返回值,返回值随意
七、图片事件 *
onerror:图片加载失败
八、页面事件 *********
onscroll:页面滚动
onresize:页面尺寸调整
window.scrollY:页面下滚距离