JavaScript 注册事件
■知识点
在DOM事件模型中,通过调用对象的addEventListener()方法注册事件。用法如下:
element.addEventListener(String type, Function listener, boolean useCapture);
参数说明如下。
type:注册事件的类型名。事件类型名没有on前缀。
listener:事件监听函数。默认传递给它的唯一参数是event对象。
useCapture:布尔值。当它为true时,则在捕获阶段触发;当它为false时,则在冒泡阶段触发。
在IE事件模型中,使用attachEvent()方法注册事件。用法如下:
element.attachEvent(etype,eventName)
参数说明如下。
etype:注册事件的类型,如onclick、onkeyup、onmousemove 等。
eventName:事件监听函数。
■实例设计
【示例1】在下面的示例中,使用addEventListener()方法为所有按钮注册click事件。先调用document的getElementsByTagName()方法捕获所有按钮对象,然后使用for in语句遍历按钮集(btn)和addEventListener()方法分别为每一个按钮注册一个事件函数,该函数获取当前对象所显示的文本。
<button id="btnl" onclick="btnl ();">按钮 1</button>
<button id="btn2" onclick="btn2(event);">按钮 2</button>
<script>
var btn = document.getElementsByTagName ("button");//捕获所有按钮
for(var i in btn) { //遍历按钮集合
btn[i].addEventListener("click", function (){
alert(this.innerHTML);
}, true); //为每个按钮对象注册一个事件监听函数,定义在捕获阶段进行响应
}
</script>
【示例2】在下面的示例中,为段落文本注册两个事件:mouseover和mouseout。当光标移到段落文本上面时会显示为蓝色背景,而当光标移出段落文本时会自动显示为红色背景。
<p id="p1">为对象注册多个事件</p>
<script>
var p1 = document.getElementById("pl"); //捕获段落元素的句柄
p1.addEventListener("mouseover”, function (){
this.style.background = 'blue';
}, true); //为段落元素注册第1个事件监听函数
p1.addEventListener("mouseout",function(){
this.style.background = 'red';
}, true); //为段落元素注册第2个事件监听函数
</script>
点击加载更多评论>>