教材来自<<菜鸟学堂>>
JavaScript HTML DOM 事件
HTML 事件的例子:
当用户点击鼠标时 onmousedown、onmouseup、onclick
当网页已加载,关上时 onload、onunload
当图像已加载时
当鼠标移动到,移开元素上时 onmouseover、onmouseout
当元素获得焦点,失去焦点时 onfocus、onblur
当输入字段被改变时 onchange
当提交 HTML 表单时
当用户触发按键时
HTML 事件属性
<button onclick="displayDate()">点这里</button> <script> function displayDate(){ alert("Hello World !"); } </script>
使用 HTML DOM 来分配事件
<script> document.getElementById("myBtn").onclick=function(){ alert("Hello World !"); }; </script>
addEventListener() 方法
// element.addEventListener(event, function, 冒泡(false)还是捕获(true)); <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { alert("Hello World !"); } document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script>
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
可读性更强,JavaScript 从 HTML 标记中分离开来, 在没有控制HTML标记时也可以添加事件监听。
冒泡:先注册先执行,此为默认值。
捕猎:后注册先执行。
注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
// 允许向同个元素添加多个事件,且不会覆盖已存在的事件: element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction); // 同个元素添加不同类型的事件: element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction);
removeEventListener() 方法
element.removeEventListener("mousemove", myFunction);
向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
// 当用户重置窗口大小时添加事件监听: <p id="demo"></p> <script> window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script>
浏览器支持
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);
// 跨浏览器解决方法: var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本 x.attachEvent("onclick", myFunction); }