DOM 内のイベントオブジェクト

DOMへのEventオブジェクトの導入（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)イベントオブジェクトを渡すには要素オブジェクトのevent属性を使用します

<!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のイベントオブジェクトプロパティ

type: 現在のイベントタイプ
clientXとclientY: ウィンドウの左と上からの距離
pageX と pageY: Web ページの左と上からの距離
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>

提出するリセットコード

自動運転