집 > 기사 > 웹 프론트엔드 > JavaScript와 HTML 간의 대화형 이벤트에 대해_기본 지식

JavaScript와 HTML 간의 대화형 이벤트에 대해_기본 지식

WBOY원래의: 2016-05-16 17:37:13991검색

JavaScript와 HTML 간의 상호작용은 이벤트를 통해 이루어집니다. JavaScript는 비동기 이벤트 기반 프로그래밍 모델을 사용합니다. 문서, 브라우저, 요소 또는 이와 관련된 개체에 특정한 일이 발생하면 브라우저가 이벤트를 생성합니다. JavaScript가 특정 유형의 이벤트에 관심이 있는 경우 해당 유형의 이벤트가 발생할 때 호출될 핸들러를 등록할 수 있습니다.

이벤트 흐름

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다. 예를 들어 두 개의 중첩된 div가 있고 내부 div가 클릭되면 내부 div가 클릭 이벤트를 먼저 트리거합니까, 아니면 외부 div를 트리거합니까? 현재 3가지 주요 모델이 있습니다

IE의 이벤트 버블링: 이벤트는 처음에 가장 구체적인 요소에 의해 수신된 다음 덜 구체적인 요소로 위쪽으로 전파됩니다.

Netscape의 이벤트 캡처: 이벤트 버블링과 달리 덜 구체적인 노드는 이벤트를 더 일찍 수신하고 가장 구체적인 요소는 이벤트를 마지막에 수신합니다.

DOM 이벤트 흐름: DOM 레벨 2 이벤트는 이벤트 흐름이 대상 단계에 있는 이벤트 캡처 단계와 이벤트 버블링 단계의 세 단계를 포함한다고 규정합니다. 이벤트를 가로챌 수 있는 기회가 주어지고, 실제 대상이 이벤트를 받게 되며, 마지막으로 버블 문장 단계가 됩니다.

Opera, Firefox, Chrome, Safari는 모두 DOM 이벤트 스트리밍을 지원합니다. IE는 이벤트 스트리밍을 지원하지 않고 이벤트 버블링만 지원합니다

다음 html이 있다면 div 영역을 클릭하세요

코드 복사 코드는 다음과 같습니다.

 
 < ;제목> 테스트 페이지

 /html>

Untitled 이벤트 핸들러

이벤트 리스너라고도 합니다. 이벤트는 사용자나 브라우저 자체에 의해 수행되는 특정 작업입니다. 예를 들어 click, load, moseover 등은 모두 이벤트 유형(일반적으로 이벤트 이름이라고 함)이며, 이벤트에 응답하는 방법을 이벤트 핸들러 또는 이벤트 리스너 또는 이벤트 핸들러라고 합니다. 이벤트 유형.

이를 이해하고 요소에 이벤트 핸들러를 추가하는 방법을 살펴보겠습니다

HTML 이벤트 핸들러 요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다. 이 속성의 값은 실행 가능한 JavaScript 코드여야 합니다.

버튼에 대한 클릭 이벤트 핸들러를 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

HTML 이벤트 핸들러는 수행할 특정 작업을 포함하거나 페이지에서 지금의 예는 다음과 같이 작성할 수 있습니다 

코드 복사 코드는 다음과 같습니다.

위 코드는 버블링 중에 트리거되는 클릭 이벤트에 대한 핸들러를 버튼에 추가합니다. 동일한 방법으로 이 프로그램도 요소 범위 내에서 실행되지만 이점이 있습니다. 클릭 이벤트에 대해 여러 핸들러를 추가할 수 있습니다

코드 복사

코드는 다음과 같습니다.

다음은 일반적인 IE 호환성 문제입니다. . .

IE는 addEventListener 및 RemoveEventListener 메서드를 지원하지 않습니다. 대신 두 개의 유사한 메서드인 attachmentEvent 및 detachEvent를 구현합니다. 두 메서드 모두 이벤트 핸들러 이름과 이벤트 핸들러 메서드를 참조하므로 이벤트 핸들러 메서드가 지원됩니다. 추가된 프로그램은 버블링 단계에 추가될 예정입니다.

attachEvent를 사용하여 이벤트 핸들러를 추가하는 방법은 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

결과가 정의되지 않은데 매우 이상합니다. 나중에 소개하겠습니다.

attachEvent를 사용하여 추가된 이벤트 핸들러는 detachEvent를 통해 제거할 수 있습니다. 조건도 동일한 매개변수로 제거할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

크로스 브라우저 이벤트 핸들러

이전 콘텐츠에서 이벤트 핸들러를 추가하고 제거하는 방법이 브라우저마다 다르다는 것을 알 수 있습니다. 크로스 브라우저 이벤트 핸들러를 작성하려면 먼저 다양한 브라우저에서의 처리 차이점을 이해해야 합니다. 핸들러

이벤트 핸들러를 추가할 때 addEventListener와 AttachEvent 사이에는 몇 가지 주요 차이점이 있습니다.
1. 이것이 가장 직관적입니다. addEventListener에는 3개의 매개변수가 있고, AttachEvent에는 2개의 매개변수만 있습니다. addEventListener의 세 번째 매개변수는 추가된 이벤트 핸들러가 캡처 단계에서 처리되는지 아니면 버블링 단계에서 처리되는지를 결정할 수 있습니다. (일반적으로 브라우저 호환성을 위해 버블링 단계로 설정합니다.)

2. 첫 번째 매개변수는 다른 의미를 가집니다. addEventListener의 첫 번째 매개변수는 이벤트 유형(예: click, load)이고, attachmentEvent의 첫 번째 매개변수는 이벤트 처리 함수 이름(onclick, onload)을 지정합니다.

3. 이벤트 핸들러의 범위는 다릅니다. addEventListener의 범위는 트리거 요소를 참조하며, AttachEvent 이벤트 핸들러는 전역 변수에서 실행됩니다. 요소 ID가 아닌 정의되지 않은 값을 반환합니다

4. 하나의 이벤트에 여러 개의 이벤트 핸들러를 추가하는 경우 실행 순서가 다릅니다. addEventListener는 추가된 순서대로 추가되고,attachEvent는 불규칙한 순서로 여러 개의 이벤트 핸들러를 추가합니다(추가된 메소드가 거의 없는 경우 대부분 추가된 순서대로 실행됩니다.) 추가하는 순서는 역순으로 실행되지만 너무 많이 추가하면 불규칙해집니다.) 따라서 여러 개 추가할 때는 순서에 의존하지 않는 것이 좋습니다. 함수 실행 순서에 따라 달라지는 경우에는 브라우저에 의존하지 말고 직접 처리하는 것이 가장 좋습니다.

이 네 가지 차이점을 이해한 후 더 나은 브라우저 호환성으로 이벤트 핸들러를 추가하는 방법을 작성해 볼 수 있습니다

코드 복사 코드는 다음과 같습니다.

function addEvent(node, type, handler) {
 if (!node) return false;
 if (node.addEventListener) {
 node.addEventListener(type, handler, false) ;
                                         ;                                                             반환 true;
                                                                                   true 반환;   return false; 솔루션, IE인 경우 유형에 추가합니다. 현재 네 번째 문제에 대한 솔루션이 없으므로 사용자는 이에 주의해야 합니다. 일반적인 상황에서는 누구나 이벤트 핸들러를 많이 추가하지 않을 것입니다. 그러나 세 번째 문제는 핸들러 범위가 다르기 때문에 해결되지 않았습니다. 오류가 발생합니다. 실제로 IE에서는 대부분의 기능이 이 작업을 수행합니다. 

코드 복사

코드는 다음과 같습니다.

function addEvent(node, type, handler) { if (!node) return false; if (node.addEventListener) { node.addEventListener(type, handler, false); return true; } else if (node .attachEvent) {

🎜 > }

이러한 방법으로 문제를 해결할 수 있지만 새로운 문제가 발생했습니다. 이는 익명 이벤트 핸들러를 추가하는 것과 같습니다. detachEvent를 사용하여 이벤트 핸들러를 취소할 수 없습니다. 해결 방법은 jQuery의 창시자인 John Resig의 방법을 통해 배울 수 있습니다.

코드 복사

코드는 다음과 같습니다.

function addEvent(node, type, handler) {
 if (!node) return false;
 if (node.addEventListener) {
 node.addEventListener(type, handler, false) > {
            노드['e' 유형 핸들러](window.event);
                                           참을 반환합니다.
 } 
            반환 false ;
 }


이벤트 핸들러를 취소하는 경우

코드 복사

코드는 다음과 같습니다.

function RemoveEvent(node, type, handler) { if (!node) return false; if (node.removeEventListener) { node.removeEventListener(type, handler, false); return true;

}

                      else if (node ​​.detachEvent) {
             node.detachEvent('on' type, node[type handler]) 🎜> }

John Resig는 클로저를 매우 영리하게 사용하며 보기에도 좋습니다. 

이벤트 객체

DOM에서 이벤트가 트리거되면 이벤트 객체 이벤트가 생성됩니다. 이 객체에는 이벤트를 생성한 요소, 이벤트 유형 및 기타 관련 정보를 포함하여 이벤트와 관련된 모든 정보가 포함됩니다. 모든 브라우저는 이벤트 객체를 지원하지만 방식은 다릅니다. 

DOM의 이벤트 객체 DOM 호환 브라우저는 이벤트 객체를 생성하여 이벤트 핸들러에 전달합니다. 방금 작성한 addEvent 메소드를 적용하세요

코드 복사

코드는 다음과 같습니다.

var btnClick = document.getElementById('btnClick ');

addEvent(btnClick, 'click', handler);

点击button的时候我们可以看到弹出内容是click的弹窗

event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前处理元素
detail	Integer	只读	与事件相关细节信息
eventPhase	Integer	只读	事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段
preventDefault()	Function	只读	取消事件默认行为
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡
target	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。

要阻止事件的默认行为，可以使用preventDefault（）方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

复制代码代码如下:

document.getElementsByTagName('a').onclick = function (e) {
            e.preventDefault();
        }

stopPaopagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation（）从而避免注册在body上的事件发生

复制代码代码如下:

var handler = function (e) {
            alert(e.type);
            e.stopPropagation();
        }
        addEvent(document.body, 'click', function () { alert('Clicked body')});
        var btnClick = document.getElementById('btnClick');
        addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播。

IE中的事件对象访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在

复制代码代码如下:

var handler = function () {
            var e = window.event;
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        btnClick.onclick = handler;

我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中

复制代码代码如下:

var handler = function (e) {
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        attachEvent(btnClick, handler);

当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法

属性/方法	类型	读/写	说明
cancelBulle	Boolean	读/写	默认为false，设置为true后可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，设为false可以取消事件默认行为
srcElement	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型

크로스 브라우저 이벤트 객체 DOM과 IE의 이벤트 객체는 유사성에 따라 다르지만 여전히 크로스 브라우저 이벤트 객체 솔루션을 작성할 수 있습니다

코드 복사 코드는 다음과 같습니다.

function getEvent(e) {
반환 | window.event;
}

function getTarget(e) {
return e.target ||
function PreventDefault(e) {

if (e.preventDefault)

e.preventDefault();
else
e.return 값 = false;
}

function stopPropagation(e) {

if (e.stopPropagation)

e.stopPropagation();
else
e.can celBubble = true;
}

일반적인 HTML 이벤트
자주 사용하는 HTML 이벤트가 있는데, 이러한 이벤트는 반드시 사용자 작업과 관련이 있는 것은 아닙니다. 자세한 사용법은 Baidu 및 Google에서 검색해야 합니다.

1.load: 페이지가 완전히 로드될 때 창에서 트리거되거나, 이미지가 로드될 때 img 요소에서 트리거되거나, 삽입된 콘텐츠가 로드될 때 object 요소에서 트리거됩니다.

2.unload: 페이지 완전히 로드됨 제거 후 창에서 트리거되거나 포함된 콘텐츠가 제거된 후 개체 요소에서 트리거됩니다

3.select: 사용자가 텍스트 상자에서 문자를 선택할 때 트리거됩니다
4.change: 포커스가 변경된 후 텍스트 상자의 값이 변경됩니다.
5.submit: 사용자가 양식을 제출할 때 트리거됩니다.
6.resize: 창 또는 프레임 크기가 변경될 때 창에서 트리거됩니다.
7.scool: 언제 사용자는 요소에서 스크롤 막대를 사용하여 요소를 스크롤합니다. Trigger
8.focus: 페이지나 요소가 포커스를 얻을 때 창과 해당 요소에서 트리거됩니다.
9.blur: 다음 경우 창과 해당 요소에서 트리거됩니다. 페이지 또는 요소가 포커스를 잃습니다
10.beforeunload: 이전에 창에서 트리거된 페이지를 언로드합니다.
11.mousewheel: HTML을 계산하지 않고, 사용자가 마우스 휠을 통해 페이지와 상호 작용하고 페이지를 세로로 스크롤할 때 트리거됩니다. 방향

JavaScript와 HTML 간의 대화형 이벤트에 대해_기본 지식

관련 기사