异步之事件

最新推荐文章于 2024-01-03 16:56:25 发布

richest_qi

最新推荐文章于 2024-01-03 16:56:25 发布

阅读量261

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/106891426

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

添加事件处理程序

有三种方式。

html指定事件处理程序

<body onclick="sayHi()">
    hello world
    <script>
        function sayHi(){
            console.log('hi~');
        }
    </script>
</body>

通过window.event访问事件对象

DOM0级事件处理程序

<body>
    hello world
    <script>
    document.body.onclick = function(){
        console.log('hi~');
    }
    </script>
</body>

事件处理程序的第一个参数就是事件对象，当然也可以通过window.event访问事件对象

DOM2级事件处理程序

<body>
    hello world
    <script>
    function sayHi(){
        console.log('hi~')
    }
    document.body.addEventListener('click',sayHi,false);
    </script>
</body>

事件处理程序的第一个参数就是事件对象，当然也可以通过window.event访问事件对象

跨浏览器添加事件处理程序

        var EventUtil = {
            addHandler:function(elm,type,handler){
                if(elm.addEventListener){
                    elm.addEventListener(type,handler,false);
                }
                // else if(elm.attachEvent){
                //     elm.attachEvent('on'+type,handler);
                // }
                else {
                    elm['on'+type] = handler;
                }
            },
            removeHandler:function(elm,type,handler){
                if(elm.removeEventListener){
                    elm.removeEventListener(type,handler,false);
                }
                // else if(elm.detachEvent){
                //     elm.detachEvent('on'+type,handler);
                // }
                else {
                    elm['on'+type] = null;
                }
            },
            getEvent:function(event){
                return window.event || event;
            },
            preventDefault:function(event){
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue = false;
                }
            },
            stopPropagation:function(event){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            }
        }

事件流

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li id='sz'>深圳</li>
        <li id='nj'>南京</li>
        <li id='hz'>杭州</li>
    </ul>
    <script>
        function htmlHandler(e){
            console.log(e.target,e.currentTarget)
        }
        function bodyHandler(e){
            console.log(e.target,e.currentTarget)
        }
        function ulHandler(e){
            console.log(e.target,e.currentTarget)
        }
        function liHandler(e){
            console.log(e.target,e.currentTarget)
        }
        document.documentElement.onclick = htmlHandler;
        document.body.onclick = bodyHandler;
        document.querySelector('ul').onclick = ulHandler;
        document.querySelector('li#sz').onclick=liHandler;
    </script>
</body>
</html>

在这里插入图片描述
所以，事件对象的target属性和currentTarget属性的区别很明显，

target
事件的目标对象
currentTarget
处理当前事件的对象

说到这儿，就不得不来了解下事件委托了。

事件委托

    <ul>
        <li id='sz'>深圳</li>
        <li id='nj'>南京</li>
        <li id='hz'>杭州</li>
    </ul>

不委托

        var li0 = document.querySelector('#sz');
        var li1 = document.querySelector('#nj');
        var li2 = document.querySelector('#hz');

        const li0Handler = function(e){
            console.log(e.type);
        }
        const li1Handler = function(e){
            console.log(e.target);
        }
        const li2Handler = function(e){
            console.log(e.target.textContent);
        }

        li0.onclick = li0Handler;
        li1.onclick = li1Handler;
        li2.onclick = li2Handler;

这时，事件对象的target属性值和currentTarget属性值是相同的

委托

        var ul = document.querySelector('ul');
        const ulHandler = function(e){
            switch(e.target.id){
               case 'sz': console.log(e.type);break;
               case 'nj': console.log(e.target);break;
               case 'hz': console.log(e.target.textContent);break;
            }
        }
        ul.onclick = ulHandler;

事件委托，就是发生在子元素上的事，交给父元素或者祖父元素或者更外层的元素处理。
这时，target和currentTarget就不相等了。
在这里插入图片描述
事件委托，省时省空间，何乐不为!

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步之事件

添加事件处理程序有三种方式。html指定事件处理程序<body onclick="sayHi()"> hello world <script> function sayHi(){ console.log('hi~'); } </script></body>DOM0级事件处理程序<body> hello world <scrip
复制链接

扫一扫

专栏目录