js 일반 이벤트

공통 이벤트

onclick: 클릭 조작

document.getElementById("bnt1").onclick=function(){
    document.getElementById("p1").innerHTML="ddd";
};

onchange: 대상이 변할 때

onchange :, 

document.getElementById("input1").onchange=function(){
   this.value=this.value.toUpperCase();
}

toUpperCase()  。

onmouseover,onmouseleave: 마우스를 노드에 옮기고 제거할 때

conmousemove 이벤트가div 요소로 이동할 때 터치됩니다.

mouseenter 이벤트에서 마우스 포인터가div 요소에 들어갈 때 터치합니다.

onmouseover 이벤트는 마우스 포인터가div 요소에 들어갈 때 터치하고 하위 요소에서도 터치(p와span)합니다.

var myname = document.getElementById("name"); 
myname.onmouseover = function(e){ 
    this.style.color = "red"; 
}

onmousedown,onmouseup: 마우스를 눌러서 손을 놓지 않을 때는mousedown이고, 손을 놓으면mouseup이다.클릭은 누르고 놓는 두 과정의 합이다.mousedown+mouseup=click

document.getElementById('div2').onmousedown=function(){ 
    this.innerHTML=" "; 
}; 
document.getElementById('div2').onmouseup=function(){ 
    this.innerHTML=" "; 
} 

this 간단한 사용

익명 함수에서this는 귀속 이벤트의 요소(자신)를 대표합니다

document.getElementById("btn1").onclick=function(){
    this.style.backgroundColor = "red";
        } 

이벤트 객체 보기

document.getElementById("btn5").onclick=function(e){ 
    console.log(e); //   
    console.log(e.target);//  
    console.log(e.x); //  
    console.log(e.type);//  
}

이벤트 바인딩 및 해제

addEventListener 및 removeEventLister
addEventListener () 와removeEventListener () 는 이벤트 처리 프로그램의 지정과 삭제를 처리하는 데 사용됩니다.모든 DOM 노드에는 이 두 가지 방법이 포함되어 있으며, 처리할 시간 이름, 이벤트 처리 프로그램의 함수, 부울 값 등 세 가지 인자를 받아들인다.마지막으로 이 브리 값 매개 변수는true로 포획 단계에서 이벤트 처리 프로그램을 호출하는 것을 나타낸다.false라면 거품 단계에서 이벤트 처리 프로그램을 호출하는 것을 표시합니다.(다음은 사건의 거품과 포획)
addEventListener의 매개 변수는 모두 세 개입니다. 문법은 다음과 같습니다. element.addEventListener(type,listener,useCapture)상세하게 해석하다

element는 함수를 귀속시킬 대상입니다.

type은 이벤트 이름입니다. 주의해야 할 것은'onclick'은'click','onblur'는'blur'로 바뀌어야 합니다. 즉, 이벤트 이름은'on'을 가져오지 말아야 합니다.

listener는 당연히 귀속된 함수입니다. 괄호와 함께 있지 않도록 기억하세요

마지막 매개 변수는 부울 값으로 이 이벤트의 응답 순서를 나타낸다. 다음은addeventListener의 세 번째 매개 변수(use Capture)를 중점적으로 소개한다.

예제

버튼에 클릭 이벤트에 이벤트 처리 프로그램을 추가하려면 다음 코드를 사용할 수 있습니다.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);

DOM2급 방법으로 이벤트 처리 프로그램을 추가하는 주요 장점은 여러 개의 이벤트 처리 프로그램을 추가할 수 있다는 것이다.다음 예를 보십시오.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.addEventListener("click", function () {
    alert("Hello World");
}, false);

참고: addEventListener() 메서드에 추가된 이벤트 처리 함수는 이미 존재하는 이벤트 처리 함수를 덮어쓰지 않습니다.원소에 여러 개의 이벤트 처리 함수를 추가할 수 있습니다.예를 들어 하나의 요소에 두 개의 "클릭"이벤트를 추가합니다.

addeventListener()를 통해 추가된 이벤트 처리 프로그램은removeEventListener()로만 제거할 수 있습니다.제거할 때 들어오는 매개 변수는 프로세서를 추가할 때 사용하는 매개 변수와 같습니다.이것은addeventListener()를 통해 추가된 익명 함수를 제거할 수 없다는 것을 의미한다. 아래의 예와 같다.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.removeEventListener("click", function () {  // ！
    alert(this.id);
}, false);

이 예에서 이벤트 처리 프로그램을 추가하려면ddEventListener () 를 사용하십시오.remove Event Listener () 를 호출하는 것은 같은 인자를 사용한 것처럼 보이지만, 실제로는 두 번째 인자가dd Event Listener () 에 전송된 것과 완전히 다른 함수입니다.removeEventListener () 로 들어오는 이벤트 처리 프로그램 함수는 addEventListener () 로 들어오는 것과 같아야 합니다. 아래의 예와 같습니다.

var btn = document.getElementById("myBtn");
var handler = function () {
        alert(this.id);
    };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);  // ！ ， addEventListener() removeEventListener() 。

사건 발포와 포획

사건 전달에는 두 가지 방식이 있는데 그것이 바로 거품과 포획이다.거품 속에서 내부 원소의 이벤트가 먼저 촉발된 다음에 외부 원소를 촉발한다. 포획 중에 외부 원소의 이벤트가 먼저 촉발된 다음에 내부 원소의 이벤트addeventListener(event,function,useCapture)를 촉발한다.useCapture 기본값은 false이며 거품 전달입니다.useCapture 값이 true인 경우 이벤트는 캡처 전송을 사용합니다.이벤트 거품:

document.getElementById('div7').addEventListener('click', function(){
    alert('div7 click');
}, false);
document.getElementById('btn7').addEventListener('click', function(){
    alert('btn7 click');
}, false);

이벤트 캡처:

document.getElementById('div7').addEventListener('click', function(){
    alert('div7 click');
}, true);
document.getElementById('btn7').addEventListener('click', function(){
    alert('btn7 click');
}, true);