JavaScriptHTMLDOMEventListeneraddEventListener() 方法
例子
document.getElementById("myBtn").addEventListener("click", displayDate);尝试一下”
addEventListener() 方法用于向指定元素添加风暴句柄。
addEventListener() 添加的风暴句柄不会覆盖现有的风暴句柄。
您可以向一个元素添加多个风暴句柄。
您可以将多个相同类型的风暴处理程序添加到同一元素，例如两个“单击”风暴。
您可以将元素添加到任何 DOM 对象，而不仅仅是 HTML 元素。 如：窗口对象。
addEventListener()方法可以更轻松地控制风暴（冒泡和捕获）。
当使用addEventListener()方法时，JavaScript与HTML标记分离，可读性更强，并且在无法控制HTML标记时还可以添加事件监听。
您可以使用removeEventListener()方法来移除storm的窃听。
句型
元素。 addEventListener(事件、函数、useCapture);
第一个参数是风暴的类型（例如“click”或“mousedown”）。
第二个参数是风暴触发后调用的函数。
第三个参数是一个布尔值，描述风暴是冒泡还是捕获。 该参数是可选的。
注意：请勿使用“on”前缀。 例如javascript 添加事件，使用“click”而不是“onclick”。
为原始元素添加风暴句柄
例子
弹出“HelloWorld！” 当用户单击该元素时：
element.addEventListener("click", function(){ alert("Hello World!"); });尝试一下”
您可以使用函数名称来引用外部函数：
例子
弹出“HelloWorld！” 当用户单击该元素时：
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);尝试一下”
向 Window 对象添加风暴句柄
addEventListener() 方法允许您将事件添加到 HTMLDOM 对象，例如 HTML 元素、HTML 文档和窗口对象。 或者其他支持的storm对象例如：xmlHttpRequest对象。
例子
当用户调整窗口大小时添加风暴错误：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});尝试一下”
传递参数
传递参数值时使用“匿名函数”来调用带参数的函数：
例子
element.addEventListener("click", function(){ myFunction(p1,
p2); });尝试一下”
风暴冒泡还是风暴捕获？
风暴传播有两种形式：冒泡和捕获。
风暴传递定义了元素风暴触发的顺序。如果你愿意的话
元素插入到
元素，用户单击
元素，哪个元素的“点击”风暴先触发？
冒泡时，会先触发内层元素的风暴，然后再触发外层元素，即：
元素的点击风暴先触发javascript 添加事件，后触发
元素点击风暴。
捕捉时会先触发外层元素的风暴，然后再触发内层元素的风暴，即：
元素的点击风暴首先触发，然后再触发
元素点击风暴。
addEventListener()方法可以指定“useCapture”参数来设置传输类型：
addEventListener(事件、函数、useCapture);
默认值为false，即冒泡传输。 当值为 true 时，风暴使用捕获传输。
例子
document.getElementById("myDiv").addEventListener("click", myFunction, true);尝试一下”
移除事件监听器()方法
removeEventListener() 方法删除 addEventListener() 方法添加的风暴句柄：
例子
element.removeEventListener("mousemove", myFunction);尝试一下”
浏览器支持
表中的数字表示第一个支持该方法的浏览器的版本号。
方式
添加事件监听器()
1.0
9.0
1.0
1.0
7.0
移除事件监听器()
1.0
9.0
1.0
1.0
7.0
注意：IE8及更早的IE版本、Opera7.0及更早版本不支持addEventListener()和removeEventListener()方法。 并且，对于此类浏览器版本，您可以使用 detachEvent() 方法删除风暴句柄：
element.attachEvent(事件，函数);element.detachEvent(事件，函数);
例子
跨浏览器解决方案：
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}尝试一下”
HTMLDOM Storm 对象参考指南
对于所有 HTMLDOM 问题，请查看我们完整的 HTMLDOMEvent 对象参考指南。
教程
0 笔记 写笔记
发送
还没有笔记
