一、事件的常用绑定方式
1 、行内绑定，语法：
<标签 属性列表 事件="事件处理的程序" />
<button onclick="addNode();">创建节点</button> 行内绑定：行内绑定的方式所有的行为（结构、样式、行为）都绑定在同一个标签中，不利于后期维护，而且 违 反js 代码与 html 代码相分离。
2 、动态绑定，语法:
var obj = document.getElementById("testButt");
obj.onclick = function(){
alert("测试动态绑定");
}动态绑定：兼容性好，同一个dom元素对象同一个事件只能绑定一个处理函数，多个的话后会覆盖前者。
3、事件监听，语法：
var obj = document.getElementById("testButt");
obj.addEventListener("click",eventTesta);
obj.addEventListener("click",eventTestb);
function eventTesta(){
alert("aaaaaaaaaaaaaaaaaaaaaaaa");
}
function eventTestb(){
alert("bbbbbbbbbbbbbbbbbbbbbb");
}//多个处理函数全部执行了事件监听: 同一个元素对象同一个事件可以添加多个事件处理程序,dom对象.addEventListener("事件类型",处理函数,boolean) 布尔值可选，默认值是false指定事件是否在捕获或者冒泡阶段执行。
二、常用的事件类型
1、用于页面:
1 、 onload
页面加载时候 一般用于 body 元素
2 、 onunload
页面离开或关闭
注：IE浏览器刷新、页面跳转可以执行 chrome浏览器什么情况都不执行
<body onunload="closeLoad();" onload="eventLoad();"><script type="text/javascript">
function closeLoad(){
alert("页面关闭事件！！！");
}
function eventLoad(){
alert("当页面加载时事件");
}
</script>2、用于鼠标:
1 、 onclick
单击事件 用于鼠标左键点击一下（按下并弹起完成单击）
2 、 ondblclick
双击事件 鼠标左键快速点击两下
注：单击、双击不能同时定义在同一个对象
<button onclick ="testClick();">单击事件</button>
<button ondblclick="testDblclick();">双击事件</button><script type="text/javascript">
function testDblclick(){
alert("双击事件");
}
function testClick(){
alert("单击事件");
}
</script> 3 、 onmouseover
鼠标悬停时（当鼠标放上时）
4 、 onmouseout
鼠标移开时
5 、 onmousedown( 不分左右键 )
鼠标按下时（仅指按下）
6 、 onmouseup( 不分左右键 )
释放鼠标按键时
<div id="testDiv" style="width: 200px;height: 200px;background-color: coral;"
>
鼠标事件
</div>var objNode = document.getElementById("testDiv");
objNode.onmouseover = function(){
alert("鼠标悬停1111111111");
};
objNode.onmouseout = function(){
alert("鼠标移开2222222222222");
};
objNode.onmousedown = function(){
alert("左键按下33333333333333");
};
objNode.onmouseup = function(){
alert("释放444444444444444444");
}; 3、用于键盘:
1 、 onkeydown
按下键盘某个键时
2 、 onkeyup
抬起键盘某个键时
3 、 onkeypress
按下或按住键盘某个键 ( 注意：跟 onkeydown 不要同时用 )
用户名： <input id="userName" name="userName" value="" type="text" />var objNode = document.getElementById("userName");
objNode.addEventListener("keydown",keyFun1);
objNode.addEventListener("keyup",keyFun2);
objNode.addEventListener("keypress",keyFun3);
function keyFun1(){
console.info("键盘按下11111111111");
}
function keyFun2(){
console.info("键盘抬起22222222222");
}
function keyFun3(){
console.info("键盘按住33333333333");
} 4、表单元素事件:
1 、 onblur
当文本框失去焦点（鼠标光标在文本框之外 )
2 、 onfocus
当文本框获得焦点（鼠标光标在文本框之内）
用户名： <input onblur="blueFun();" onfocus="focusFun();" id="userName"
name="userName" value="" type="text" />function blueFun(){
console.info("失去焦点111111");
}
function focusFun(){
console.info("得到焦点22222222");
} 3 、 onchange ( 经常用于下拉选择框 )
内容发生改变
4 、 onsubmit( 表单提交时的事件 )
点击 “submit” 按钮
5 、 onreset( 表单元素重置的事件 )
点击 "reset" 按钮
<form id="myForm" name="myForm" method="get"
action="https://www.baidu.com" onsubmit="return fun6()" onreset="return
fun7()">
<input name="" value="" type="text"
onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
<select name="city" onchange="fun5(this)">
<option selected>-请选择城市-</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
</select>
<br />
<input type="submit" value="提交数据" />
<input type="reset" value="重置数据" />
</form><script>
function fun1(){console.log("获得焦点");}
function fun2(){console.log("失去焦点");}
function fun3(){console.log("正在输入");}// 只要输入
了,就会触发
function fun4(){console.log("内容改变");}// 内部信息发
生变化的同时,要失去焦点
function fun5(sel){console.log("内容发生改变
了"+sel.value)}
function fun6(){
alert("发生了提交事件");
// 做了一些运算之后 动态决定表单能否提交
return false ;
}
function fun7(){
console.log("发生了重置事件");
return true;
}
</script> 获取表单元素值方式
1 、 dom 元素对象 .value
document.getElementById("userName").valuefunction submitFun(){
//alert("确定要提交数据吗33333");
alert(document.getElementById("userName").value+"_1111111111");
alert(document.myForm.userName.value+"_2222222222222");
}
function resetFun(){
alert("数据会被重置4444");
} 5、 DOM 中 event 对象的属性:
type ：当前事件的类型
keyCode: 被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup
clientX：获取当前事件距离窗口左边的距离；
clientY：当前事件发生时距离窗口顶端的距离；
pageX：当前事件所在网页中的x坐标
pageY：当前事件所在网页中的y坐标；
screenX：当前事件所在屏幕中的x坐标；
screenY：当前事件所在屏幕中的y坐标； event 参数就是一个 event 对象，这个 event 对象必须小写。
在 Html 标签中我们通过事件来调用函数，可以向函数传递事件（ event ）参数，但是这个对象是暂时
的，这个对象 就是 event 对象
<input onkeydown="getEventInfo(event);" type="text" name="userName"
id="userName" value="admin" /> // 注: event 参数是固定的.
function getEventInfo(e){
alert(e.type);
}
)
![[HackMyVM]靶场 Slowman](http://pic.xiahunao.cn/[HackMyVM]靶场 Slowman)
