1. Кроссплатформенные события
Что такое кроссплатформенное событие? То есть одно и то же событие выполняется в разных браузерах, и используемые методы разные.
Что такое объект Eventutil? Какова его функция? То есть контейнер, который объединяет все функции, связанные с событиями, чтобы облегчить управление объектами события, и у него нет атрибутов. В основном это касается бега между событиями DOM и событиями IE, чтобы сделать их как можно более похожими.
Давайте посмотрим на свойства объекта и методы между DOM и IE для сравнения (между ними есть только различные свойства и методы). Есть пять основных моментов:
Свойства и методы DOM IE Свойства и методы
Ключевой код charcode
Предотвратить returnValue = false
Связанный
StopPropation CancelBuble = true
Target srcobj
Давайте посмотрим на это с небольшой демонстрацией, которая может решить кроссплатформенную задачу совместимости событий:
<html> <head> <tite> eventutil </title> <script eventtype = "text/javascript"> var eventutil = {// прослушивание события addlistener: function (obj, eventtype, fn) {if (obj.addeventListener) {obj.addeventListener (eventtype, fn, fn, false); } else if (obj.attachevent) {obj.attachevent ('on' + eventtype, fn); } else {obj ['on' + eventType] = fn; }}, // возвращать объект события getEvent: function (event) {return event || window.event; // вернуть событие? Событие: window.event; }, // возвращать объект целевого события getTarget: function (event) {return event.target || Event.srcobj; }, предотвратить: function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}, removeListener: function (obj, eventtype, fn) {if (obj.removeeventListener) {obj.removeeventListener (eventtype, fn, false); } else if (obj.deattachevent) {obj.detachevent (eventtype, fn); } else {obj ['on' + eventtype] = null; }}, StopPropagation: function (event) {if (event.stoppropagation) {event.stoppropagation (); } else {event.cancelbubble = true; }}}; </script> </head> <body> <input eventtype = "button" value = "click me" id = "btn"/> <p> event </p> <a> Привет слов! var target = eventutil.getTarget (event); оповещение («Меня зовут Кок»); оповещение (Event.EventType); предупреждение (цель); Eventutil.stoppropagation (событие); } function getBodyListen (event) {alert ("Нажмите Body"); } function getLinkListen (event) {alert ("предотвратить событие по умолчанию"); var event = eventutil.getevent (event); Eventutil.preventDefault (Event); } window.onload = function () {var btn = document.getobjbyid ("btn"); var link = document.getobjsbytagname ("a") [0]; EventUtil.addlistener (btn, "click", addbtnlisten); eventutil.addlistener (document.body, "click", GetbodyListen); EventUtil.addlistener (ссылка, "Click", GetLinkListen); } </script> </body> </html>Приведенный выше метод может решить кроссплатформенную проблему событий. Затем давайте посмотрим на свойства Charcode.
Во -первых, определите новый метод для Eventutil, Formatevent, принимает параметр, то есть объект события.
eventutil.formatevent = function (event) {if (isie && iswin) --- Объяснение задач браузера {event.charcode = (event.type == "keypress")? Event.keycode: 0; Event.Eventphase = 2;-указывает фазу пузырька, т.е. только поддерживает фазу пузырька} return Event;}2. О пузырящей цели и CurrentTarget
Цель находится на целевой стадии потока событий; CurrentTarget находится на стадии захвата, мишени и пузырька потока событий. Только когда поток событий находится на целевой стадии, два указателя одинаковы, и когда он находится на этапах захвата и пузырьков, цель указывает на нажиманный объект, а CurrentTarget указывает на родитель текущего события.
<div id = "Outter" style = "founke:#099"> <p> Я являюсь целевым div </p> ---- Нажмите эту часть, вывод: e.target.tagname: p || e.currenttarget.tagname: div <p id = "inner" style = "founal:#9c0"> Я являюсь целью p </p> --- Нажмите эту часть, вывод: e.target.tagname: p || e.currenttarget.tagname: div <br> --- Нажмите эту часть, вывод: e.target.tagname: div || e.currenttarget.tagname: div </div> // Посмотрите на столбец второго изменения: <div id = "uper" style = "founke:#099"> <div> Я являюсь целевым div </div> ---- Нажмите эту часть, вывод: e.target.tagname: div || e.currenttarget.tagname: div <p id = "inner" style = "founal:#9c0"> Я являюсь целью p </p> --- Нажмите эту часть, вывод: e.target.tagname: p || e.currenttarget.tagname: div <br> --- Нажмите эту часть, вывод: e.target.tagname: div || e.currenttarget.tagname: div </div>
function getObj (id) {return document.getElementById (id); } функция addEvent (obj, event, fn) {if (window.attachevent) {obj.attachevent ("on" + event, fn); } else if (window.addeventListener) {obj.addeventListener (event, fn, false); }} тест функции (e) {alert ("e.target.tagname:" + e.target.tagname + "/n e.currenttarget.tagname:" + e.currenttarget.tagname); } var outter = getObj ("Overt"); var inner = getObj ("inner"); // addEvent (inner, «Щелкни», тест); addEvent (внешний, «клик», тест);3. разница между IE и DOM
Домик
Получить целевое событие.
Получить event Code Code.Charcode Event.KeyCode
Заблокировать событие поведения по умолчанию.
Bubble Event.stoppropagation () event.cancelbubble = true
Что касается блокировки поведения по умолчанию, например, когда пользователь щелкнет правой кнопкой мыши, если вы не хотите, чтобы меню появилось, вы можете использовать поведение блокировки по умолчанию:
document.body.oncontextmenu = function (event) {if (isie) {var oevent = window.event; oevent.returnValue = false; // это также может быть возвращено ложным напрямую; Предотвратить поведение по умолчанию} else {oevent.preventdefault (); }}4. Мероприятие мыши
<p> Используйте свою мышь, чтобы щелкнуть и дважды щелкнуть «Красная квадрат» </p> <div onmouseover = "handleevent (event)" onmouseout = "handleevent (event)" onmousedown = "handleevent (event)" onmouseup = "handleevent (event)" onclick = "handleevent (event)" onddclick = "handleevent (event)" Id = "div1> </preteaer </precare div1 </precare div1 </preteae (Event)" div1> "div1 </preteae (Event)" </pretevent (event) "</preteae dive id = "txt1" Rows = "5" Cols = "45"> </textARea> </p> <!-обнаружение событий клавиатуры-> <p> <input type = "text" id = "textbox" onkeydown = "ance (event)" onkeypress = "event)" onkeyup = "event)"> </p> <p> <p> <p> <ptextArea) Cols = "45"> </textarea> </p>
Файл JS выглядит следующим образом:
Функция handleevent (event) {var otext = document.getElementById ('txt1'); otext.value+= "/n"+event.type; otext.value+= "/n target -+(event.srcelement || event.target) .id; otxt.value+= "/n at ("+event.clientx+","+event.clienty+") в клиенте"; otext.value+= "/n кнопка вниз"+event.button; var arrkeys = []; Otext.value+= "/n insulityTarget IS"+event.RelatedTarget.tagname; //event.RelatedTarget.tagName может определить источник и источник мыши} handle (event) {var oText2 = document.getElementById ('txt2'); otext2.value+= "/n"+event.type; var arrkeys = []; if (event.shiftkey) {arrkeys.push ("shift");} if (event.ctrlkey) {arrkeys.push ("ctrl");} if (event.altkey) {arrkeys.push ("alt");} otext2.value+= "/n -keydowВыше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.