HTML addEventListener() 方法和attachEvent()区别分析
2016-05-06 20:52
645 查看
语法
element.addEventListener(event,function,useCapture)参数值
参数 | 描述 |
---|---|
event | 必须。字符串,指定事件名。 注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行 |
实例
您可以通过函数名来引用外部函数。该实例演示了在用户点击a <button> 元素时如何执行函数:
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }</span></span>
您可以在文档中添加许多事件,添加的事件不会覆盖已存在的事件。
该实例演示了如何在<button>元素中添加两个点击事件:
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction); document.getElementById("myBtn").addEventListener("click", someOtherFunction);</span></span>
您可以在同一个元素中添加不同类型的事件。
该实例演示了如何在同一个 <button> 元素中添加多个事件:
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("mouseover", myFunction); document.getElementById("myBtn").addEventListener("click", someOtherFunction); document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);</span></span>
修改 <button> 元素的背景:
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", function(){ this.style.backgroundColor = "red"; });</span></span>
使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
// 添加 <div> 事件句柄
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").addEventListener("mousemove", myFunction);</span></span>// 移除 <div> 事件句柄
<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").removeEventListener("mousemove", myFunction);</span></span>
如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法:
<span style="font-family:SimSun;"><span style="font-size:18px;">var x = document.getElementById("myBtn"); if (x.addEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早 IE 版本 x.attachEvent("onclick", myFunction); }</span></span>
addEventListener() 方和attachEvent()区别
addEventListener(event,function,capture/bubble);
参数event如上表所示,
function是要执行的函数,
capture与bubble分别是W3C制定得两种时间模式,
简单来说capture就是从document的开始读到最后一行, 再执行事件,
而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.
Windows Internet Explorer( IE )也有制定一种EventHandler, 是 attachEvent(), 格式如下:
window.attachEvent(”submit”,myFunction());
比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
移除设定的事件, 格式分别如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同,同时在使用的过程中要注意
(1)attachEvent方法 按钮onclick IE中使用
(2)addEventListener方法 按钮click fox中使用
两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
(1)attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
(2)addEventListener方法 用于 Mozilla系列
举例:
<span style="font-family:SimSun;">document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3;</span>如果这样写,那么将会只有medhot3被执行
写成这样:
<span style="font-family:SimSun;">var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3);</span>执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持attachEvent该方法,需要用到
<span style="font-family:SimSun;">addEventListener var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false);</span>执行顺序为method1->method2->method3
实例:(要注意的是div必须放到js前面才行)
<span style="font-family:SimSun;"><html> <head> </head> <body> <div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> <div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> </div> <div id="info"></div> <script type="text/javascript"><!-- var name1=document.getElementById('name1'); //要注意 var name2=document.getElementById('name2'); //要注意 var info=document.getElementById('info'); if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空 name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; }); name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; }); }else{ name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); } // --></script> </body> </html> </span>
DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:
DOM1 协定:
Event Name | Description |
onblur() | The element has lost focus (that is, it is not selected by the user). |
onchange0 | The element has either changed (such as by typing into a text field) or the element has lost focus. |
onclick0 | The mouse has been clicked on an element. |
ondblclick() | The mouse has been double-clicked on an element. |
onfocus() | The element has gotten focus. |
onkeydown() | A keyboard key has been pressed down (as opposed to released) while the element has focus. |
onkeypress() | A keyboard key has been pressed while the element has focus. |
onkeyup() | A keyboard key has been released while the element has focus. |
onload() | The element has loaded (document, frameset, or image). |
onmousedown() | A mouse button has been pressed. |
onmousemove() | The mouse has been moved. |
onmouseout() | The mouse has been moved off of or away from an element. |
onmouseover() | The mouse has moved over an element. |
onmouseup() | A mouse button has been released. |
onreset() | The form element has been reset, such as when a form reset button is pressed. |
onresize() | The window's size has been changed. |
onselect() | The text of a form element has been selected. |
onsubmit() | The form has been submitted. |
onunload() | The document or frameset has been unloaded. |
DOM 0 Event | DOM 2 Event |
onblur() | blur |
onfocus() | focus |
onchange() | change |
onmouseover() | mouseover |
onmouseout() | mouseout |
onmousemove() | mousemove |
onmousedown() | mousedown |
onmouseup() | mouseup |
onclick() | click |
ondblclick() | dblclick |
onkeydown() | keydown |
onkeyup() | keyup |
onkeypress() | keypress |
onsubmit() | submit |
onload() | load |
onunload() | unload |
/article/1259799.html
相关文章推荐
- 使用Visual Studio Code打开浏览器查看HTML文件
- docx转成html
- HTML的渲染过程
- <html>form(表单)
- html 锚点链接 图像热区链接
- textview设置多种不同的字体颜色和点击事件
- 腾讯视频生成的Html代码
- 优酷视频生成的Html代码
- HTML简介
- mvc 4 Razor (@html.xx)语法大全以及应用
- HTML常用标签整理
- Web网页简单的静态导航菜单的制作
- html页面中显示审查元素时Element.style
- HTML 基础知识01
- HTML中使背景图片自适应浏览器大小
- 解决FF下不能使用outerHTML的2种方法
- Html基础知识点
- text() or html() 获取 td 内容
- HTML常用标签整理
- HTML 文本框 TextBox 内容改变事件