小微型库(3.绑定on和解绑off)

大家好，又见面了，我是你们的朋友全栈君。

on绑定

$(“div”).on(“click mouseenter click.Liang”, function(){});

off解绑

$(“div”).off();

$(“div”).off(“click.sjl”);

//对于_addEventFn(){}函数的解释
//events属性是以下的格式
    div.events = {
        click : {
            sjl : function(){
                console.log();
            },
            yl : function(){

            },
            anonymous : [fn, fn, fn]  //存放没有自定义名字的事件函数值
        },
        mouseenter : {
            anonymous : [fn, fn, fn],
            sjl : function(){
                
            }，
            yl : function(){
                
            }
        },
    }
复制代码

//阻止默认行为的兼容
if(!Event.prototype.preventDefault){
Event.prototype.preventDefault = function(){
window.event.returnValue = false;
};
}
//阻止冒泡的兼容
if(!Event.prototype.stopPropagation){
Event.prototype.stopPropagation = function{
window.event.cancelBubble = true;
};
}
//将添加到dom身上的事件函数存储起来的方法
function _addEventFn(data){
//dom:节点  type:事件数组  fn:事件函数
//之前从来没绑定过任何事件,把它变成一个对象
if(typeof data.dom.events === "undefined"){
data.dom.events = {};
}
//之前没有绑定过相同类型的事件
if(typeof data.dom.events[data.type[0]] === "undefined"){
data.dom.events[data.type[0]] = {};
data.dom.events[data.type[0]].anonymous = [];
//anonymous是一个数组,存放匿名函数
}
//type是数组,类似["mouseenter", "sjl"] 或者["click"]
//判断有没有自定义事件的名字  存事件函数
if(data.type[1] === undefined){
//如果为undefined,说明是匿名函数,存放到anonymous属性对应的数组中
data.dom.events[data.type[0]].anonymous.push(data.fn);
}else{
data.dom.events[data.type[0]][data.type[1]] = data.fn;
// data.dom.events[data.type[0]]代表事件 例如click
}
}
//兼容removeEventListener
function _removeEvent(dom, type, fn, bool){
//v, key1, v.events[key1].anonymous[j], false
if(dom.removeEventListener){
//主流
dom.removeEventListener(type, fn, !!bool);
}else{
//ie
dom.detachEvent("on"+type, fn);
}
}
//原型里的方法
Liang.prototype = function(){
constructor : Liang,
init : function(){}, //(1)
html : function(){}, //(2)
//事件绑定
on : function(eventType, fn){
//非字符串不做操作
if(typeof eventType !== "string") return;
var arr = eventType.trim().split(/\s+/);
for(var i = 0, len = this.length; i < len; i++){
(function(i, that){
//that当前jq对象中的元素
for(var j = 0, len = var.lenght; j < len; j++ ){
var type = arr[j].split(/\./),
eventFnName = null;
if(type[0] === "mousewheel"){
//需要判断火狐及其他浏览器的事件
function _eventWheelFn(e){
var dir = e.wheelDelta / 120 || -e.detail / 3;
fn.call(that, e, dir) === false && e.preventDefault();
}
type[0] = (that.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
eventFnName = _eventWheelFn;
}else{
function _eventFn(e){
e = e || window.event;
fn.call(that, e) === false && e.preventDefault;
}
eventFnName = _eventFn;
}
that.addEventListener ? 
that.addEventListener(type[0], eventFnName, false) :
that.attachEvent("on"+type[0], eventFnName);
//存储对应事件函数
_addEventFn({
dom : that,
type : type,
fn : eventFnName
});
}
}(i, this[i]))
}
return this;
},
//事件解绑
off : function(){
if(typeof eventType === "undefined"){
//解绑所有事件
Liang.each(this, function(v){
// v 当前进来的元素
for(var key1 in v.events){
// key1 是事件类型的名字 例如 click mouseenter
for(var key2 in v.events[key1]){
// key2 是事件类型对象中自定义的名字 例如 sjl
if(Liang.type(v.events[key1][key2]) === "function"){
//给自定义名字的事件解绑函数
_removeEvent(v, key1, v.events[key1][key2],false);
}else{
//给anonymous数组中的函数解绑
var len = v.events[key1].anonymous.length;
for(var j = 0; j < len; j++){
//解绑anonymous数组内的函数
_removeEvent(v, key1, v.events[key1].anonymous[j], false);
}
}
}
}
v.events = {}; //清空events里所有数据
});
}else if(typeof eventType === "string"){ //例如 "click.yl mouseenter.sjl"
var arr = eventType.trim().split(/\s+/); //["click.yl", "mouseenter.sjl"]
//判断输入的为[""],则不作操作
if(arr.toString() === "") return this;
//对事件名数组的遍历
for(var i = 0, len = arr.length; i < len; i++){
var type = arr[i].split(/\./); //["click","yl"],["mouseenter","sjl"] 
//遍历实例对象,取到元素,解绑元素身上对应的事件
Liang.each(this, function(v){
//判断是否火狐,修改对应的事件名
if(type[0] === "mousewheel"){
//判断滚动事件是否在火狐或者主流浏览器执行
type[0] = (v.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
}
if(type.length > 1){
//解绑自定义名的事件函数
_removeEvent(v, type[0], v.events[type[0]][type[1]], false);
delete v.events[type[0]][type[1]];
}else{
//解绑同类型事件
//解绑对应事件的所有匿名事件 例如$("div").off("click")
for(var j = 0, len = v.events[type[0]].anonymous.length; j < len; j++){
_removeEvent(v, type[0], v.events[type[0]].anonymous[j], false);
}
//解绑该事件类型中有名的 例如$("div").off("click.yl")
for(var k in v.events[type[0]]){
// k是自定义属性名 sjl yl  //判断在不在数组的原型上.false则表示不在,说明是function,取反
if(!(v.events[type[0]][k] instanceof Array)){
//自定义名字的事件属性值
_removeEvent(v, type[0], v.events[type[0]][k], false);
}
}
delete v.events[type[0]];
}
});
}
}
},
}
复制代码