js 기본 이벤트 설명에 대한 자세한 분석(코드 첨부, 간단하고 명확함)-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-05-18 14:29:01

원래의

1942명이 탐색했습니다.

다음은 제가 여러분을 위해 정리한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!