집 > 기사 > 웹 프론트엔드 > js 기본 이벤트 설명에 대한 자세한 분석(코드 첨부, 간단하고 명확함)

js 기본 이벤트 설명에 대한 자세한 분석(코드 첨부, 간단하고 명확함)

亚连원래의: 2018-05-18 14:29:011991검색

다음은 제가 여러분을 위해 정리한 js 네이티브 이벤트입니다. 관심 있는 학생들은 한 번 살펴볼 수 있습니다.

1. 이벤트 흐름
이벤트 흐름은 크게 이벤트 버블링과 이벤트 캡처의 두 가지 유형으로 나뉩니다. 이벤트가 버블링되고 대상 요소가 먼저 이벤트를 수신한 다음 덜 구체적인 노드로 점진적으로 전파됩니다. 이벤트 캡처는 정반대입니다. 주요 아이디어는 덜 구체적인 노드가 먼저 이벤트를 수신한 다음 점차적으로 대상 노드로 전파된다는 것입니다.

<html>
    <head>
        <title>事件流</title>
    </head>
    <body>
        <div id ="testDiv"></div>
    </body>
 </html>

div를 클릭하면 버블링 이벤트는 노드 순서 div->body->html->document를 수신합니다.
캡처 이벤트는 노드 순서 document->html->body->div를 수신합니다.

2. 이벤트 핸들러
a) HTML 이벤트 핸들러
요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다.
단점: 1. 시차 문제, 브라우저가 클릭 이벤트 기능을 구문 분석하기 전에 사용자가 페이지 요소를 클릭했을 수 있습니다. try-catch를 통해 오류를 래핑합니다.
2 이벤트 핸들러의 범위 체인은 다른 브라우저에서 변경됩니다. 다른 결과를 가져옵니다.
3. HTML 코드와 Javascript 코드가 밀접하게 결합되어 있어 확장 및 유지 관리에 도움이 되지 않습니다.
b) DOM0 레벨 이벤트 핸들러
요소 이벤트 핸들러 속성에 함수 할당
var btn = document.getElementById(“#dv”)
btn.onclick = function(){}
삭제하려는 이벤트 Handler 요소 –btn.onclicn = null;

이런 방식으로 추가된 이벤트 핸들러는 이벤트 버블링 단계에서 처리됩니다.

c) DOM2 레벨 이벤트 핸들러
이벤트 핸들러 지정 addEventListener
이벤트 핸들러 제거 RemoveEventListener
3개의 매개변수, 즉 처리할 이벤트 이름, 이벤트 핸들러의 기능 및 부울 값을 수신합니다(true는 핸들러가 호출됨을 나타냄). 캡처 단계에서 false는 버블링 단계에서 이벤트 핸들러가 호출된다는 의미입니다.)

참고: addEventListener는 RemoveEventListener를 통해 삭제되어야 하며 매개변수가 일관되어야 하므로 addEventListener를 통해 추가된 익명 함수는 제거할 수 없습니다.

d)IE事件处理程序

attachEvent
detachEvent
两个方法接收相同的两个参数（”onclick”,”function(){}”）;
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。
注意：attach中第一个参数是onclick而不是addEventListener中的click
IE事件处理程序attachEvent添加的在全局作用域中运行

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同，所以有必要编写可以跨浏览器使用的事件处理程序。

var eventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.deatchEvent){
            element.deatch("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

上面是我整理给大家的，希望今后会对大家有帮助。

JS弹出窗口代码大全

几个前端常见的JS排序代码

JS去掉字符串前后空格或去掉所有空格的用法

위 내용은 js 기본 이벤트 설명에 대한 자세한 분석(코드 첨부, 간단하고 명확함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：기본 js를 사용하여 양식 직렬화 구현(그래픽 튜토리얼)다음 기사：기본 js를 사용하여 양식 직렬화 구현(그래픽 튜토리얼)