为了账号安全,请及时绑定邮箱和手机立即绑定

js监听div标签上面的自定义属性

2019.08.17 16:37 259浏览

好久没写博客了,可能是近期遇到了瓶颈没有什么东西可以写了,而且最近在换工作也没什么时间。
现在工作换好了,于是更多的可能会慢慢的向原生js方向去。

直接上代码吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #app{
            height: 100px;
            width: 100px;
            background: red
        }
        #root{
            height: 100px;
            width: 100px;
            background: black
        }
        #show{
            height: 100px;
            width: 100px;
            background: yellow
        }
    </style>
</head>
<body>
    <div id="app" show="showFn" hide="hideFn"></div>
    <div id="root"></div>
    <div id="show"></div>
    <script>
        // 这是调用的
        function hideFn() {
            console.log('消失了');
        }
        function showFn() {
            console.log('显示了');
        }
        document.getElementById('app').addEventListener('hide', function() {console.log('又监听到了')}, false);
    </script>
    <script>
        //这是封装的
        // eval('fn')获取到函数名的字符串然后转成函数
        //hide和show对应div上的属性名
        document.getElementById('root').addEventListener('click',function() {//消失
            var arr = document.getElementById('app').attributes
            Object.keys(arr).forEach((key,index) => {//拿到属性和对应的值
                if (arr[key].name == 'hide') {
                    var hide = new Event('hide');//dispatchEvent需要传入一个type为event的参数
                    document.getElementById('app').style.display = "none"
                    document.getElementById('app').addEventListener('hide', eval(arr[key].nodeValue), false);//监听hide事件
                    document.getElementById('app').dispatchEvent(hide);//派发hide事件
                }
            });
        })
        document.getElementById('show').addEventListener('click',function() {//显示
            var arr = document.getElementById('app').attributes
            Object.keys(arr).forEach((key,index) => {
                if (arr[key].name == 'show') {
                    var show = new Event('show');
                    document.getElementById('app').style.display = "block"
                    document.getElementById('app').addEventListener('show', eval(arr[key].nodeValue), false);
                    document.getElementById('app').dispatchEvent(show);
                }
            });
        })
    </script>
</body>
</html>


主要的api是addEventListener监听事件dispatchEvent派发事件
通过这种方式来实现监听和执行div属性上绑定的事件

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消