masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Objek acara dalam DOM

Memperkenalkan objek Acara ke dalam DOM (pelayar DOM ialah penyemak imbas standard)

(1) Lulus acara melalui atribut acara tag HTML Objek

Dalam DOM, objek acara dihantar ke fungsi sebagai parameter apabila acara memanggil fungsi.

Parameter peristiwa ialah kaedah penulisan tetap sistem Ia adalah huruf kecil dan tidak boleh dipetik. daripada objek elemen untuk lulus objek acara 

<!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>

Sifat objek peristiwa dalam DOM


jenis: jenis acara semasa

  • clientX dan clientY: jarak dari kiri dan atas tetingkap

  • pageX dan pageY: jarak dari kiri dan atas halaman web

  • screenX dan screenY: jarak dari kiri dan atas skrin

  • <!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>

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492832 permainan