DOM의 이벤트 객체

DOM에 이벤트 객체 도입하기(DOM 브라우저는 표준 브라우저)

(1) HTML 태그의 이벤트 속성을 통해 이벤트 객체를 전달합니다.

DOM에서는 이벤트 객체를 이벤트 객체로 사용합니다. 함수를 호출하는 이벤트 함수에 전달되는 매개변수입니다.

이벤트 매개변수는 시스템의 고정된 쓰기 방식이며 모두 소문자이며 인용할 수 없습니다. 이벤트 개체 매개변수입니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            //在HTML中，如何通过事件来传递event对象参数
            function get(e){
                //获取单击时，距离窗口左边和上边的距离
                alert(e.clientX+","+e.clientY);
            }     
        </script>
    </head>
    <body style="margin:0px">
        <img width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" onclick="get(event)" />
    </body>
</html>

(2) 이벤트 개체를 전달하려면 요소 개체의 이벤트 속성을 사용하세요

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            window.onload = function(){
                //获取id=img1的图片对象
                var imgObj=document.getElementById("img1");
                //增加onclick事件
                imgObj.onclick=get;
            }
            //不能传event参数，但形参必须接收
            //第一个形参，一定是event对象
            function get(e){
                //获取单击时，距离窗口左边和上边的距离
                alert(e.clientX+","+e.clientY);
            }    
        </script>
    </head>
    <body style="margin:0px">
        <img id="img1" width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
    </body>
</html>

DOM

의 이벤트 개체 속성: 현재 이벤트 유형
clientX 및 clientY: 창 왼쪽과 위쪽으로부터의 거리
pageX 및 pageY: 웹 페이지 왼쪽 및 상단으로부터의 거리 거리
screenX 및 screenY: 화면 왼쪽 및 상단으로부터의 거리

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            function get(e)
            {
                //获取单击时，相关坐标信息
                var str = "窗口左边距离："+e.clientX+"，窗口顶边距离："+e.clientY;
                str += "\n网页左边距离："+e.pageX+"，网页顶边距离："+e.pageY;
                str += "\n屏幕左边距离："+e.screenX+"，屏幕顶边距离："+e.screenY;
                str += "\n事件类型："+e.type;
                window.alert(str);
            }    
        </script>
    </head>
    <body style="margin:0px">
        <img id="img1" width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" onclick="get(event)" />
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> //在HTML中，如何通过事件来传递event对象参数 function get(e){ //获取单击时，距离窗口左边和上边的距离 alert(e.clientX+","+e.clientY); } </script> </head> <body style="margin:0px"> <img width="400" src="/upload/course/000/000/009/580af7f52278b486.jpg" onclick="get(event)" /> </body> </html>

제출하다 코드 재설정

자동운전