JS事件 *********

一、事件的两种绑定方式 *******

1、on事件绑定方式

document.onclick = function() {    console.log("文档点击");}// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法

document.onclick = function() {    console.log("文档点击");}// 事件的移除document.onclick = null;

2、非on事件绑定方式

document.addEventListener('click', function() {     console.log("点击1");})document.addEventListener('click', function() {     console.log("点击2");})// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行// addEventListener第三个参数(true|false)决定冒泡的方式

function fn () {}document.addEventListener('click', fn);// 事件的移除document.removeEventListener('click', fn);

二、事件参数event *********

• 存放事件信息的回调参数

三、事件的冒泡与默认事件 *********

• 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件

• 默认事件：取消默认的事件动作，如鼠标右键菜单

四、鼠标事件 *********

• 鼠标事件

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：页面下滚距离