onclick
實例
<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="copyText()">復制文本</button>
<p>當按鈕被單擊時觸發(fā)函數(shù)。此函數(shù)把文本從 Field1 復制到 Field2 中。</p>
</body>
</html>
定義和用法
onclick 屬性由元素上的鼠標點擊觸發(fā)。
注釋：onclick屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
語法
<element onclick="script">
屬性值
| 值 | 描述 |
|---|---|
| script | onclick 發(fā)生時運行的腳本。 |
addEventListener()
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>該實例使用 addEventListener() 方法來向按鈕添加點擊事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function()
{
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>
定義和用法
addEventListener()方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。
語法
element.addEventListener(event, function, useCapture)
參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| event | 必須。字符串，指定事件名。注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。 |
| function | 必須。指定要事件觸發(fā)時執(zhí)行的函數(shù)。 當事件對象會作為第一個參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標事件) 對象。 |
| useCapture | 可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行.可能值:1. true - 事件句柄在捕獲階段執(zhí)行2. false- false- 默認。事件句柄在冒泡階段執(zhí)行 |
區(qū)別
image
demo如下，得出結果
onclick只出現(xiàn)一次alert：我是click2【很正常第一次click事件會被第二次所覆蓋】，但是addEventListener卻可以先后運行，不會被覆蓋【正如：它允許給一個事件注冊多個監(jiān)聽器。在使用DHTML庫或者 Mozilla extensions 這樣需要保證能夠和其他的庫或者差距并存的時候非常有用?！?br>
實例
<ul id="color-list">
<li id="addEvent">red</li>
<li id="on_click">yellow</li>
</ul>
<script type="text/javascript">
(function(){
var addEvent = document.getElementById("addEvent");
addEvent.addEventListener("click",function(){
alert("我是addEvent1");
},false);
addEvent.addEventListener("click",function(){
alert("我是addEvent2");
},false);
var addEvent = document.getElementById("on_click");
on_click.onclick = function() {
alert("我是click1");
}
on_click.onclick = function() {
alert("我是click2");
}
})();
</script>
運行結果：
onclick
可想而知，只會彈出一個彈出框，雖然綁定了兩次，‘我是click2’
一個click處理器在同一時間只能指向唯一的對象。因此就算對于一個對象綁定了多次，但是仍然只會出現(xiàn)最后的一次綁定。
addEventListener
兩次綁定的事件，都能夠成功運行，也就是前后彈出 ‘我是addEvent1’ '我是addEvent2'
由此可知，對于一個可以綁定的事件對象，想多次綁定事件都能運行，選用addEventListener
- onclick事件在同一時間只能指向唯一對象
- addEventListener給一個事件注冊多個listener
- addEventListener對任何DOM都是有效的，而onclick僅限于HTML
- addEventListener可以控制listener的觸發(fā)階段，（捕獲/冒泡）。對于多個相同的事件處理器，不會重復觸發(fā)，不需要手動使用removeEventListener清除
- IE9使用attachEvent和detachEvent
