jQuery 이벤트 및 이벤트 객체

먼저 이벤트를 추가할 때 자주 사용하는 방법을 살펴보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>javascript中的事件</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {
            document.getElementById("testDiv2").onclick = showMsg;
        })        function showMsg(event)
        {
            alert("!!!");
        }        
    </script></head><body>
    <div id="testDiv1" onclick="showMsg();">单击事件 1</div>
    <div id="testDiv2">单击事件 2</div>
    </body>
    </html>

이벤트를 추가하는 경우 가장 자주 onclick 요소 속성을 요소에 추가합니다.

testDiv2에 onclick 이벤트를 추가하는 방법은 Dom 속성을 수정하는 것입니다.

1장에서는 요소 속성과 Dom 속성이 무엇인지 설명했습니다. 이 두 가지 방법의 효과는 동일합니다. div를 클릭하면 프롬프트 상자가 표시됩니다.

효과는 동일하지만 주의하세요.

document.getElementById("testDiv2").onclick = showMsg;

는 다음과 동일합니다:

<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>

우리가 일반적으로 요소 속성을 수정하고 이벤트를 추가하는 방식이 실제로 익명 함수를 생성하는 방식은 다음과 같습니다.

document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};

이 익명 함수의 서명은 다음과 같습니다. 손으로 쓴 showMsg와 동일합니다. 따라서 showMsg를 onclick에 직접 할당할 수 있습니다. 이 방법의 단점은 다음과 같습니다.

1. "=" 할당을 사용하면 이벤트에 바인딩될 수 있습니다. 이전 시간부터 현재까지 모든 이벤트 처리 함수가 플러시됩니다.

2. 이벤트 함수(익명 함수이든 바운드 함수이든)에서 이벤트 객체를 얻는 방법은 다른 브라우저에서 특별한 처리가 필요합니다. IE, 이벤트 객체는 window 객체의 속성입니다. 이벤트 핸들러는 다음과 같이 이벤트 객체에 액세스해야 합니다.

       obj.onclick=function()
        {            var oEvent = window.event;
        }

DOM 표준에서는 이벤트 객체가 유일한 매개변수로 이벤트 핸들러에 전달되어야 합니다.

       obj.onclick=function()
        {            var oEvent = arguments[0];
        }

이 매개변수에 액세스하기 위해 인수[0]을 사용하는 것 외에도 매개변수 이름을 지정할 수도 있습니다. 위 코드는 다음과 같습니다.

       obj.onclick=function(oEvent)
        {
            
        }

현재 DOM 호환 브라우저에는 Firefox, Safari, Opera, IE7 등이 포함됩니다.

3 . 멀티캐스트 위임을 추가하는 기능은 브라우저마다 다릅니다.

다음은 "Javascript 공개 스크립트 라이브러리 시리즈(2): 이벤트 멀티캐스트 추가 방법" 문서에서 제공하는 여러 브라우저와 호환되는 멀티캐스트 위임을 추가하는 방법입니다. Delegation":

//统一的为对象添加多播事件委托的方法
/*  
    参数说明:
    oTarget     : 要添加事件的对象.比如"document".
    sEventType  : 事件类型.比如单击事件"click".
    fnHandler   : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"

사용 예:

    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    var cf = document.getElementById("CalFrame");
    if( cf != null && hideCalendar != null )
    {
        ScriptHelper.addEventListener( document, "click", hideCalendar );
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
    if( oTarget.addEventListener )//for dom
    {
        oTarget.addEventListener( sEventType, fnHandler, false )
    }
    else if( oTarget.attachEvent )//for ie
    {
        oTarget.attachEvent( "on" + sEventType, fnHandler);
    }
}

그러므로 먼저 <div onclick="..."></div>와 같은 요소 속성을 수정하여 이벤트를 추가하는 방식을 버려야 합니다. 멀티캐스트 이벤트 대리자를 추가하여 여러 이벤트 핸들러를 하나의 이벤트에 바인딩해 보세요. 예를 들어 문서 개체의 클릭 이벤트에 대한 팝업 레이어를 닫는 메서드를 추가하면 멀티캐스트를 사용해도 원본 이벤트에 영향을 주지 않습니다. 문서 개체의 처리 기능입니다.

지속적인 학습

새로운 파일

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript中的事件</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { document.getElementById("testDiv2").onclick = showMsg; }) function showMsg(event) { alert("!!!"); } </script> </head> <body> <div id="testDiv1" onclick="showMsg();">单击事件 1</div> <div id="testDiv2">单击事件 2</div> </body> </html>

제출하다 코드 재설정

자동운전