js常见的事件类型

浅浅的花香味﹌ 2022-12-11 15:06 186阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1][]

tips:纠正双击事件是ondblclick

1.鼠标事件

<body>
        <div id="obt">点击我</div>
        <div id="display"></div>
        <script>
            function handle(ev) {
                /*处理兼容性，获得事件对象,
                或者var ev = ev || event;
                下面最各个浏览器对事件对象的支持做一下简单介绍:
                1.IE8和IE8以下浏览器只支持window.event这个事件对象，IE8以上浏览器不但支持window.event也支持传递的ev（可以是任意其他合法名称）
                2.谷歌浏览器下不但支持window.event也支持传递的ev。
                3.火狐浏览器只支持传递的ev。
                */
                if (window.event) ev = window.event;
                var oDiv = document.getElementById('display');
                oDiv.innerHTML += ev.type + '<br>';
            }
            window.onload = function () {
                var obt = document.getElementById('obt')
                obt.onmousedown = handle;
                obt.onmouseup = handle;
                obt.onmouseover = handle;
                obt.onclick = handle;
                obt.ondblclick = handle;
            }
        </script>
    </body>

2 键盘事件

<body>
        <textarea cols="50" rows="4"></textarea>
        <div id="display"></div>
        <script>
            function handle(ev) {
                /*处理兼容性，获得事件对象,
                或者var ev = ev || event;
                下面最各个浏览器对事件对象的支持做一下简单介绍:
                1.IE8和IE8以下浏览器只支持window.event这个事件对象，IE8以上浏览器不但支持window.event也支持传递的ev（可以是任意其他合法名称）
                2.谷歌浏览器下不但支持window.event也支持传递的ev。
                3.火狐浏览器只支持传递的ev。
                */
                if (window.event) ev = window.event;
                var oDiv = document.getElementById('display');
                oDiv.innerHTML += ev.type + ' &nbsp';
            }
            window.onload = function () {
                var oTextArea = document.getElementsByTagName('textarea')[0]
                oTextArea.onkeydown = handle;
                oTextArea.onkeyup = handle;
                oTextArea.onkeypress = handle;
            }
        </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221123/486a3a547aa244f4b12191c8780292c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20221123/98c46eb00206430a981332b6c7e50af2.png