3.1. 이벤트 발생 방법*
첫 번째 경우 사용자는 버튼을 클릭하여 클릭 이벤트를 생성하는 것과 같은 웹 페이지에서 특정 작업을 수행합니다. 두 번째 경우, 사용자가 웹 페이지에서 작동하지 않은 경우 이벤트도 발생할 수 있습니다. 예를 들어, 브라우저가 전체 페이지를로드하여로드 완료 이벤트가 생성됩니다. 이벤트가 생성되면 브라우저는 이벤트를 생성 한 노드가 해당 이벤트 처리 코드에 묶여 있는지 여부를 찾습니다. 그렇다면 코드는이를 처리하도록 호출됩니다. 그렇지 않은 경우, 상위 노드는 계속 위쪽으로 검색되며 해당 이벤트 처리 코드 (이벤트 버블)가 없습니다.
3.2. 바인딩 이벤트 처리 코드 **
1) 이벤트 처리 코드를 HTML 태그에 바인딩합니다
예를 들어 : <a id = "a1"href = ""onclick = "f1 ();"> 클릭 </a>입니다
2) 이벤트 처리 코드를 DOM 노드에 바인딩합니다
var obj = document.getElementById ( 'a1'); obj.onclick = f1;
알아채다:
에이. "()" "F1에 추가하지 마십시오. "()"를 추가하면 F1이 즉시 실행된다는 것을 의미합니다.
비. 익명 기능 행 바인딩을 사용할 수 있습니다.
즉, obj.onclick = function () {// 코드입니다. }
기음. DOM 노드에 대한 이벤트 처리 코드 바인딩은 HTML없이 JS 코드를 완전히 분리 할 수 있으며, 이는 코드 유지 보수에 편리합니다.
디. 매개 변수를 바운드 함수로 전달하려는 경우. 익명 기능을 해결할 수 있습니다.
즉, obj.onclick = function () {f (매개 변수); }
3) 브라우저의 자체 바인딩 방법을 사용하십시오 (이해)
다른 브라우저에는 고유 한 바인딩 방법이 있으며 호환되지 않기 때문에 가능한 한 적게 사용하십시오.
스크립트 스크립트는 <body>로 작성할 수 있습니다
다음 그림과 같습니다
매개 변수가 전달되면 어떻게됩니까? 익명 기능을 사용하십시오
[사례 3.1] 최상위 HTML 태그에 대한 이벤트 처리 코드의 바인딩 **
3.3. 이벤트 개체 ***
1) 이벤트 객체를 얻으십시오
IE 브라우저 : 이벤트를 직접 사용하여 얻을 수 있습니다
Firefox : 메소드에 매개 변수 이벤트를 추가해야합니다.
일반적으로 IE 및 Firefox와 호환 되려면 방법에 매개 변수 이벤트를 추가하십시오.
2) 이벤트 객체의 역할
에이. 마우스 클릭의 좌표를 얻습니다
event.clientx event.clienty
비. 이벤트 소스 (이벤트를 생성 한 개체)를 얻으십시오.
Firefox : event.target은 IE 브라우저를 가져옵니다 : event.srcelement gets
3.4. 이벤트 버블 **
1) 이벤트 버블이란 무엇입니까? 노드에 의해 이벤트가 생성되면 이벤트는 차례로 위로 업로드됩니다 (부모 노드에 먼저 상위 노드에 상위 노드가있는 경우 위쪽으로 업로드).
2) 거품을 금지하는 방법? event.cancelbubble = true;
2) "이벤트 버블"현상은 대화 상자를 닫습니다.
【사례 3.4 4 이벤트 객체 **
<html>
<!-이벤트 객체->
--------------------------------------------------------------------------------------------------------------------------------
JS는 이벤트 중심을 사용하여 사용자 작업에 응답합니다.
예를 들어, 마우스 또는 키를 통해 브라우저 창 또는 웹 페이지 요소 (버튼, 텍스트 상자 ...)에서 수행되는 작업을 이벤트 (이벤트)라고합니다.
마우스 또는 핫키에 의해 트리거 된 일련의 프로그램의 행동을 이벤트 드라이버라고합니다.
핸들러 또는 기능은 이벤트 핸들러 (이벤트 핸들러)를 호출하는 이벤트를 처리하는 데 사용됩니다.
--------------------------------------------------------------------------------------------------------------------------------
브라우저 호환성 처리
<script language = "javaScript"> <!- if (wind } else {alert ( 'ie7 .8'); }} else {alert ( 'ie6'); } //-> </script>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
이벤트에는 여러 가지 방법이 필요하며 사용하여 분리 할 수 있습니다.
<입력 유형 = "버튼"value = "red"onclick = "mychange (this), sayhello ()"/>
<body onkeydown = "showkey (이벤트)"onload = "abc ()"onunload = "abc2 ()">
JS 이벤트 중심 메커니즘의 브라우저 호환성 방법에 대한 위의 기사는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.