二十五岁时我们都一样愚蠢、多愁善感,喜欢故弄玄虚,可如果不那样的话,五十岁时也就不会如此明智。
标题:JavaScript htmldom 事件监听器
addEventListener() 方法
document.getElementById("myBtn").addEventListener("click", displayDate);addEventListener() 方法将事件处理程序附加到指定的元素。
addEventListener() 方法将事件处理程序的元素而不覆盖现有的事件处理程序。
可以将多个事件处理程序添加到一个元素中。
可以将同一类型的许多事件处理程序添加到一个元素中, 例如,两个 "click" 事件.
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
你可以添加事件侦听器到任何的DOM对象,不仅有DOM HTML元素。例如,window窗口对象。
addEventListener() 方法更容易控制事件对冒泡的响应。
当你使用addEventListener()方法的时候, JavaScript是从HTML标记分离,更好的可读性和允许你添加事件侦听器即使你不控制HTML标记。
你可以很容易地通过使用removeEventListener()方法移除事件侦听器。
语法
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!"); }
将多个事件处理程序添加到同一个元素
addEventListener() 方法允许你添加许多事件相同的元素,而不覆盖现有的事件:
element.addEventListener("click", myFunction); element.addEventListener("click", mySecondFunction);可以将不同类型的事件添加到同一个元素中:
element.addEventListener("mouseover", myFunction); element.addEventListener("click", mySecondFunction); element.addEventListener("mouseout", myThirdFunction);
将事件处理程序添加到窗口对象
addEventListener() 方法允许你添加事件监听器到任何的HTML DOM对象,例如HTML元素、HTML文档、window对象或其他支持的事件,例如:xmlHttpRequest 对象.
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; });
传递参数
当传递参数值时,使用一个“匿名函数”调用指定函数的参数:
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获?
在HTML DOM两事件传播的方式,冒泡和捕获.
事件传播是在事件发生时定义元素顺序的一种方法. 如果在
<div>
元素里面有一个<p>
元素, 用户点击<p>
元素, 那个元素的 "click" 事件将首先被处理?在冒泡事件中内部元素的事件首先处理,然后是外部:
<p>
元素点击事件首先被处理, 然后是<div>
元素.在捕获事件中,外部元素的事件是先处理,然后内部:
<div>
元素点击事件首先被处理, 然后是<p>
元素.使用addEventListener() 方法可以指定事件传播方式采用“useCapture参数:
addEventListener(event, function, useCapture);默认值为false,它将使用冒泡传播,当值设置为true时,事件使用捕获传播.
document.getElementById("myP").addEventListener("click", myFunction, true); document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
removeEventListener() 方法移除用addEventListener()方法,已附加的事件处理程序:
element.removeEventListener("mousemove", myFunction);
浏览器支持
表中的数字指定了完全支持这些方法的第一个浏览器版本.
方法 addEventListener() 1.0 9.0 1.0 1.0 7.0 removeEventListener() 1.0 9.0 1.0 1.0 7.0 注意:本addEventListener()和removeEventListener()方法不能在IE 8和更早的版本,以及Opera 6和较早版本的支持。然而,这些特定的浏览器版本,你可以使用attachEvent()方法附加事件处理程序的元素,和detachEvent()方法删除它:
element.attachEvent(event, function); element.detachEvent(event, function);var x = document.getElementById("myBtn"); if (x.addEventListener) { // For all major browsers, except IE 8 and earlier x.addEventListener("click", myFunction); } else if (x.attachEvent) { // For IE 8 and earlier versions x.attachEvent("onclick", myFunction); }