JS中的事件处理程序

最新推荐文章于 2023-08-19 18:19:19 发布

lishundi

最新推荐文章于 2023-08-19 18:19:19 发布

阅读量555

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/lishundi/article/details/86998973

版权

web 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的事件处理程序，包括HTML事件处理程序、DOM0级和DOM2级事件处理程序，以及IE特有和跨浏览器的事件处理方式。强调了各种处理程序的特点，如DOM0级不推荐使用，DOM2级支持添加多个事件处理程序，IE的事件处理程序在全局作用域运行，以及跨浏览器的解决方案。

摘要由CSDN通过智能技术生成

什么是事件和事件处理程序？

事件就是用户或浏览器执行的某些动作，诸如click，load，mouseover等，都是事件的名字，而响应某个事件的函数就是事件处理程序，事件处理程序的名字是在事件的名字前面加上“on”。例如：onclick是click事件的事件处理程序，onload是load事件的事件处理程序。总共有4种事件处理程序，介绍如下：

HTML事件处理程序：

写法一：<input type="button" value="Click me" οnclick="alert('clicked')">

 写法二：
<script>
 function showMessage(){
     alert("clicked");
 }
</script>
 <input type="button" value="Click me" οnclick="showMessage()">

还有好几种HTML事件处理程序的写法，由于HTML事件处理程序会使HTML代码和JS代码紧密耦合，而且HTML事件处理程序中的作用域链在不同浏览器中会有不同结果，所以一般不采用HTML来指定事件处理程序，详细内容参考红宝书P348。

DOM0级事件处理程序：

（1）添加事件处理程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM0级事件处理程序</title>
</head>
<script>
window.onload = function(){
   var btn = document.getElementById("btn");
   btn.onclick = function () {
       alert(this.id);//"btn"
   }
}
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

<1>DOM0级事件处理程序被认为是元素的方法，事件处理程序在元素的作用域中执行，程序中的this引用的是当前元素btn。

<2>以这种方式添加的事件处理程序会在事件流的冒泡阶段处理。

<3>缺点：不能添加多个事件处理程序。下面程序只会显示“hello world”。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM0级事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
   
        btn.onclick = function () {
            alert(this.id);
        };
        btn.onclick = function () {
            alert("hello world");
        }
    }

</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

(2) 删除事件处理程序：

btn.onclick = null;

DOM2级事件处理程序：

（1）添加事件处理程序：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM2级事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function () {
            alert(this.id)//"btn"
        },false)
    }

</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

<1>addEventListener()接收三个参数：事件名称，事件处理程序的函数，布尔值（如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序）。

<2>事件处理程序在元素的作用域中执行，程序中的this引用的是当前元素btn。

<3>以这种方式添加的事件处理程序会在事件流的冒泡阶段处理。

<4>优点：可以添加多个事件处理程序。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM2级事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.addEventListener("click",function () {
            alert(this.id)//"btn"
        },false);
        btn.addEventListener("click",function () {
            alert("Hello World");
        },false)
    }

</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

（2）删除事件处理程序：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM2级事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var handler = function(){
            alert(this.id);
        };
        btn.addEventListener("click",handler,false);
        btn.removeEventListener("click",handler,false);
    }
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

IE的事件处理程序：

（1）添加事件处理程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.attachEvent("onclick",function () {
            alert(this.id);//window
        })
    }
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

<1>:attachEvent()：接收2个参数：事件名称，事件处理程序的函数。

<2>:事件处理程序被添加到事件流的冒泡阶段。

<3>事件处理程序在全局作用域中运行，程序中的this指向window。

<4>优点：为一个元素添加多个事件处理程序。要注意的是这些事件处理程序会以添加顺序相反的顺序被触发。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.attachEvent("onclick",function () {
            alert(this.id);//window
        });//后触发
        btn.attachEvent("onclick",function () {
            alert("hello world");
        })//先触发
    }
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

（2）删除事件处理程序：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var handler = function(){
            alert(this.id);
        };
        btn.attachEvent("onclick",handler);
        btn.detachEvent("onclick",handler);
    }
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

跨浏览器的事件处理程序：

（1）添加事件处理程序：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE事件处理程序</title>
</head>
<script>
    window.onload = function () {
        var EventUtil = {
            addHandler:function (element,type,handler) {
                if(element.addEventListener){//DOM2
                    element.addEventListener(type,handler,false);
                }else if(element.attachEvent){//IE
                    element.attachEvent("on" + type,handler);
                }else{//DOM0
                    element["on" + type] = handler;
                }
            },
            removeHandler:function (element,type,handler) {
                if(element.removeEventListener){//DOM2
                    element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){//IE
                    element.detachEvent("on" + type,handler);
                }else{//DOM0
                    element["on" + type] = null;
                }
            }
        };
        var btn = document.getElementById("btn");
        var handler = function () {
            alert(this.id);
        };
        EventUtil.addHandler(btn,"click",handler);
        
    }
</script>
<body>
<div id="box">
    <input type="button" value="Click me" id="btn">
</div>
</body>
</html>

<1>addHandler():视情况分别使用DOM0级方法，DOM2级方法，IE方法来添加事件，这个方法属于EventUtil对象，接收3个参数：要操作的元素，事件名称，事件处理程序函数。

（2）删除事件处理程序：

EventUtil.removeHandler(btn,"click",handler);

lishundi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的事件处理程序

什么是事件和事件处理程序？事件就是用户或浏览器执行的某些动作，诸如click，load，mouseover等，都是事件的名字，而响应某个事件的函数就是事件处理程序，事件处理程序的名字是在事件的名字前面加上“on”。例如：onclick是click事件的事件处理程序，onload是load事件的事件处理程序。总共有4种事件处理程序，介绍如下：HTML事件处理程序：写法一：&lt;inp...
复制链接

扫一扫

专栏目录