事件就是一件事情，或者一个操作行为，在JS中任何一个元素天生自带了很多行为（和我们是否为其绑定方法没有关系），
JS中常用的事件类型/操作行为：
onmouseover(mousernter 鼠标移入)
onclick(鼠标点击)
onmousedown(鼠标按下)
onmoouseup(鼠标抬起)
onmousemove(鼠标划过)
onmouseout(mouseleave 鼠标移出)
onmousewheel(鼠标方向键)
onscroll(window.onscroll)
onload(window.onload\img.onload)\unload
keydown\keyup\keypress\
onresize(window.onresize)
onmousewheel（转动鼠标滚轮触发）
<script>
//判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。//
<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p>
<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="detail"> 滚动值:(Firefox)</label><input type="text" id="detail" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p>
var oTxt = document.getElementById("txt");
var scrollFunc = function (e) {
var direct = 0;
ee = e || window.event;
var t1 = document.getElementById("wheelDelta");
var t2 = document.getElementById("detail");
if (e.wheelDelta) {//IE/Opera/Chrome
t1.value = e.wheelDelta;
} else if (e.detail) {//Firefox
t2.value = e.detail;
}
ScrollText(direct);
}
/*注册事件*/
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}//W3C
window.onmousewheel = document.onmousewheel = scrollFunc;
/script>
onscroll（拖动滚动条滑动时触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>尝试滚动 div。</p>
<div onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p>滚动 <span id="demo">0</span> 次。</p>
<script>
x = 0;
function myFunction() {
document.getElementById("demo").innerHTML = x += 1;
}
</script>
</body>
</html>
onload（浏览器加载时触发）\unload（浏览器关闭时触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myFunction(){
alert("页面加载完成");
}
function goodbye()
{
alert("感谢你访问。");
}
</script>
</head>
<body onload="myFunction()" onunload="goodbye()">
<h1>Hello World!</h1>
</body>
</html>
onkeypress(键盘按下触发)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
alert("你在输入框内按下一个按键");
}
</script>
</head>
<body>
<p>当用户在输入框内按下一个按键时函数被触发</p>
<input type="text" onkeypress="myFunction()">
</body>
</html>
onresize（改变大小时触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myFunction(){
var w=window.outerWidth;
var h=window.outerHeight;
var txt="窗口大小: 宽度=" + w + ", 高度=" + h;
document.getElementById("demo").innerHTML=txt;
}
</script>
</head>
<body onresize="myFunction()">
<p>尝试调整浏览器的窗口</p>
<p id="demo"> </p>
<p>注意:该例子在IE8 或更早版本下可能不工作，IE8 或更早的版本不支持window对象的outerWidth/outerHeight属性</p>
</body>
</html>
DOM0:给当前元素的某一个私有属性名赋值，当事件触发的时候，获取到属性值，然后把绑定的方法执行
function fnOne() {
console.log('fnOne')
},
function fnTow() {
console.log('fnTow')
}
//oDiv.onclick = fn() ---->错误写法
oDiv.onclick = fnOne;
oDiv.onclick = fnTow;
//使用DOM0绑定，只能给当前元素的某一个事件行为绑定一个方法，后面绑定的方法会把前面的都替换掉
//DOM0事件移除
oDiv.onclick = null;//移除绑定
//DOM2:
//EventTarget.prototype-->addEventListener/removeEventListener
//当元素创建一个事件池，把所有需要绑定的方法存储到事件池中
//当事件触发的时候，到对应的事件池中找到对应的方法 依次执行
oDiv.addEventListener('click',function() {console.log('fnOne')},false);
oDiv.addEventListener('click',fnTow,false);
//可以给当前的元素某一个事件行为绑定多个不同的方法
oDiv.removeEventListener('click',function () {console.log('fnOne')},false)//这样无法移除，因为两个不同的匿名函数，所有DOM2中我们绑定的一般都是具名（实名）函数这样方便后期移除
//移除事件监听 移除时候的三个参数需要和绑定时候一模一样
oDiv.addEventListener('click',fnOne,false);
oDiv.reomveEventListener('click',fnOne,false);
//DOM2独有的事件类型：DOMContentLoaded->当页面中的HTML结构加载完成就会触发这个事件，这个事件在同一个页面中只能使用一次（类似vue生命周期created）
window.onload = function(e){console.log(e)}
//window.onload-->$(document).ready()或者$(function(){})
//1、当页面中的html结构、图片文字视频音频等所有的资源都加载完毕后就会触发这个事件
$(document).ready()
//只要html结构加载完成，就会触发对应事件，在一个页面中可以使用多次
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
