HTMLDOM对象事件、监听事件关于焦点的事件
onfocus 事件
onfocus 事件在对象获得焦点时发⽣。
onblur事件
元素失去焦点。
onchange事件
域的内容被改变。
onchange 事件会在域的内容改变时发⽣。
onchange 事件也可⽤于单选框与复选框改变后触发的事件。
例如：可⽤于获取下拉框内容
<body>
//定义下拉列表
<select name="" id="s1">
<option value="">请选择省份/直辖市</option>
<option value="河北">河北省</option>
blur事件
<option value="⼭东">⼭东省</option>
<option value="天津">天津市</option>
</select>
<script type="text/javascript">
var ElementById("s1");
// onchange事件，获取下拉列表改变时的内容
// 输出值
console.log(this.value);
// 输出下标
console.log(this.selectedIndex);
}
</script>
</body>
onclick 事件会在对象被点击时发⽣。
请注意， onclick 与 onmousedown 不同。单击事件是在同⼀元素上发⽣了⿏标按下事件之后⼜发⽣了⿏标放开事件时才发⽣的。
ondblclick事件
当⽤户双击某个对象时调⽤的事件。
onmousedown 事件
⿏标按钮被按下时触发。
onmouseup 事件
⿏标按钮松开时触发。
onmousemove 事件
⿏标指针移动时触发。
onmouseover 事件
⿏标指针移动到指定的对象上时触发。
onmouseout 事件
⿏标指针移出指定的对象时触发。
关于键盘的事件
onkeydown 事件
某个键盘按键被按下时触发。
onKeyUp 事件
某个键盘按键被松开时触发。
onkeypress 事件
某个键盘按键被按下并松开时触发。
指定图⽚或页⾯加载完成时触发。
//页⾯加载完成时触发
<body>
//图⽚加载完成时触发
<img src="logo.png" onload="loadImage()" width="336" height="36">
<script>
function loadImage()
{
alert("图⽚加载完成");
}
</script>
</body>
onunload 事件
在⽤户退出页⾯时触发。
onresize 事件
在窗⼝或框架被调整⼤⼩时触发。
表单事件
onreset 事件
表单被重置后触发（重置按钮点击时触发）。
监听事件
addEventListener() ⽅法
addEventListener() ⽅法为指定元素指定事件处理程序。
addEventListener() ⽅法能够向⼀个元素添加多个事件处理程序。addEventListener() ⽅法允许您将事件添加到任何 HTML DOM 对象上。
element.addEventListener(event,function, useCapture);
第⼀个参数是事件的类型（⽐如 “click” 或 “mousedown”）。
第⼆个参数是当事件发⽣时我们需要调⽤的函数。
第三个参数是布尔值，指定使⽤事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使⽤ “on” 前缀；请使⽤ “click” 代替 “onclick”。
例⼦：
element.addEventListener("click",function(){alert("Hello World!");});
element.addEventListener("click", myFunction);
function myFunction(){
alert("Hello World!");
}
removeEventListener() ⽅法
removeEventListener() ⽅法会删除已通过 addEventListener() ⽅法附加的事件处理程序。
但只能删除通过 外部命名函数。
PS: IE 8、Opera 6.0 及其更早版本不⽀持 addEventListener() 和 removeEventListener() ⽅法。跨浏览器解决⽅案：
var x = ElementById("myBtn");
if(x.addEventListener){// 针对主流浏览器，除了 IE 8 及更正版本
x.addEventListener("click", myFunction);
}else if(x.attachEvent){// 针对 IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。