Js-事件

一.事件的两种绑定方式

// on
绑定
div.onclick = function(){}
解绑
div.onclick=null

// 非on
var fn = function(){}
绑定
div.addEventListener('click', fn);
解绑
div.remove
EventListener('click', fn);

code:

    
    


    
12345

二.冒泡和默认事件

• 冒泡: 子级父级都有点击事件时,子级区域点击,子级响应事件,但父级也响应
• 阻止冒泡

 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;
    }

code:

三.鼠标事件

onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮  onmouseenter
onmouseout：鼠标移开  onmouseleave
oncontextmenu：鼠标右键

鼠标事件ev反馈的鼠标点
ev.clientX | ev.clientY
相当于页面原点(左上角)

code:

四.键盘事件

onkeydown: 键盘按下
onkeyup: 键盘抬起
// 绑定的对象: 对象自身不录入文本,绑给document,自身录入文本(表单标签),绑给自身

ev.keyCode

code:

五.表单事件

onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变,一直触发
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件,附属于form

code:

    
    


    

        
        提交
    
    

六、文档事件

• 文档事件由window调用

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

code:

七、图片事件

onerror：图片加载失败

code:

八、页面事件

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


window.scrollY：页面下滚距离