H5-多事件绑定

最新推荐文章于 2024-04-12 08:13:50 发布

小图

最新推荐文章于 2024-04-12 08:13:50 发布

阅读量2.4k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/xiaotuwy/article/details/50589805

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

“人生不止眼前的苟且还有诗和远方。”

或许是工作后迷茫的过久想让自己沉淀下来，才决定开始写写东西。开始步入正题，一种模式代码写久了就会让自己厌烦。不知道大家是不是和我有同样的感觉。好像从开始做H5开始，在触发节点事件的时候都是用$(id/class).live(eventType,function(){});这种方式。重复性很高，有时候一个页面就有三四个差不多的函数。今天打算换一种方式来绑定事件。闲话少说，直接上代码。

一：index.html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="event.js"></script>
</head>
<style>
    .item{margin:0 auto 1rem;width:40%;height:2.5rem;font-size:1.5rem;line-height:2.5rem;text-align:center;border-radius: 0.5rem;border:1px solid #e6e6e6;background-color:#4991fd;}
</style>
<script>
    $(function(){
        var button1 = {//定义的事件变量
            template: '.button1',//触发事件的节点
            events:{
                type:'click',//事件类型
                fn:function(){//事件被触发后执行的动作
                    alert('class button1');
                }
            }
        },button2 = {
            template: '.button2',
            events:{
                type:'touchend',//touch事件只有在app端可以被触发，在做移动端的开发的时候建议用touch事件来代替click事件。因为click在被触发的时候有300ms的延时
                fn:function(){
                    alert('class button2');
                }
            }
        },button3 = {
            template: '#button3',
            events:{
                type:'click',
                fn:function(){
                    alert('id button3');
                }
            }
        };
        var _event=new event();
        _event.push(button1);//将事件放入数组里
        _event.push(button2);
        _event.push(button3);
        _event._init();
    });
</script>
<body>
<div class="button1 item" οnclick="" style="margin-top:4rem;">Button1</div>
<div class="button2 item" οnclick="">Button2</div>
<div id="button3" class="item" οnclick="">Button3</div>
</body>
</html>

二：event.js code

function event(){};
event.prototype={//用原型链的方式来进行类的定义
    constructor:event,
    eventstack:[],
    _init:function(){
        this._bind(this.eventstack);
    },
    push:function(data){
        this.eventstack.push(data);//将要触发的事件来压入数组
    },
    _bind:function(eventstack){
        for(var i= 0,len=eventstack.length;i<len;i++){
            var event=eventstack[i];
            console.log(event.template+'|'+event.events['type']+'|'+event.template+'|'+event.events['fn']);
            $(event.template).on(event.events['type'],event.events['fn']);//用on方法进行事件绑定，也可以用live、delegate、trigger来进行绑定
        }
    }
}

小图

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5-多事件绑定

“人生不止眼前的苟且还有诗和远方。” 或许是工作后迷茫的过久想让自己沉淀下来，才决定开始写写东西。开始步入正题，一种模式代码写久了就会让自己厌烦。不知道大家是不是和我有同样的感觉。好像从开始做H5开始，在触发节点事件的时候都是用$(id/class).live(eventType,function(){});这种方式。重复性很高，有时候一个页面就有三四个差不多的函数。今天打算换一
复制链接

扫一扫