js事件

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

存放事件信息的回调参数

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

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

<body id="body">
   	<div id="sup">
        <div id="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) {
	console.log("body click");
}
</script>

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

<body id="body">
   	<div id="sup">
        <div id="sub"></div>
    </div>
</body>

<script>
sub.oncontextmenu = function (ev) {
    // 方式一
    ev.preventDefault();
	console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
	console.log("sup menu click");
    // 方式二
    return false;
}
body.oncontextmenu = function (ev) {
	console.log("body menu click");
}
</script>

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

鼠标事件

onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮 onmouseenter
onmouseout：鼠标移开	onmouseleave
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：页面下滚距离