netnr 2018-01-18 15:49:06 2022-04-11 14:39:51 👁788 💬0

方法

//事件添加处理程序
function on(type, callback, element) {
    if (element.addEventListener) {
        element.addEventListener(type, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, callback["__eid"] = function () {
            callback.apply(element, arguments);
        });
    } else {
        element["on" + type] = callback
    }
};

//移除事件的处理程序
function off(type, callback, element) {
    if (element.removeEventListener) {
        element.removeEventListener(type, callback, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, callback["__eid"]);
    }
};

示例

var ele = document;

//添加匿名事件
on('click', function () {
    console.log("指向是否等于window");
    console.log(this == window);
}, ele);

//绑定匿名一次性事件
on('click', function () {
    console.log("仅输出一次");
    off('click', arguments.callee, ele);
}, ele);

//绑定(解绑)
function outmsg() {
    console.log("TODO");
    console.log(this);
    console.log(this == window);
}
on('click', outmsg, ele);
//off('click', outmsg, ele);

了解一些概念

  • 变量为引用函数
  • 不带括号的函数名是访问函数指针,非调用函数
  • 函数名本身就是变量
  • 函数内部属性 argumentscallee 属性指向 arguments 对象的函数(解耦,内部调用 )

链接