JavaScript의 이벤트에 대한 간략하고 자세한 설명

1.이벤트 처리function

이벤트는 사용자에 의해 자동 또는 수동으로 트리거되는 개체 상태의 변화를 의미합니다.

　 이벤트 처리 기능: 이벤트가 발생하면 자동으로 함수를 실행합니다.

　 이벤트 처리 기능은 본질적으로 객체의 특수 속성이며 이 속성은 함수를 가리킵니다.

　각 요소 개체는 다양한 이벤트를 트리거할 수 있으며 각 이벤트는 이벤트 핸들러에 해당합니다.

　이벤트 처리 함수 바인딩이 없어도 이벤트가 발생할 수 있지만 이때 이벤트 바인딩 함수가 비어 있으므로 작업이 수행되지 않습니다.

　프로그램이 실행되면 해당 함수나 명령문이 객체의 이벤트 처리 기능에 바인딩됩니다. 그런 다음 객체의 지정된 이벤트가 트리거되면 브라우저는 자동으로 이벤트 처리 기능의 작업을 실행합니다. 개체.

　이벤트 이름에 값 할당(이 함수)

2. 기본 이벤트 분류

　　1.　　onclick　onbdclick　onmousedown

　onmouseup　

onmouseover (경계 진입 시 1회 발생) onmouseout onmusemove 2. 키보드 이벤트

onkeydown onkeyup onkeypress

3. onchange( 선택) onfocus (form) onblur (form) 크기 조정 onsubmit onreset　onerror

3. 이벤트 정의에 대하여

특정 시간에 대한 청취 기능을 정의하는 방법에는 세 가지가 있습니다.　1 HTML에서 요소의 이벤트 관련 속성을 직접 정의합니다

<p style="margin-bottom: 7px;"><标签 on事件名="fun()/js语句">按钮</标签</p>

<span style="color: #0000ff"><</span><span style="color: #800000">标签 class</span><span style="color: #0000ff">="d1"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="fun()"</span><span style="color: #0000ff">></span><span style="color: #000000"><span style="color: #ff0000">相当于</span>d1.onclick=function(){
    console.log(this.className);    //d1
    eval("fun()");//[window.]fun
}<br/><strong><span style="color: #ff0000">结论：fun()中this指向window</span></strong></span>

//若要获得当前目标元素对象html:
    onxxx="fun(this)"
js中定义函数时:
    fun(elem);

이 방법은 "내용과 행위의 분리" 원칙을 위반하므로 가능한 한 적게 사용해야 합니다.

　 2. JavaScript에서 요소의 이벤트 관련 속성에 값을 할당합니다.

elem.on事件名=函数对象;

　 이 방법은 "콘텐츠와 동작의 분리"를 달성하지만 요소는 하나의 청취 기능에만 바인딩될 수 있습니다.

　 3. 고급 이벤트 처리 방법, 하나의 이벤트를 여러 청취 기능에 바인딩할 수 있음:

　 DOM 표준: elem.addEventListener("이벤트 이름", 이벤트 객체, 캡처 단계에서 트리거할지 여부)

　 IE8 표준 : elem .attachEvent("on event name", event object)

btnObj.attachEvent('onclick',function(){});        //IE
btnObj.addEventListener('click',function(){});    //DOM
...
doucument.body.attachEvent('onload',initData);    //IE
document.body.addEventListener('load',initData);    //DOM
function(){
    ...
}

　이 메서드는 여러 청취 기능을 요소에 바인딩할 수 있지만 브라우저 호환성 문제에 주의해야 합니다.

작은 예: 이벤트 처리 기능의 역실행

html:

css:

js:

결과:

　 원본

　 내부 클릭 레이어 블록 결과:

3.Event Cycle

DOM

다음 프로세스를 따릅니다. 넣다 HTML 요소 간 전파: 첫 번째 단계: 이벤트 캡처, 이벤트 개체가 DOM 트리 아래로 전파됩니다(IE의 이벤트 모델에는 이러한 단계가 없습니다). 두 번째 단계: 대상이 트리거되고 이벤트 수신 기능 실행

　　세 번째 단계: 이벤트 버블링, 이벤트는 DOM 트리를 따라 위쪽으로 전파됩니다

　1. 이벤트 버블링 처리 메커니즘:

　　DHTML 하단의 객체에 대해 이벤트가 발생할 때 객체 모델에서는 위에 정의된 유사한 객체가 차례로 활성화됩니다. 이벤트 처리

　결과:

　　

IE

　　只有两个阶段，没有捕获

4.event对象

　　任何事件触发之后都会产生一个event对象

　　当事件发生时，自动创建，封装了事件信息（keyCode/screenX/screenY...）

　　event对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息，事件对象的常用属性：

- secElement（IE） / target（DOM）　　:    事件源对象
- eventPhase　　 :    事件传播的阶段
- clientX/offsetX/pageX/screenX/x    :    事件发生时的X坐标
- clientY/offsetY/pageY/screenY/y    :    事件发生时的Y坐标
- which/keyCode/charCode              :    键盘事件中按下的按键
- button    ：    鼠标哪个按键被按下
- cancelBubble    :    是否取消事件冒泡
- returnValue     :    是否阻止事件的默认行为

　　1.目标元素对象(从一而终)

　　　　1.HTML绑定事件方式

html:
onclick="fun(event)"　　//event必须这样写，不能变

　　　　//实际调用时，event会自动获得当前事件的对象
js:
fun(e){
    //e中获取到的就是当前的事件对象
　　　 }

　　　　2.js绑定方式

//DOM标准：自动创建event对象，默认以第一个参数传入自定义的事件处理函数对象
//IE标准：window全局的event属性，当事件发生时，自动创建event对象，保存在window.event中

var e=window.event||arguments[0];
var src=e.srcElement||e.target;

5.取消冒泡和利用冒泡

　　1.取消冒泡

DOM标准：e.stopPropagation()

IE标准：e.cancelBubble=true;

用在当前的事件处理函数的末尾

if(e.stopPropagation)
{
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}

　　2.利用冒泡

　　优化：若多个子元素中定义了相同的事件处理函数，只需要在共同的父元素上定义一次即可

　　原理：事件的捕获和冒泡不会受到程序的干扰，当触发子元素时，会捕获到该元素，然后在父元素触发事件。

6.取消事件

if(e.preventDefault){
    e.preventDefault();    //DOM
}else{
    e.returnValue=false;    //IE
}

　　何时取消：eg：表单提交之前，若验证未通过，就取消之后的自动提交。

위 내용은 JavaScript의 이벤트에 대한 간략하고 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!