day54

一.事件的两种绑定方式

// 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

六、文档事件 *

• 文档事件由window调用

onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意

七、图片事件 *

onerror：图片加载失败

八、页面事件 *********

onscroll：页面滚动
onresize：页面尺寸调整

window.scrollY：页面下滚距离