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>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p>
</body>
</html>
定义和用法
onclick 属性由元素上的鼠标点击触发。
注释：onclick属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
语法
<element onclick="script">
属性值
| 值 | 描述 |
|---|---|
| script | onclick 发生时运行的脚本。 |
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)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行.可能值:1. true - 事件句柄在捕获阶段执行2. false- false- 默认。事件句柄在冒泡阶段执行 |
区别
image
demo如下，得出结果
onclick只出现一次alert：我是click2【很正常第一次click事件会被第二次所覆盖】，但是addEventListener却可以先后运行，不会被覆盖【正如：它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】实例
<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处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次，但是仍然只会出现最后的一次绑定。
addEventListener
两次绑定的事件，都能够成功运行，也就是前后弹出 ‘我是addEvent1’ '我是addEvent2'
由此可知，对于一个可以绑定的事件对象，想多次绑定事件都能运行，选用addEventListener
- onclick事件在同一时间只能指向唯一对象
- addEventListener给一个事件注册多个listener
- addEventListener对任何DOM都是有效的，而onclick仅限于HTML
- addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除
- IE9使用attachEvent和detachEvent
网友评论