1. Cross-platform events
What is cross-platform event? That is, the same event is executed on different browsers, and the methods used are different.
What is an EventUtil object? What is its function? That is, a container that combines all the functions related to events to facilitate the management of event objects, and it has no attributes. It mainly deals with the running-in between DOM events and IE events to make them as similar as possible.
Let’s take a look at the object properties and methods between DOM and IE to compare (there are only the different properties and methods between the two). There are five main points:
DOM properties and methods IE properties and methods
charcode keycode
preventDefault returnValue=false
relatedTarget fromobj|toobj
stopPropation cancelBuble=true
target srcobj
Let's take a look at it with a small demo, which can solve the cross-platform compatibility problem of events:
<html><head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { // Listen to event addListener: function(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + eventType, fn); } else { obj['on' + eventType] = fn; } }, //Return the event object getEvent: function(event) { return event || window.event; //return event ? event : window.event; }, //Return the target event object getTarget: function(event) { return event.target || event.srcobj; }, preventDefault: 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>Hello word!</a> <script eventType="text/javascript"> function addBtnListen(event) { var event = eventUtil.getEvent(event); var target = eventUtil.getTarget(event); alert("my name is kock"); alert(event.eventType); alert(target); eventUtil.stopPropagation(event); } function getBodyListen(event) { alert("click body"); } function getLinkListen(event) { alert("prevent default event"); 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(link, "click",getLinkListen); } </script></body></html>The above method can solve the cross-platform issue of events. Next, let’s take a look at the properties of charCode.
First, define a new method for eventUtil, formatEvent, accepts a parameter, that is, the Event object.
eventUtil.formatEvent=function(event){ if(isIE&&isWin)---Detection of browser problems{ event.charCode=(event.type=="keypress")?event.keycode:0; event.eventphase=2;--Indicates the bubbling phase, IE only supports the bubbling phase} return event;}2. About the bubbling target and currentTarget
target is in the target stage of the event stream; currentTarget is in the capture, target and bubble stage of the event stream. Only when the event stream is in the target stage, the two pointers are the same, and when it is in the capture and bubble stages, the target points to the clicked object and the currentTarget points to the parent of the current event.
<div id="outer" style="background:#099"> <p>I am the target div</p> ----Click this part, output: e.target.tagName : P || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">I am the target p</p> ---Click this part, output: e.target.tagName : P || e.currentTarget.tagName : DIV <br> ---Click this part, output: e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>//Look at the second change column: <div id="outer" style="background:#099"> <div>I am the target div</div> ----Click this part, output: e.target.tagName : DIV || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">I am the target p</p> ---Click this part, output: e.target.tagName : P || e.currentTarget.tagName : DIV <br> ---Click this part, output: e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>
function getObj(id){ return document.getElementById(id); } function addEvent(obj, event, fn){ if(window.attachEvent) { obj.attachEvent("on" + event, fn); } else if(window.addEventListener) { obj.addEventListener(event, fn, false); } } function test(e){ alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = getObj("outer"); var inner = getObj("inner"); //addEvent(inner, "click", test); addEvent(outer, "click", test);3. The difference between IE and DOM
DOMIE
Get the target event.target event.srcElement
Get the character code event.charCode event.keyCode
Block the default behavior event.prevetDefault() event.returnvalue=false
bubble event.stopPropagation()event.cancelBubble=true
Regarding blocking default behavior, for example, when the user right-clicks the mouse, if you don't want the menu to pop up, you can use blocking default behavior:
document.body.oncontextmenu=function(event){ if(isIE) { var oEvent=window.event; oEvent.returnValue=false; //It can also be returned false directly; prevent the default behavior} else { oEvent.preventDefault(); }}4. Mouse Event
<p>use your mouse to click and double click the red square</p><div onmouseover="handleEvent(event)" onmouseout="handleEvent(event)" onmousedown="handleEvent(event)" onmouseup="handleEvent(event)" onclick="handleEvent(event)" ondblclick="handleEvent(event)" id="div1" > </div><p><textarea id="txt1" rows="5" cols="45"></textarea></p><!--Detection of keyboard events--><p><input type="text" id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p><p><textarea id="txt2" rows="10" cols="45"></textarea></p>
The js file is as follows:
function handleEvent(event){ var oText=document.getElementById('txt1'); oText.value+= "/n"+event.type; oText.value+= "/n target is "+(event.srcElement||event.target).id; oText.value+="/n at ("+event.clientX+","+event.clientY+") in the client"; oText.value+="/n button down is"+event.button; var arrKeys=[]; oText.value+="/n relatedTarget is"+event.relatedTarget.tagName; //event.relatedTarget.tagName can determine the source and source of the mouse}function 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 keydown is "+arrKeys;}The above is all about this article, I hope it will be helpful to everyone's learning.