js 添加自定义监听器

最新推荐文章于 2024-04-11 19:26:38 发布

IT~少年人

最新推荐文章于 2024-04-11 19:26:38 发布

阅读量2.5k

点赞数 1

分类专栏：原生javascript

本文链接：https://blog.csdn.net/qq_43634982/article/details/107706960

版权

原生javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义监听器</title>
</head>

<body>
    <div>
        <textarea type="text" id="msg_ipt"></textarea>
        <button id="send_msg">发送消息</button>
    </div>
    <div>
        <h6>收到消息：</h6>
        <ul id="msg">

        </ul>
    </div>
    <script>
        (function () {
            function Message() {
                var ipt_msg = document.getElementById('msg_ipt'),
                    btn_msg = document.getElementById('send_msg'),
                    p_msg = document.getElementById('msg')

                this.init = function () {
                    document.addEventListener('messageSend', function (e) {
                        var fragment = document.createDocumentFragment(),
                            li = document.createElement('li')
                        li.innerText = e.detail.value;
                        fragment.appendChild(li);
                        p_msg.append(fragment)
                    }, false)
                    btn_msg.onclick = function () {
                        document.dispatchEvent(new CustomEvent('messageSend', {
                            detail: {
                                value: ipt_msg.value
                            }
                        }))
                    }
                }

                this.destory = function () {
                    document.removeEventListener('messageSend', function () {
                        console.log('清除了监听')
                    }, false)
                }
                this.init()
            }
            var message = new Message()
            window.onbeforeunload = function () {
                try {
                    message.destory()
                    message = null
                } catch (error) {

                }
            }
        })()
    </script>
</body>

</html>

IT~少年人

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 添加自定义监听器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义监听器</title></head><body> <div>
复制链接

扫一扫