首页 > 代码库 > JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

2024-07-25 13:04:28   216人阅读

本篇体验JavaScript事件的基本面，包括：

 

■ 事件必须在页面元素加载之后起效
■ 点击事件的一个简单例子
■ 为元素注册多个点击事件
■ 获取事件参数


□ 事件必须在页面元素加载之后起效

 

有这样一段简单的代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #box {
            background: blue;
            height: 100px;
            width: 100px;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

 

现在，我们想给id为box的div添加事件，创建一个script.js文件。

(function() {
    var ele = document.getElementById("box");
    ele.onclick = function() {
        this.style.background = "red";
    };
}());
是一个匿名函数，只要被引用，自动运行。
 
如果把script.js放在head区域。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    ......
    <script src="http://www.mamicode.com/script.js"></script>
</head>
点击页面蓝色区域会报错：Cannot set property ‘onclick‘ of null
 
找不到需要实施onclick事件的元素。如果我们把script.js放在body区域底部，又会怎样呢？
<body>
    <div id="box"></div>
    <script src="http://www.mamicode.com/script.js"></script>
</body>
点击页面蓝色区域背景色变成红色。
 
由此可以看出：事件必须在页面元素加载完毕之后才可以实施。
 
以上，通过把JavaScript代码放在需要实施事件元素的下方，保证了先加载元素，再执行事件，这很好。而实际上，通过window的onload方法也可以保证所有页面元素加载完毕再执行事件。
 
修改script.js的代码为：
(function () {
    window.onload = function() {
        var ele = document.getElementById("box");
        ele.onclick = function () {
            this.style.background = "red";
        };
    };
}());
把script.js代码放在head部分。点击页面蓝色区域背景色变成红色。
 
□ 点击事件的一个简单例子
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .on {
            background-color: white;
            color: black;
        }
        .off {
            background-color: black;
            color: white;
        }
    </style>
    <script src="http://www.mamicode.com/script.js"></script>
</head>
<body class="on">
    <h1>Hello World</h1>
    <p>欢度国庆</p>
    <button id="open">开</button>
    <button id="close">关</button>
</body>
 
script.js的代码为：
(function () {
    window.onload = function() {
        var openBtn = document.getElementById("open");
        var closeBtn = document.getElementById("close");
        openBtn.onclick = function() {
            document.body.className = "on";
        };
        closeBtn.onclick = function() {
            document.body.className = "off";
        };
    };
 
一切运行正常。但，如果我们在script.js中给开按钮再注册一个事件。
(function () {
    window.onload = function() {
        var openBtn = document.getElementById("open");
        var closeBtn = document.getElementById("close");
        openBtn.onclick = function() {
            document.body.className = "on";
        };
        closeBtn.onclick = function() {
            document.body.className = "off";
        };
        openBtn.onclick = function() {
            alert(‘hello‘);
        };
    };
}());
2
当点击"开"按钮后，弹出alert。由此可以看出：每次只能为元素注册一个onclick事件。
 
□ 为元素注册多个点击事件
 
使用addEventListener方法，可以为元素同时注册多个点击事件。
 
修改script.js代码如下：
(function () {
    window.onload = function() {
        var openBtn = document.getElementById("open");
        var closeBtn = document.getElementById("close");
        var open = function() {
            document.body.className = "on";
        };
        var close = function() {
            document.body.className = "off";
        };
        //第三个参数设置成false，表示允许事件冒泡
        openBtn.addEventListener("click", open, false);
        openBtn.addEventListener("click", function() { alert(‘hello‘); }, false);
        closeBtn.addEventListener("click", close, false);
    };
}());
 
当然，也可以移除注册的事件。
        //移除EventListner事件
        openBtn.removeEventListener("click", open, false);
 
□ 获取事件参数
 
在每次发生事件的时候，所有的事件参数信息都被放在了一个event变量中。修改script.js代码为：
(function () {
    window.onload = function() {
        var openBtn = document.getElementById("open");
        var closeBtn = document.getElementById("close");
        var open = function (e) {
            alert(e.type + " " + e.target);
            document.body.className = "on";
        };
        var close = function (e) {
            alert(e.type + " " + e.target);
            document.body.className = "off";
        };
        //第三个参数设置成false，表示允许事件冒泡
        openBtn.addEventListener("click", open, false);
        closeBtn.addEventListener("click", close, false);
    };
}());    
可见，函数的事件参数在大多数情况下被省略了，如果想获取事件信息，这个event参数还是很有用的。    
 
 
“JavaScript进阶系列”包括：
JavaScript进阶系列01,函数的声明，函数参数，函数闭包
JavaScript进阶系列02,函数作为参数以及在数组中的应用
JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数






























        

            
                
                  
                
                

                    联系

                    我们