Общие методы связывания событий: традиционное связывание, метод связывания W3C и метод связывания IE . Однако для нас важно в реальной разработке, так это потребовать общего метода связывания кросс-браузера. Если мы будем искать в Интернете, мы найдем много методов. Вот несколько более известных методов:
Перед началом семестра мы должны обсудить, какие требования должен соответствовать хорошему методу addEvent ():
а Один и тот же дескриптор событий, который поддерживает один и тот же элемент, может привязать несколько функций прослушивания;
беременный Если одна и та же функция зарегистрирована несколько раз на одном и том же направлении события одного и того же элемента, все регистрации после первой регистрации будут игнорированы;
в Это в корпусе функции должно указывать на узел, который обрабатывает событие (например, узел, который в настоящее время использует обработчик событий);
дюймовый Порядок выполнения функции слушания должен быть выполнен в связанном порядке;
эн. Не используйте событие = событие || window.event; в телефонах, чтобы нормализовать объект события;
1. Функция addEvent (), написанная Джоном Ресигом
функция addEvent (obj, type, fn) {if (obj.attachevent) {obj ['e'+type+fn] = fn; obj [type+fn] = function () {obj ['e'+type+fn] (window.event);} obj.attachevent ('on'+type, obj [type+fn]); } else obj.addeventListener (type, fn, false); } function removeEvent (obj, type, fn) {if (obj.detachevent) {obj.detachevent ('on'+type, obj [type+fn]); obj [type+fn] = null; } else obj.removeeventListener (type, fn, false); }Удивительно, что эта функция настолько проста и легко понять. Тогда нам все еще нужно посмотреть на пять вышеупомянутых требований:
Удовлетворен первым пунктом;
Должно быть, я был доволен третьим и пятым очками;
Для второго пункта он не удовлетворен, потому что addeventListener () игнорирует дубликатную регистрацию, в то время как AttedEvent () не;
Однако четвертая точка не выполняется, поскольку стандарт DOM не определяет порядок функций обработки времени для вызова объекта, поэтому не следует воспринимать как должное, что они называются в порядке регистрации.
Но эта функция все еще очень хорошая функция.
2. Функция addEvent (), написанная Дином Эдвардом
Функция addEvent (element, type, Handler) {if (! Handler. $$ guid) Handler. $$ guid = addEvent.guid ++; if (! element.events) element.events = {}; var Handlers = element.Events [type]; if (! Handlers) {Handlers = element.events [type] = {}; if (element ["on" + type]) {Handlers [0] = element ["on" + type]; }} Handlers [Handler. $$ GUIN] = Handler; element ["on" + type] = handleevent;} addevent.guid = 1; функция removeEvent (element, type, handler) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }} функция handleevent (event) {var returnValue = true; Event = Event || FixEvent (window.event); var Handlers = this.events [event.type]; для (var i in handlers) {this. $$ handleevent = Handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} return returnValue;}; function fixevent (event) {event.preventDefault = fixeVent.preventDefault; event.stoppropagation = fixevent.stoppropagation; return Event;}; fixEvent.preventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelbubble = true;};Эта функция использует традиционные методы привязки , поэтому она работает во всех браузерах, не вызывая утечки памяти.
Но для первоначально предложенных 5 баллов функция удовлетворяет только первым четырем точкам. Только последний пункт не выполняется, потому что в JavaScript порядок выполнения операторов/in не указан в порядке присвоения, хотя большую часть времени выполняется в ожидаемом порядке, поэтому порядок этого оператора может отличаться в разных версиях или реализациях JavaScript.
3. Улучшение функции Dean Edward AddEvent ()
Array.prototype.indexof = function (obj) {var result = -1, length = this.length, i = длина - 1; for (; i> = 0; i--) {if (this [i] == obj) {result = i; перерыв; }} return result;} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.append = function (obj, nodup) {if (! (nodup && this.contains (obj))) {this.length] = obj; }} Array.prototype.remove = function (obj) {var index = this.indexof (obj); if (! index) return; вернуть this.splice (index, 1);}; function addEvent (element, type, fun) {if (! element.events) element.events = {}; var Handlers = element.Events [type]; if (! Handlers) {Handlers = element.Events [type] = []; if (element ['on' + type]) {Handlers [0] = element ['on' + type]; }} handlers.append (развлечение, true) element ['on' + type] = harderevent;} функция removeEvent (element, type, fun) {if (element.events && element.events [type]) {element.events [type] .Remove (fun); }} функция handleevent (event) {var returnValue = true, i = 0; Event = Event || FixEvent (window.event); var Handlers = this.events [event.type], length = Handlers.length; for (; i <length; i ++) {if (Handlers [i] .call (this, event) === false) {returnValue = false; }} return returnValue;} function fixEvent (event) {event.preventDefault = fixEvent.preventDefault; event.stoppropagation = fixevent.stoppropagation; return Event;} fixEvent.preventDefault = function () {this.returnValue = false;}; fixEvent.stopPropagation = function () {this.cancelbubble = true;};Эта функция является моим улучшением функции Dean Edward AddEvent (), которая полностью соответствует 5 начальным требованиям. Я надеюсь, что это будет полезно для каждого обучения. Спасибо за чтение.