亲宝软件园·资讯

展开

javascript中的事件

小土豆biubiubiu 人气:1

一.简介

  javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作。

  本篇文章会从以下几个点去详细介绍javascript中的事件:

    >> 事件处理程序

    >> 事件流机制

    >> 事件对象

    >> 实践应用——事件委托

  

二.事件处理程序

  事件处理程序指的是处理事件的函数,也可以称其为事件侦听器。

  所以了解事件的第一步就是如何去添加或者删除事件处理程序,下面会总结几种常见的事件处理程序的添加/删除方法。

1.HTML事件处理程序

  HTML事件处理程序,即直接将事件处理程序添加在HTML元素中。

  一般在代码中比较常见,直接看示例。

<button onclick="submit()">提交</button>
<script type="text/javascript">
  function submit(){
    //事件处理逻辑
  }
</script>

  这种直接在HTML中指定事件处理程序会有一个比较明显的缺点:有可能存在用户在点击按钮时,事件处理函数submit还未解析到,此时就会报错。

   

2.DOM0级事件处理程序

  DOM0级规定的事件处理程序是在javascript中通过给事件处理程序定义一个函数实现的。

<button id="submit">提交</button>
<script type="text/javascript">
  var submitEle = document.getElementById('submit');
  submitEle.onclick = function submit(){
    //事件处理逻辑
  }
</script>

  这种方式可以为button元素添加多个事件处理函数,只不过只有最后一个会生效。

 

  移除事件的方式也比较简单,即将事件处理程序的值设置为null。

<button id="submit">提交</button>
<script type="text/javascript">
  var submitEle = document.getElementById('submit');
  submitEle.onclick = function submit(){
    //事件处理逻辑
  }
  // 移除事件
  submitELe.onclick = null;
</script>

  

3.DOM2级事件处理程序

  DOM2级事件中为处理事件新增了两个api,一个是添加事件api:addEventListenter;一个是移除事件api:removeEventListener。

  这个两个api都可以接收三个参数:

    eventName      事件名称

    fn           事件处理函数

    booleanVal       一个布尔值,默认为false。用于指示事件处理函数在那个阶段执行(这个参数的作用会在事件流机制中说明)。

  

  api使用示例:

<button id="submit">提交</button>
<script type="text/javascript">
    var submitEle = document.getElementById('submit');
    function submit(){
        //事件处理逻辑
    }
    // 添加事件
    submitEle.addEventListener('click',submit);
   
    // 移除事件
    submitEle.removeEventListener('click',submit);
    
</script>

  关于这两个api的使用,我们需要注意几点。

  首先第一点就是使用addEventListener可以添加多个事件处理程序,而且事件处理程序会按照代码添加顺序依次执行。

  第二点是使用addEventListener添加的事件处理程序,只能通过removeEventListener来移除。

  第三个需要注意的是使用addEventListener添加事件处理程序时,如果传递的第二个参数fn是一个匿名函数,则无法使用removeEventListener去移除。

  对于第三个点中提及到的匿名函数,这个写一个简单的示例。

<button id="submit">提交</button>
<script type="text/javascript">
    var submitEle = document.getElementById('submit');
   
    // 添加事件
    submitEle.addEventListener('click',function(){
       console.log("这是一个匿名函数");
     
    });
   
   // 移除事件:这种情况下使用removeEventListener是无法移除前面添加的事件处理程序
   submitEle.removeEventListener('click',function(){

   });
    
</script>

  

4.IE事件处理程序

     对于IE8以及更早版本的IE浏览器来说,它不支持addEventListener、removeEventListener这两个api。

  它支持和这两个类似的api分别为:attachEvent和deleteEvent。

  这两个api也需要接收两个参数:

    eventName     事件名称

    fn                    事件处理函数

  那话不多说,写一个示例:

<button id="submit">提交</button>
<script type="text/javascript">
    var submitEle = document.getElementById('submit');
    function submit(){
        //事件处理逻辑
    }
    // 添加事件
    submitEle.attachEvent('onclick',submit);
   
    // 移除事件
    submitEle.deleteEvent('onclick',submit);
    
</script>

  使用这两个api的时候也有几个注意的地方。

  第一点是api的eventName参数传递,注意是onclick而不是click。

  第二点就是使用attachEvent可以添加多个事件处理程序,而且事件处理程序会按照代码添加的相反顺序依次执行。

  第三点是使用attachEvent添加的事件处理程序,只能通过deleteEvent来移除。

  第四个需要注意的是使用attachEvent添加事件处理程序时,如果传递的第二个参数fn是一个匿名函数,则无法使用deleteEvent去移除。

  其中最后两点和addEventListener/removeEventListener这两个api用法一致。

  和addEventListener/removeEventListener这两个api用法有区别的就是第一点和第二点,已经用红色标记出来,使用的时候需要注意。

     注意:IE11目前已经不支持attachEvent和deleteEvent,直接在脚本中调用方法会报错。

 

5.通用事件处理程序

  前面介绍了多种不同添加/移除事件处理程序的方式。

  考虑到浏览器的兼容性,我们需要有一个通用的事件处理程序,以便我们进行快速的项目开发。

  因此,下面就写一个简单的通用事件处理程序。 

var EventUtils = {
    //添加事件
    addEvent: function(element, eventName, fn){
        if(element.addEventListener){
            element.addEventListener(eventName, fn, false);
        }else if(element.attachEvent){
            element.attachEvent('on' + eventName, fn)
        }else{
            element.eventName = fn;
        }
    },

    //移除事件
    removeEvent: function(element, eventName, fn){
        if(element.removeEventListener){
            element.removeEventListener(eventName, fn, false);
        }else if (element.deleteEvent){
            element.deleteEvent('on' + eventName, fn);
        }else{
            element.eventName = null;
        }
    }
};

  (这个事件处理程序比较简单,后面内容总结完成后会将这段代码进行补充完善。)

三.事件流机制

  对于事件流专业的解释为:页面接收事件的顺序。

  那对于页面接收事件的顺序,分为两种,分别是:事件冒泡(event bubbling)和事件捕获(event capturing)。

1.事件冒泡

  事件冒泡最早是IE提出来的事件流顺序。那么它指的是事件从子元素向父元素传播。

  现在我们有这样一段html文档:

  

 

  当我们点击触发button元素的click事件后,会依次触发button元素、p元素、div元素、body元素和html元素的click事件。

  

 

 2.事件捕获

  事件捕获和事件冒泡是相反的顺序,即事件由父元素向子元素传播。

  那还是前面的那段html文档

  

  对于捕获型的事件流,当我们触发了button的click事件后,会依次触发html元素、body元素、div元素、p元素和button元素的clcik事件。

  

 

 

   

  前面DOM2级的事件处理程序中,我们介绍了两个api:addEventListener和removeEventListener。

  这两个api的接收的第三个boolean参数就是用来指定事件处理程序在那个阶段执行。

  其中false值,即指定事件在冒泡阶段执行;相反指定true值,表示事件在捕获阶段执行。

  而对于IE提供的两个api:attachEvent和deleteEvent,它们并不支持第三个参数,因此IE8以前的版本只支持事件冒泡的机制。

  

四.事件对象

  当我们触发html文档中元素的某个事件时,事件处理程序的内部就会有一个事件对象event产生,这个对象会包含和事件相关的一些信息。

  (下面说的事件对象仅限于DOM0级和DOM2级事件处理程序,IE会单独说明)

属性/方法 类型 说明
event.type String

被触发事件的类型。

比如触发button的click事件,那event.type的值就为"click"。

event.target Element

本次事件中的目标元素。

因为事件流机制的存在,当点击button时,会按照不同的顺序触发其他元素的事件,在这个过程中,被点击的button元素就是事件中的目标元素。

event.currentTarget Element

本次事件中,当前正在处理的元素。

按照事件冒泡或者捕获的顺序处理到那个元素的事件,那个元素就是当前正在处理的元素。

event.cancelable Boolean

表示是否可以取消事件的默认行为。

true:表示可以取消事件的默认行为。

event.preventDefault() Function

调用该方法可以取消事件的默认行为,但是前提是event.cancelable的值为true。

event.bubbles Boolean

表明事件是否冒泡

event.stopPropagation() Function

调用该方法可以取消事件的下一步冒泡,但前提是event.bubbles的值为true。

 

   关于事件对象event的信息,我们一个一个来实践一下。

1.event.type

<button id='btn'>点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    //事件处理程序
    console.log(event.type);
}
</script>

 

  

 

 

 

2.event.target和event.currentTarget

  

<body>
    <div id='box'>
        <p id='pbox'>
            <button id='btn'>点击</button>
        </p>
    </div>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    //事件处理程序
    console.log("btn click");
    console.log("event.target:");
    console.log(event.target);
    console.log("event.currentTarget");
    console.log(event.currentTarget);
}

var box = document.getElementById('box');
box.onclick = function(){
    //事件处理程序
    console.log("box click")
    console.log("event.target:");
    console.log(event.target);
    console.log("event.currentTarget");
    console.log(event.currentTarget);
}
</script>

  

   

  

  可以看到使用DOM0级方式添加的事件处理程序,默认的事件流机制是事件冒泡。

  即事件触发顺序有子元素button传播到父元素div。

  那这个操作中,我们点击的目标元素是button,因此event.target一直是button元素。

  而event.currentTarget随着事件触发的顺序一直在变化,触发到那个元素的事件event.currentTarget就是那个元素。

 

3.event.cancelable和event.preventDefault

  前面我们说在event.cancelable为true的前提下,可以调用event.preventDefault来阻止事件的默认行为。

  那什么是事件的默认行为呢?

  比如:

    浏览器中单击右键,出现浏览器默认的菜单栏选项;

    点击a标签会发生跳转行为;

    form表单中点击提交按钮会提交表单数据;

  接下来写一个示例。

<a id='link' href='https://www.baidu.com'>跳转</a>
<script>
var link = document.getElementById('link');
link.onclick = function(){
    //事件处理程序
    console.log("link click");
    console.log(event.cancelable);
    event.preventDefault();
}
</script>

  在这个示例中,正常情况下点击"跳转"会跳转到百度首页,但是我们在a标签的onclick事件中调用了event.preventDefault()方法阻止了a标签默认的跳转行为。

  所以我们点击"跳转"后,只会在控制台打印"link click"和event.cancelable的值,页面并不会发生跳转行为。

  

 

 4.event.bubbles和event.Propagation()

  前面第2小节中关于event.target和event.currentTarget的示例,因为默认的事件冒泡机制,导致click事件从button元素传播到了父元素div。

 

  那现在我们在事件处理程序中调用event.Propagation方法就可以阻止事件冒泡。

<body>
    <div id='box'>
        <p id='pbox'>
            <button id='btn'>点击</button>
        </p>
    </div>
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    //事件处理程序
    console.log("btn click");
    console.log(event.bubbles);
    event.stopPropagation();
}

var box = document.getElementById('box');
box.onclick = function(){
    //事件处理程序
    console.log("box click")
}
</script>

  

  

  从结果可以看到,调用event.stopPropagation()后,父元素的click方法已经成功被阻止。

  

  那这里事件对象的信息基本就总结完了,上面的示例均使用DOM0级的事件处理程序实现的,那实际上对于DOM2级的事件处理程序也是适用的。

  所以DOM2事件处理程序就不写在示例。 

 

5.IE中的事件对象

  IE中的事件对象和DOM0、DOM2中的事件对象还是有很大区别的。

  它包含的属性和方法如下:

属性/方法 类型 说明
type String 被触发事件的类型
cancelBubble Boolean

设置事件是否冒泡。

默认值为false,将其设置为true就可以取消事件冒泡。

returnValue Boolean

设置事件的默认行为。

默认值为true,将其设置为false就可以取消事件的默认行为。

srcElement Element

本次事件中的目标元素。

(同DOM1、DOM2级中的target)

  IE事件对象的这些属性和方法就不代码演示了,也比较简单。

  只是IE中使用事件对象时,需要注意下面的几点。

  (下面示例的演示,不同版本的结果使用的是IE浏览器自带的仿真工具进行的)

  首先第一点是使用DOM0级添加事件处理程序时,事件处理程序内部的事件对象event是作为window的一个属性存在的。

<button id='btn'>点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    alert(window.event == event);
    // 单独打印window.event和event,结果均是同一个对象
    // 但是只有在IE11中alert出来的结果才是true,其他版本alert均为false
}
</script>
     

 

  第二点就是在IE事件处理程序内部的this不一定等于目标元素,因此在事件处理程序内部,最好用event.srcElement来代替this。

  先测试一下DOM0级事件处理程序的结果。

<button id='btn'>点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    alert(this); 
    // IE8-IE11 打印 [object HTMLButtonElement]
    alert(event.srcElement);  
    // IE8-IE11 打印 [object HTMLButtonElement]
}

  再测试一下attachEvent和deleteEvent这两个api(IE11已经不支持这两个api了,前面已经提过)

<button id='btn'>点击</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function(){
    alert(this);
    // IE8-IE10 结果为 [object Window]
    alert(event.srcElement);
    // IE8-IE10 结果为 [object HTMLButtonElement]
})
</script>

  

  关于事件对象这里就介绍完了,一整个关于IE浏览器的测试代码写下来还是有些难受。

  到这里,有关javascript中的事件内容基本总结完了,这里呢,我们需要把前面那个通用的事件处理程序完善一下。

<script>
    var EventUtils = {
        // 添加事件
        addEvent: function(element, eventName, fn){
            if(element.addEventListener){
                element.addEventListener(eventName, fn, false);
            }else if(element.attachEvent){
                element.attachEvent('on' + eventName, fn)
            }else{
                element.eventName = fn;
            }
        },

        // 移除事件
        removeEvent: function(element, eventName, fn){
            if(element.removeEventListener){
                element.removeEventListener(eventName, fn, false);
            }else if (element.deleteEvent){
                element.deleteEvent('on' + eventName, fn);
            }else{
                element.eventName = null;
            }
        },

        // 获取事件对象
        getEvent: function(event){
            return event?event:window.event;
        },

        // 获取事件类型
        getEventType: function(event){
            return event.type;
        },

        // 获取被执行事件的目标元素
        getEventTarget: function(event){
            return event.target | event.srcElement;
        },

        // 禁用元素的默认行为
        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{ //IE8以及更低版本
                event.returnValue = false;
            }
        },

        // 阻止元素冒泡
        stopPropagation: function(event){
            if(event.stopPropagation){                    
                event.stopPropagation();
            }else{ //IE8以及更s低版本
                event.cancelable = true;
            }
        }
    }; 
</script>

 

五.实践应用——事件委托

  最后这一部分,主要是针对事件冒泡的一个应用。

  我们假设有这样一个场景:有一个商品列表,点击其中某一个商品,弹框显示商品标题。同时用户可以在商品列表添加商品。

  现在我们实现一下这个需求。

<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件委托</title>
        <style>
            li{
                cursor: pointer;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <h1>事件委托</h1>
        <div class='box'>
            <button onclick="add()">添加商品</button>
            <div class='list'>
                <h3>商品列表</h3>
                <ul>
                    <li>商品1</li>
                    <li>商品2</li>
                    <li>商品3</li>
                    <li>商品4</li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            // 遍历商品列表添加点击事件
            var liEle = document.getElementsByTagName('li');
            for(var i = 0; i<liEle.length; i++){
                var element = liEle[i];
                element.addEventListener('click', function(){
                    alert(this.innerHTML);
                })
            }

            // 添加商品
            function add(){
                var ulEle = document.getElementsByTagName('ul')[0];
                var liLength = document.getElementsByTagName('li').length;
                var newLiEle = document.createElement('li');
                newLiEle.innerHTML = "商品"+(liLength+1);
                ulEle.appendChild(newLiEle);
            }
        </script>
    </body>
</html>

  我们看一下浏览器效果。

  

  可以看到,循环li元素添加的点击事件均可以正常执行,而点击【添加商品】按钮添加的商品5,点击之后并没有click事件,因此没有弹窗显示。

  这个需求实际上可以转化为这样的应用场景:事件添加个数不确定。

  那么根据前面提说的事件流、事件冒泡和事件对象,我们很容易就能想到解决办法:

    将click事件添加到父元素ul元素上,利用事件冒泡和event.target实现弹窗。

  这个办法我们被称为事件委托机制。

  下面我们代码实现一下。

  (修改代码:27行-32行)

 1 <html>
 2     <head>
 3         <meta charset="utf-8"/>
 4         <title>事件委托</title>
 5         <style>
 6             li{
 7                 cursor: pointer;
 8                 padding: 20px;
 9             }
10         </style>
11     </head>
12     <body>
13         <h1>事件委托</h1>
14         <div class='box'>
15             <button onclick="add()">添加商品</button>
16             <div class='list'>
17                 <h3>商品列表</h3>
18                 <ul>
19                     <li>商品1</li>
20                     <li>商品2</li>
21                     <li>商品3</li>
22                     <li>商品4</li>
23                 </ul>
24             </div>
25         </div>
26         <script type="text/javascript">
27             // 将click事件添加到父元素ul元素上,利用事件冒泡和event.target实现弹窗
28             var ulEle = document.getElementsByTagName('ul')[0];
29             ulEle.addEventListener('click', function(){
30                 var target = event.target;
31                 alert(target.innerHTML);
32             })
33            
34             // 添加商品
35             function add(){
36                 var ulEle = document.getElementsByTagName('ul')[0];
37                 var liLength = document.getElementsByTagName('li').length;
38                 var newLiEle = document.createElement('li');
39                 newLiEle.innerHTML = "商品"+(liLength+1);
40                 ulEle.appendChild(newLiEle);
41             }
42         </script>
43     </body>
44 </html>

  

  

  

  完结!!!

  如果觉得有用的话,点个赞鼓励一下~

  转载请先注明出处~

 

 最近作者新开通了一个微信公众号。

 微信公众号会分享一些自己日常的东西,包括个人总结呀,吸猫日常呀,同时也会分享一些博客上的前端技术文章。

  

 

 欢迎大家扫码关注~

加载全部内容

相关教程
猜你喜欢
用户评论