1. 크로스 플랫폼 이벤트
크로스 플랫폼 이벤트 란 무엇입니까? 즉, 동일한 이벤트가 다른 브라우저에서 실행되며 사용 된 방법은 다릅니다.
이벤트 객체 란 무엇입니까? 그 기능은 무엇입니까? 즉, 이벤트 객체의 관리를 용이하게하기 위해 이벤트와 관련된 모든 기능을 결합한 컨테이너이며 속성이 없습니다. 주로 DOM 이벤트와 IE 이벤트 간의 런인을 처리하여 가능한 한 비슷하게 만듭니다.
DOM과 IE 사이의 객체 속성과 방법을 살펴보고 비교해 봅시다 (둘 사이에는 다른 속성과 방법 만있다). 5 가지 주요 요점이 있습니다.
DOM 속성 및 방법 IE 특성 및 방법
charcode 키 코드
예방 대상 ReturnValue = false
Obj | toobj 관련 타겟
STOPPOPATION CANCELBUBLE = TRUE
대상 srcobj
이벤트의 크로스 플랫폼 호환성 문제를 해결할 수있는 작은 데모로 살펴 보겠습니다.
<html> <head> <title> eventUtil </titleutil> <스크립트 eventType = "text/javaScript"> var eventUtil = {// event addListener : function (obj, eventType, fn) {if (obj.addeventListener) {eventDeventListener (obj.addeventListener); } else if (obj.attachevent) {obj.attachevent ( 'on' + eventtype, fn); } else {obj [ 'on' + eventType] = fn; }}, // 이벤트 객체 ret Window.event; // 반환 이벤트? 이벤트 : Window.event; }, // 대상 이벤트 객체를 반환합니다. 이벤트 .srcobj; }, expendDefault : 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> <입력 eventType = "valling"value = "click me"id = "btn"/> <p> event </p> <a> hello Word! </a> <script eventtype = "text/javaScript"> 함수 addBtnlisten (event) {var eventItil.gete (이벤트); var target = eventUtil.getTarget (이벤트); Alert ( "내 이름은 Kock"); Alert (event.eventType); 경고 (대상); eventUtil.StopPropagation (이벤트); } function getBodyListen (이벤트) {alert ( "Click Body"); } 함수 getLinkListen (이벤트) {alert ( "기본 이벤트 방지"); var event = eventutil.getevent (이벤트); eventUtil.preventDefault (이벤트); } 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 (링크, "클릭", 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;-버블 링 단계를 나타냅니다. 즉, 버블 링 단계 만 지원} 반환 이벤트;}2. 버블 링 목표와 현재 타겟에 대해
대상은 이벤트 스트림의 대상 단계에 있습니다. CurrentTarget은 이벤트 스트림의 캡처, 대상 및 버블 스테이지에 있습니다. 이벤트 스트림이 대상 단계에있을 때만 두 포인터가 동일하며 캡처 및 버블 스테이지에있을 때 대상은 클릭 된 객체를 가리키고 현재 타격은 현재 이벤트의 부모를 가리 킵니다.
<div id = "외부"스타일 = "배경 :#099"> <p> 나는 대상 div </p> ----이 부분을 클릭, 출력 : e.target.tagname : p || e.currentTarget.tagname : div <p id = "내부"스타일 = "배경 :#9c0"> 나는 대상 P </p> ---이 부분을 클릭, 출력 : e.target.tagname : p || e.currentTarget.tagname : div <br> ---이 부분을 클릭, 출력 : e.target.tagname : div || e.currentTarget.tagname : div </div> // 두 번째 변경 열을 봅니다. <div id = "outer"style = "background :#099"> <div> 나는 대상 div </div> ----이 부분을 클릭, e.target.tagname : div || e.currentTarget.tagname : div <p id = "내부"스타일 = "배경 :#9c0"> 나는 대상 P </p> ---이 부분을 클릭, 출력 : e.target.tagname : p || e.currentTarget.tagname : div <br> ---이 부분을 클릭, 출력 : e.target.tagname : div || e.currentTarget.tagname : div </div>
함수 getObj (id) {return document.getElementById (id); } function addEvent (obj, event, fn) {if (window.attachevent) {obj.attachevent ( "on" + event, fn); } else if (wind }} 함수 테스트 (e) {alert ( "e.target.tagname :" + e.target.tagname + "/n e.currentTarget.tagname :" + e.currentTarget.tagname); } var outer = getObj ( "외부"); var inner = getobj ( "내부"); // addevent (내부, "클릭", 테스트); addevent (외부, "클릭", 테스트);3. IE와 DOM의 차이
도미
대상 이벤트를 받으십시오. Target event.srcelement
문자 코드 event.charcode event.keycode를 얻습니다
기본 동작을 차단합니다
Bubble event.stopPropagation () event.cancelBubble = true
예를 들어, 마우스를 마우스 오른쪽 버튼으로 클릭하면 기본 동작 차단과 관련하여 메뉴가 나타나지 않으려면 기본 동작 차단을 사용할 수 있습니다.
document.body.oncontextMenu = function (event) {if (isie) {var oevent = window.event; oevent.returnValue = false; // false를 직접 반환 할 수도 있습니다. 기본 동작 방지} else {oevent.preventDefault (); }}4. 마우스 이벤트
<p> 마우스를 클릭하고 두 번 클릭하고 두 번 클릭하십시오 </p> <div onmouseover = "handleEvent (event)"onMouseOut = "handingEvent (event)"onMousEdown = "handleEvent (이벤트)"onMouseUp = "handlEvent (이벤트)"onclick = "handleEvent (event)"handlick = "indblclick ="id = "> div1"> div1 "> id = "txt1"rows = "5"cols = "45"> </textarea> </p> <!-키보드 이벤트 감지-> <p> <입력 유형 = "text"id = "textbox"onkeydown = "handle (event)"onkeypress = "hent (event)"onkeyup = "honder (event)" "10"txtarea id = "txt2"10 " cols = "45"> </textarea> </p>
JS 파일은 다음과 같습니다.
함수 handleEvent (event) {var otext = document.getElementById ( 'txt1'); otxt.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 relatedTarget은"+event.RelatedTarget.tagName; //event.RelatedTarget.tagName 마우스의 소스와 소스를 결정할 수 있습니다} 함수 핸들 (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;}위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.