蓝鸥原生JS:事件对象及事件类型效果演示

事件对象

鼠标事件

event.clientX在可视区中,鼠标点击的x坐标

event.clientY在可视区中,鼠标点击的y坐标

  示例:

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        document.onclick = function  () {

            alert(event.clientX + ',' + event.clientY);

        }

    </script></head><body>

</body></html>

  示例:一个跟随鼠标指针移动的红色块

蓝鸥原生JS:事件对象及事件类型效果演示_HTML5 蓝鸥


 

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div {

            width100px;

            height100px;

            background-color :red;

            position: absolute;

        }

 

    </style>

    <script type="text/javascript">

        // 鼠标移动时触发改事件

        document. = function  (ev) {

 

            // 获取距离文档顶部的高度

            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            // 获取距离文档左边的的宽度

            var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

 

            // 获取鼠标事件

            var oEvent = event || ev;

            // 获取到div

            var oDiv = document.getElementById('div');

 

            // 设置div的位置

            oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';

            oDiv.style.top = oEvent.clientY + oScrollTop + 'px';

 

        }

    </script></head><body>

 

    <div id = "div"></div>

</body></html>

  示例:一串跟着鼠标走的div



蓝鸥原生JS:事件对象及事件类型效果演示_HTML5 蓝鸥_02

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div {

            width10px;

            height10px;

            background-color :red;

            position: absolute;

        }

 

    </style>

    <script type="text/javascript">

        // 鼠标移动时触发改事件

        window.onload = function  () {

 

            var oDivs = document.getElementsByTagName('div');

 

            document. = function  (ev) {

                var oEvent = ev || event;

 

                oDivs[0].style.left = oEvent.clientX+'px';

                oDivs[0].style.top = oEvent.clientY+'px';

 

                for (var i = oDivs.length-1; i > 0; i--) {

                    oDivs[i].style.left = oDivs[i-1].style.left;

                    oDivs[i].style.top = oDivs[i-1].style.top;

 

                };

 

 

            }

 

 

        }

    </script></head><body>

 

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

        <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

        <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

        <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

        <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

    <div id = "div"></div>

 

</body></html>

键盘事件

 keyCode获取用户按下键盘的哪个按键

  如:键盘控制DIV移动

 ctrlKey 返回boolean值,按下时为true

 shiftKey 返回boolean值,按下时为true

 altKey 返回boolean值,按下时为true

  示例:用提示框将用户按的按键提示出来:

蓝鸥原生JS:事件对象及事件类型效果演示_HTML5 蓝鸥_03

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        // 按动键盘时触发事件

        document.onkeydown = function (ev) {

            var oEvent = ev || event;

            // 获取到按动的是哪个按键

            alert(oEvent.keyCode);

        }

    </script></head><body>

</body></html>

  示例:通过上下左右按键控制DIV的移动


<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #div1 {

            width100px;

            height100px;

            left:10px;

            top:10px;

            background-color: gray;

            position: absolute;

        }

    </style>

 

    <script type="text/javascript">

        document.onkeydown = function  (ev) {

            var oEvent = ev || event;

            var oDiv = document.getElementById('div1');

 

            if (oEvent.keyCode == 37) {

                oDiv.style.left =  oDiv.offsetLeft - 10 +'px';

            } else if (oEvent.keyCode==38) {

                oDiv.style.top = oDiv.offsetTop - 10 +'px';

            } else if (oEvent.keyCode == 39) {

                oDiv.style.left = oDiv.offsetLeft + 10 +'px';

            } else if (oEvent.keyCode == 40) {

                oDiv.style.top = oDiv.offsetTop + 10 +'px';

            };

        }

 

    </script></head><body>

    <div id = "div1"> </div></body></html>

  示例:按住control+enter键,提交留言框中的文字到留言板中

蓝鸥原生JS:事件对象及事件类型效果演示_HTML5 蓝鸥_04

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title>

 

    <script type="text/javascript">

        window.onload = function  () {

            var oText1 = document.getElementById('text1');

            var oText2 = document.getElementById('text2');

            var oBtn = document.getElementById('btn');

 

            // 鼠标点击提交按钮。进行留言

            oBtn.onclick = function  () {

                //点击提交按钮后,把留言框中的文字提交在留言区

                oText1.value += oText2.value + '\n';

                // 清空留言框

                oText2.value = '';

            };    

 

            // 按下control+enter按钮,进行留言,因为当前焦点在留言框中,所以事件要加载留言框中

            oText2.onkeydown = function  (ev) {

                var oEvent = ev || event;

 

                // 按下回车键和control键

                if (oEvent.keyCode == 13 && oEvent.ctrlKey) {

                    //点击提交按钮后,把留言框中的文字提交在留言区

                oText1.value += oText2.value + '\n';

                // 清空留言框

                oText2.value = '';

                };

            }

        }

    </script></head><body>

    <textarea id = 'text1' roes = '10' cols = '40'></textarea>

    <br />

 

    <input type = "text" id = 'text2'/>

    <input type="button" value = '提交' id = 'btn'/>

 

</body></html>

事件冒泡

  子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在body中的button,则该button的onclick事件也会传递给body、document中,触发他们的onclick里触发的函数.

  示例:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div {

            width100px;

            height100px;

            background-color: red;

            display: none;

        }

    </style>

 

 

    <script type="text/javascript">

        window.onload = function () {

 

            var oBtn = document.getElementById('button');

            var oDiv = document.getElementById('div');

 

            // 点击buton后,button的事件会被触发

            oBtn.onclick = function() {

                oDiv.style.display = 'block';

                alert("button被点击了");

            }

 

            // 由于事件冒泡,作为父级的document的onclick事件也会被触发

            document.onclick = function() {

 

                oDiv.style.display = 'none';

                alert("document被点击了")

            }

        }

    </script>

    </head>

    <body>

    <input type = "button" value = "显示" id = "button">

    <div id = "div"></div>

 

    </body>

    </html>

取消冒泡

  由于事件冒泡会触发父级的相关方法,所以我们经常会“取消事件冒泡”。

  取消事件冒泡的方法:event.cancelBubble=true

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div {

            width100px;

            height100px;

            background-color: red;

            display: none;

        }

    </style>

 

 

    <script type="text/javascript">

        window.onload = function () {

 

            var oBtn = document.getElementById('button');

            var oDiv = document.getElementById('div');

 

            // 点击buton后,button的事件会被触发

            oBtn.onclick = function(ev) {

                oDiv.style.display = 'block';

                alert("button被点击了");

                // 在这里取消事件冒泡,防止事件向父级传递

                // 兼容性考虑,有的浏览器的事件并不是'event',所以把点击事件作为参数传递过来

                var oEvent = ev || event;

                oEvent.cancelBubble=true;

 

            }

 

            // 由于事件冒泡,作为父级的document的onclick事件也会被触发

            document.onclick = function() {

 

                oDiv.style.display = 'none';

                alert("document被点击了")

            }

        }

    </script>

    </head>

    <body>

    <input type = "button" value = "显示" id = "button">

    <div id = "div"></div>

 

    </body>

    </html>

零基础学习HTML5—HTML+CSS基础视频教程

http://edu.51cto.com/course/course_id-6452.html