// Introduced in DOM Level 2: interface EventTarget { // Modified in DOM Level 3: // Registers an event listener on the EventTarget: void addEventListener (DOMString type, EventListener? listener, optional boolean useCapture = false); void removeEventListener(DOMString type, EventListener? listener, optional boolean useCapture = false); boolean dispatchEvent(Event event); };
Event.target: topmost event target UIEvent.view: defaultView MouseEvent.screenX: value based on the pointer position on the screen MouseEvent.screenY: value based on the pointer position on the screen MouseEvent.clientX: value based on the pointer position within the viewport MouseEvent.clientY : value based on the pointer position within the viewport MouseEvent.altKey: true if 'Alt' modifier was active, otherwise false MouseEvent.ctrlKey: true if 'Control' modifier was active, otherwise false MouseEvent.shiftKey: true if 'Shift' modifier was active, otherwise false MouseEvent.metaKey: true if 'Meta' modifier was active, otherwise false MouseEvent.button: value based on current button pressed MouseEvent.buttons: value based on all buttons current depressed, 0 if no buttons pressed MouseEvent.relatedTarget: null
<script> function myfunc(x, s) { var str = "x="+x+" mit typeof x=" + typeof x +"\n"; str += "s="+s+" mit typeof s=" + typeof s; window.alert(str); } </script> <a href="javascript:void(0);" onclick="myfunc((4711.321).toFixed(1), 'mystring'.replace(/[s-z]/gi,''));"> teste </a>
x=4711.321 mit typeof x=string s=mystring mit typeof s=string
x=4711.3 mit typeof x=string s=mring mit typeof s=string
<script> var arr = [ ]; </script> <ul id="ul_0" onclick="arr.push(this.id);return confirm(this.id);"> <li id="li_0" onclick="arr.push(this.id);return confirm(this.id);"> li_0 <a id="li_0_a" onclick="arr.push(this.id);return confirm(this.id);" href="javascript:alert('href: li_0_a');"> li_0_a </a> </li><li id="li_1" onclick="arr.push(this.id);return confirm(this.id);"> li_1 <a id="li_1_a" onclick="arr=[];arr.push(this.id);return confirm(this.id);" href="javascript:alert('href: li_1_a arr = '+arr.join(' | '));"> li_1_a </a> </li></ul>
Teste:
Anzeige von confirm[ li_1_a ] dann Cancel-Klick, Anzeige von confirm[ li_1 ] dann Cancel-Klick, Anzeige von confirm[ ul_0 ] dann Cancel-Klick
confirm[ li_1_a ] dann OK-Klick, confirm[ li_1 ] dann OK-Klick , confirm[ ul_0 ] dann OK-Klick, alert [ href: li_1_a arr = li_1_a | li_1 | ul_0 ]
<dl id="dl_0" onclick="return confirm(this.id);"> <dt id="dt_0" onclick="return confirm(this.id);"> dt_0 </dt><dd id="dd_0" onclick="return confirm(this.id);"> dd_0 <a id="dd_0_a" onclick="return confirm(this.id);" href="javascript:alert('href: dd_0_a');"> dd_0_a </a> </dd><dt id="dt_1" onclick="return confirm(this.id);"> dt_1 </dt><dd id="dd_1" onclick="return confirm(this.id);"> dd_1 <a id="dd_1_a" onclick="return confirm(this.id);" href="javascript:alert('href: dd_1_a');"> dd_1_a </a> </dd></dl>
Anzeige von confirm[ dl_0 ] dann Cancel-Klick, Anzeige von confirm[ dd_1 ] dann Cancel-Klick, Anzeige von confirm[ dd_1_a ] dann Cancel-Klick
confirm[ dl_0 ] dann OK-Klick, confirm[ dd_1 ] dann OK-Klick, confirm[ dd_1_a ] dann OK-Klick, alert [ href: dd_1_a ]
<form action="javascript:action()" onsubmit="return !!confirm('OK oder Cancel');"> <input type="submit" value="Sende" /><input type="submit" value="Sende" /> <input type="checkbox" name="CHECKBOX0" value="myCheck 0" checked="checked" /> <input type="radio" name="RADIO" value="myRadio 0" checked="checked" /> <input type="radio" name="RADIO" value="myRadio 1" /> <input type="hidden" name="TEXT0" id="TEXT0" value="Text-Eingabe hidden" /> <textarea name="TA0" rows="2" cols="40"><script>alert('TA0');</script> </textarea> </form> <script> function action() { var f = document.getElementsByTagName('form')[0], inp = f.getElementsByTagName('input'), ta = f.getElementsByTagName('textarea')[0].value, els = f.elements, str = els[5].value, arr = [ inp.length, els.length, inp[1].value, f.CHECKBOX0.checked, inp[3].value, f.RADIO[1].checked ]; alert('arr=' + arr + '\nta=' + ta+ '\nstr=' + str); } alert(window.document.getElementsByTagName('form')[0].getElementsByTagName('input').getElementById('TEXT0').value); alert(document.forms[0]['input']['TEXT0']['value']); </script>
<form action="javascript:alert('Jetzt action-Ausführung')" onsubmit="show(this.elements);return false;"> <fieldset><legend name="LEGEND">Teste form-Events</legend> <input type="text" name="TEXT" value="Eingabe-Text" /> <input type="checkbox" name="CHECKBOX" checked="checked" /> <input type="submit" value="/* 1 */" /> <button onclick="this.form.submit()"> /* 2 */ </button> <input type="button" value="/* 3 */" onclick="document.forms[0].submit()" /> </fieldset></form> <script> function show(arr) { var i, el, nn, r = []; function push(r, el, att) { if( el[att] ){ r.push(el.nodeName.toLowerCase() + '.' + att +'='+ el[att]); } } for (i = 0; i < arr.length; i += 1) { el = arr[i]; r.push('---'); push(r, el, 'type'); push(r, el, 'name'); push(r, el, 'value'); push(r, el, 'checked'); } window.alert(r.join('\n')); } </script>
--- --- input.type=text input.name=TEXT input.value=Eingabe-Text --- input.type=checkbox input.name=CHECKBOX input.value=on input.checked=true --- input.type=submit input.value=/* 1 */ --- button.type=submit --- input.type=button input.value=/* 3 */
<form id="my_form"> Bitte klicken: <button>Wert-a: 0</button> <!-- "Wert" ist 0 --> <button>Wert-b: 0</button> <!-- "Wert" ist 0 --> <button>Wert-c: 0</button> <!-- "Wert" ist 0 --> </form> <script> function my_handler(event) { var tg, a, ev = event; ev = ev || window.event; tg = ev.target || ev.srcElement; if (tg.nodeName.toLowerCase() === 'form'){ return; /* 1 */ } a = tg.innerHTML.split(/\s*\:\s*/); /* 2 */ a[1] = parseInt(a[1], 10) + 1; tg.innerHTML = a[0] + ": " + a[1]; if (typeof ev.stopPropagation === "function") { ev.stopPropagation(); /* 3a */ // no bubble } ev.cancelBubble = true; if (typeof ev.preventDefault === "function") { ev.preventDefault(); /* 3b */ // prevent default action } ev.returnValue = false; } var form = document.getElementById('my_form'); if (document.addEventListener) { /* 4a */ // W3C form.addEventListener('click', my_handler, false); } else if (document.attachEvent) { /* 4b */ // IE form.attachEvent('click', my_handler); } else { form.onclick = my_handler; /* */ } </script>
<form id="my_form"> Bitte klicken: <button>button-a: 0</button> <button>button-b: 0</button> <button>button-c: 0</button><br /> <textarea cols="45" rows="5"></textarea> </form> <script> var add_handlers_to = function (nodes) { /* 1 */ var i, el, ii = nodes.length; for(i = 0; i < ii; i += 1) { ele = nodes[i].el; ele.style.cursor = 'pointer'; /* 2 */ ele.onclick = function (i) { /* 3 */ return function (event) { var ev = event; if (!ev) { ev = window.event;} /* 4 */ var tg = ev.target || ev.srcElement;/* 5 */ nodes[i].fn(tg); /* 6 */ if (typeof ev.stopPropagation === "function") { ev.stopPropagation(); /* 7 */ } ev.cancelBubble = true; if (typeof ev.preventDefault === "function") { ev.preventDefault(); /* 8 */ } ev.returnValue = false; }; // ende return function (ev) ... }(i); // ende onclick ... } // ende for(i = ... }; /* 9-a */ function bfn0 (tge){ bfn1(tge); alert(tge.innerHTML); } function bfn1 (tge) { var a = tge.innerHTML.split(/\s*\:\s*/); /* 9-b */ a[1] = parseInt(a[1],10) + 1; tge.innerHTML = a[0]+": "+a[1]; } function bfn2 (tge){ bfn1(tge); /* 9-c */ var form = tge.parentNode, ta = form.getElementsByTagName('textarea')[0], els = form.elements, el, j, s=''; for(j = 0; j < els.length; j += 1) { el = els[j]; if(el.nodeName.toLowerCase() !== 'button'){continue;} s += '\nform button['+j+'].innerHTML=' + el.innerHTML; } ta.value = s; } var form = document.getElementById('my_form'), ba = form.getElementsByTagName('button'); add_handlers_to( {el:ba[0oO0,fn:bfn0}, {el:ba[1],fn:bfn1}, {el:ba[2],fn:bfn2}] );</script>
