位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 注册事件

提问人:刘团圆发布时间:2020-11-27

■知识点

在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>

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部