Apakah jenis acara JavaScript

Dalam JavaScript, jenis acara merujuk kepada cara peristiwa dicetuskan acara komposit , acara perubahan, acara HTML5, acara peranti, peristiwa sentuhan dan gerak isyarat, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Acara merujuk kepada gelagat yang boleh dikesan oleh JavaScript dan merupakan mekanisme "tindak balas pencetus". Tingkah laku ini merujuk kepada tindakan tertentu seperti memuatkan halaman, klik tetikus/klik dua kali, penunjuk tetikus meluncur ke atas kawasan tertentu, dll. Ia memainkan peranan yang sangat penting dalam mencapai kesan interaktif halaman.

Acara terdiri daripada tiga bahagian: sumber acara, jenis acara dan pengendali acara, juga dikenali sebagai "tiga elemen acara".

• Sumber acara: elemen yang mencetuskan (ialah) acara

• Jenis acara: cara acara dicetuskan (seperti klik tetikus atau klik papan kekunci)

• Pengendali acara: kod yang akan dilaksanakan selepas peristiwa dicetuskan (bentuk fungsi)

Tiga elemen di atas boleh hanya difahami sebagai "siapa yang mencetuskan peristiwa", "apakah peristiwa yang dicetuskan", "apa yang perlu dilakukan selepas peristiwa itu dicetuskan".

Terdapat banyak jenis peristiwa yang boleh berlaku dalam pelayar web. Di sini saya akan memberi tumpuan terutamanya pada jenis acara yang biasa digunakan berikut:

• Acara UI
• Acara fokus
• Acara tetikus dan roda
• Papan kekunci dan Acara teks
• Acara komposit
• Tukar acara
• Acara HTML5
• Acara peranti
• Acara sentuh dan gerak isyarat

Bahagian Satu: Acara UI

UI dalam acara UI ialah (Antara Muka Pengguna, Antara Muka Pengguna ), yang dicetuskan apabila pengguna berinteraksi dengan elemen sauna halaman.

Acara UI terutamanya termasuk memuatkan, memunggah, membatalkan, ralat, pilih, ubah saiz, tatal acara.

1.muat acara

　Acara ini ialah apabila halaman dimuatkan sepenuhnya (termasuk semua imej, fail js, css luaran sumber seperti fail), peristiwa pemuatan pada tetingkap akan dicetuskan.

　Acara ini ialah acara yang paling biasa digunakan dalam JavaScript Sebagai contoh, kami sering menggunakan window.onload=function(){}; , apabila halaman Jalankan fungsi selepas ia dimuatkan sepenuhnya.

Selain itu, saya tidak pernah tahu bahawa acara ini juga boleh digunakan pada elemen lain, seperti elemen imej, seperti yang ditunjukkan di bawah:

24b0157c9e81669eddbc0e7346f6da55　　

Imej segera Akan ada tetingkap pop timbul selepas ia dimuatkan sepenuhnya. Sudah tentu, ia juga boleh dilaksanakan menggunakan JS, seperti yang ditunjukkan di bawah:

var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
      event=EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

2 acara bongkar

　Jelas sekali, acara ini. adalah berkaitan dengan beban Peristiwa adalah relatif. Dipecat selepas dokumen telah dipunggah sepenuhnya. Masa memunggah dicetuskan apabila pengguna beralih dari satu halaman ke halaman yang lain. Penggunaan acara ini yang paling biasa adalah untuk mengosongkan rujukan untuk mengelakkan kebocoran memori.

　Acara ini juga mempunyai dua cara untuk ditentukan. Satu ialah kaedah JavaScript, menggunakan EventUtil.addHandler();

Perlu diingat bahawa anda mesti berhati-hati semasa menulis kod dalam acara onload, kerana ia dicetuskan selepas halaman dipunggah, jadi Objek yang wujud selepas halaman dimuatkan mungkin tidak semestinya wujud selepas onload dicetuskan!

edd5d29a43d3fdae6e9c483e7ccef712

3.mengubah saiz acara

　 Apabila tetingkap penyemak imbas diubah saiznya kepada lebar atau ketinggian baharu, peristiwa ubah saiz akan dicetuskan. Peristiwa ini dicetuskan pada tetingkap. Jadi pengendali juga boleh ditentukan melalui JS atau atribut onresize dalam elemen badan. 　

79c1a952cdd0073d2f829668d9eae853

　 Jika anda menulis kod ini, tetingkap akan muncul apabila saiz penyemak imbas berubah.

4.tatal acara

Acara ini akan dicetuskan berulang kali semasa dokumen ditatal, jadi kod pengendali acara hendaklah disimpan semudah seperti mungkin.

第二部分：焦点事件

　　焦点事件会在页面元素获得或失去焦点时触发。主要有下面几种：

• blur   在元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
• focus   在元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
• focusin  在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
• focusout 在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。

　　注意：即使blur和focus不冒泡，也可以在捕获阶段侦听到他们。

第三部分：鼠标与滚轮事件

　　鼠标事件是Web开发中最常用的一类事件，因为鼠标是最主要的定位设备。

• click---用户单击鼠标左键或按下回车键触发
• dbclick---用户双击鼠标左键触发。
• mousedown---在用户按下了任意鼠标按钮时触发。
• mouseenter---在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。
• mouseleave---元素上方的光标移动到元素范围之外时触发。不冒泡。
• mousemove---光标在元素的内部不断的移动时触发。
• mouseover---鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。
• mouseout---用户将光标从一个元素上方移动到另一个元素时触发。   
• mouseup---在用户释放鼠标按钮时触发。

　　注意到：上述所有事件除了mouseenter和mouseleave外都冒泡。

　　重要：只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。同样，只有在同一个元素上触发两次click事件，才会触发dbclick事件。

　　dbclick事件的产生过程如下：

• mousedown

• mouseup

• click

• mousedown

• mouseup

• click

• dbclick

　　上面介绍了有关鼠标的事件，下面介绍一些对于鼠标光标的位置：客户区坐标位置、页面坐标位置、屏幕坐标位置

一、客户区坐标位置

　　通过客户区坐标可以知道鼠标是在视口中什么位置发生的。

　　clientX和clientY分别表示鼠标点击的位置。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。这两个都是event的属性。举例如下：

    8515479eab28241a7b375919bc70f9bf点我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a
        var button=document.getElementById("clickMe");
        button.onclick=function(event){
            alert(event.clientY+""+event.clientX);
        };    
     2cacc6d41bbb37262a98f745aa00fbf0

　　当我点击按钮的左上角时，显示为00。效果如下：

二.页面坐标位置

　　和客户区坐标位置不同，页面坐标位置表示鼠标光标在页面而非视口中的位置。因此坐标是从页面本身而非视口的左边和顶边计算的。如果前面的话不能很好的理解，接着看这里：在页面没有滚动的情况下，页面坐标位置和客户区坐标位置是相同的。

　　页面坐标

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7页面坐标位置6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        *{
            margin:0;
            padding:0;
        }
        p{
            width: 800px;
            height: 1200px;            /*我的电脑的视口高度为960px；*/
            background: #ccc;
        }    531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
    be83eb51f340b921e483a6b46a36fe5f 点击我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a        
    var button=document.getElementById("button");
        button.onclick=function(){
            alert("pageX为"+event.pageX+"pageY为"+event.pageY);
        };    2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在上面的例子中，我把p的高设置为了1200px；而我的浏览器视口高度为960px；所以一定需要滚动我们才能点击按钮，最终得到的结果是：pageX为13pageY为1210。

然而IE8及更早的浏览器是不支持事件对象上的页面坐标的，即不能通过pageX和pageY来获得页面坐标，这时需要使用客户区坐标和滚动信息来计算了。而滚动信息需要使用document.body(混杂模式)、document.documentElement(标准模式)中的scrollLeft和scrollTop属性。举例如下：

    be83eb51f340b921e483a6b46a36fe5f 点击我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a        var button=document.getElementById("button");
        button.onclick=function(){            
        var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);           
         var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight);
            alert("pageX为"+pageX+"pageY为"+pageY);
        };    
      2cacc6d41bbb37262a98f745aa00fbf0

此例子在IE浏览器下可得到同样结果。

三.屏幕坐标位置

　　与前两者又有所不同，鼠标事件发生时，还有一个光标相对于整个电脑屏幕的位置。通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的位置。举例如下：

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7页面坐标位置6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        *{
            margin:0;
            padding:0;
        }    531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    be83eb51f340b921e483a6b46a36fe5f 点击我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a        
    var button=document.getElementById("button");
        button.onclick=function(){
            alert("X为："+event.screenX+"Y为："+event.screenY);
        };    
      2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

最终的结果如下：

显然screenX和screenY是相对于屏幕的左方和上方的。

四.修改键

　　当点击某个元素时，如果我们同时按下了ctrl键，那么事件对象的ctrlKey属性值将为true，否则为false，对于alt、shift、meta（windows键盘的windows键、苹果机的Cmd键）的事件属性altKey、shiftKey、metaKey同样如此。下面举例如下：

    be83eb51f340b921e483a6b46a36fe5f 点击我65281c5ac262bf6d81768915a4a77ac0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a        
    var button=document.getElementById("button");
        button.onclick=function(){            
        var array=new Array();            
        if(event.shiftKey){
                array.push("shift");
            }            if(event.ctrlKey){
                array.push("ctrl");
            }            if(event.altKey){
                array.push("alt");
            }            if(event.metaKey){
                array.push("meta");
            }
            alert(array.join(","));
        };    
      2cacc6d41bbb37262a98f745aa00fbf0

这个例子中，我首先创建了一个array数组，接着如果我按下了那几个键，就会存入相应的名称。这里我同时按下了四个键，结果如下：

即最终将数组中的四个值拼接成了字符串显示出来。

七、鼠标滚轮事件

    3f1c4e4b6b16bbbd69b2ee476dc4f83a
        document.onmousewheel=function(){
            alert(event.wheelDelta);
        };    
     2cacc6d41bbb37262a98f745aa00fbf0

当我向下滚动滚轮时，效果如下：

 

 

 

第四部分：键盘和文本事件

　　该部分主要有下面几种事件：

• keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。

• keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。

• keyup:当用户释放键盘上的键时触发。

• textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。

　　这几个事件在用户通过文本框输入文本时才最常用到。

　　键盘事件：

    document.addEventListener("keydown",handleKeyDownClick,false);

        function handleKeyDownClick(event) {            
        var e = event||window.event||arguments.callee.caller.arguments[0];            
        if (e&&e.keyCode == 13) {
                alert("keydown");
            }
        }

【相关推荐：javascript学习教程】

Atas ialah kandungan terperinci Apakah jenis acara JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!