简介
document.addEventListener() 方法用于向文档添加事件句柄。可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号
注: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这类浏览器版本可以使用 attachEvent() 方法来添加事件句柄(跨浏览器兼容问题可以查看"更多实例")。
语法
var btnDom=document.getElementById("btn1");//"btn1"为元素ID
btnDom.addEventListener('click', function(e){}, useCapture)
参数
参数 | 描述 |
---|---|
event | 必需。描述事件名称的字符串。注意: 不要使用 “on” 前缀。可以使用 “click” 来取代 “onclick”。提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
function | 必需。描述了事件触发后执行的函数。当事件触发时,事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行。false(默认值)-事件句柄在冒泡阶段执行 |
addEventListener事件传递过程
捕获阶段: 从根节点开始顺序而下,检测每个节点是否注册了事件处理程序(从顶层元素向下)。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。(IE 中无此阶段)即:语法处的function函数里面的代码段。
目标阶段: 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段。
冒泡阶段: 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。
实例
<div id="box1" style='background: #ABCDEF; width: 300px;height: 300px;'>
<input type="button" value="test1" id='btn1' />
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var box1 = document.getElementById("box1");
btn1.addEventListener('click', function(e) {
alert('button clicked');
//阻止冒泡
var e = e || window.event;
if(typeof e.cancelBubble == 'undefined') {
//在w3c中
e.stopPropagation();
} else {
//在微软的模型中
e.cancelBubble = true;
}
}, false);
box1.addEventListener('click', function() {
alert('div clicked');
}, false);
document.body.addEventListener('click', function() {
alert('body clicked');
}, false);
document.documentElement.addEventListener('click', function() {
alert('html clicked');
}, false);
document.addEventListener('click', function() {
alert('document clicked');
}, false);
效果:
点击test1按钮:button clicked
点击id为box1的div分别显示:div clicked body clicked html clicked document clicked
addEventListener的event对象属性和方法
事件触发时,会将一个 Event 对象传递给事件处理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
事件类型
DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent,不同的事件有不同的属性和方法。
对象的属性和方法列表
字段 | 描述 |
---|---|
view | 只读,对象,发生事件的 Window 对象。 |
type | 只读,字符串。比如鼠标点击事件的类型:click。 |
eventPhase | 只读,数字,事件流正经历的阶段。1-捕获,2-目标,3-冒泡。 |
target | 只读,对象,派发事件的目标对象。比如鼠标是点击在哪个按钮上的。 |
currentTarget | 只读,对象,当前正在调用监听器的对象,也就是当前 addEventListener 是绑定在哪个对象上的。 |
timeStamp | 只读,数字,用毫秒表示事件发生时距计算机开机的时间。 |
cancelable | 只读,布尔,处理事件的默认行为是否可以停止。主要针对一些系统事件,如果值为 true,则 event 的 preventDefault 方法可以使用,否则不可用。 |
preventDefault() | 阻止浏览器的默认行为,比如在文本框中打字触发 keydown,如果 keydown 事件处理程序中调用了 preventDefault(),所打的字就不会跑到文本框中去,注意,此时不要弹出 alert 对话框,否则可能不起作用。IE 中在事件处理程序中用 return false 实现类似功能。 |
bubbles | 只读,布尔,事件是否开启冒泡功能。 |
stopImmediatePropagation | 这个东西在 JavaScript 中是个属性,而不是方法,布尔,但具体测试并未发现其用途,不知是不是 bug。 |
stopPropagation() | 停止当前的事件流传播,但不会停止当前正在处理的对象。IE 中用 event.cancelBubble = true 实现类似功能。 |
cancelBubble | 布尔,是否取消冒泡,不建议使用,用 stopPropagation() 代替。 |
preventBubble() | 阻止冒泡,不建议使用,用 stopPropagation() 代替。 |
preventCapture() | 阻止捕获,不建议使用,用 stopPropagation() 代替。 |
detail | 只读,数字,提供时间的额外信息,对于 click 事件、mousedown 事件和 mouseup 事件,这个字段代表点击的次数。 |
isChar | 只读,布尔,按下的按键值是否是字符,比如按下 Ctrl 键时,就返回 false。不过您在 Firefox 中测试时,该值总是 false,Firefox 官方已经说明这是一个 bug。 |
altKey | 只读,布尔,是否按下了 Alt 键。 |
ctrlKey | 只读,布尔,是否按下了 Ctrl 键。 |
shiftKey | 只读,布尔,是否按下了 Shift 键。 |
metaKey | 只读,布尔,是否按下了 Meta 键。 |
注:
charCode 只读,数字,字符(英文、数字、符号)的 Unicode 值。
只用于 keypress。
keyCode 只读,数字,键盘按键值。
用于 keypress 时:返回非字符按键值(除 Ctrl、Shift、Alt、Caps Lock、单行文本框中按向上键等);
用于 keydown、keyup 时:返回任意键值。
button 只读,数字,鼠标按键值。
用于 click 时:0-左键。
用于 mousedown、mouseup 时:0-左键,1-中间键(滚轮),2-右键。
which 只读,数字,键盘按键值或鼠标按键值。
用于 keypress 时:等同于 charCode + 回退键 + 回车键;
用于 keydown、keyup 时:返回任意键值;
用于 click 时:1-左键,与 button 的值略有区别。
用于 mousedown、mouseup 时:1-左键,2-中间键(滚轮),3-右键,与 button 的值略有区别。