“人生不止眼前的苟且 还有诗和远方。”
或许是工作后迷茫的过久想让自己沉淀下来,才决定开始写写东西。开始步入正题,一种模式代码写久了就会让自己厌烦。不知道大家是不是和我有同样的感觉。好像从开始做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来进行绑定
}
}
}