day47—JavaScript事件基础应用

转行学开发，代码100天——2018-05-02

1.事件对象

JavaScript中事件对象通常用定义变量ev或event表示。为了兼顾浏览器兼容问题，定义事件对象为

var oEvent = ev||event;

2.鼠标事件

鼠标事件通常有获取鼠标点击位置clientX;clientY

鼠标移动事件：onmousemove;

鼠标点击事件：onmousedown;

鼠标抬起事件：onmouseup;

如设置一个鼠标跟随程序：

物体跟随鼠标移动。

<!DOCTYPE html>

<html>

<head>

    <title>javascript 鼠标事件</title>

    <style type="text/css">

        #div1{width: 100px;height: 100px;background: red;position: absolute;}

    </style>

    <script type="text/javascript">

        document.onmousemove = function(ev)

        {

            var oEvent = ev||event;

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

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

            oDiv.style.left = oEvent.clientX+"px";

            oDiv.style.top = oEvent.clientY+scrollTop+"px";

        }

    </script>

</head>

<body style="height: 2000px;">

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

</body>

</html>

注意：在使用clientX和clientY时一定要结合scrollLeft和scrollTop一起使用。

在这里可以试着去封装一个获取鼠标坐标的函数。

//鼠标坐标值获取

function getPos(ev)

{

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

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

    return {

        x:ev.clientX+scrollLeft,

        y:ev.clientY+scrollTop

    };

}

3.事件冒泡

事件冒泡通常会影响网页运行效果，一般需要设置阻止事件冒泡的发生。

如一个模仿select按钮的效果，通过点击按钮，弹出内容框；点击视图中其他区域，内容框消失。

其代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>仿select效果</title>

    <style type="text/css">

        #div1{width: 200px; height: 200px;background: #ccc;display: none;}

    </style>

    <script type="text/javascript">

        window.onload = function()

        {

            var btn1 = document.getElementById("btn1");

            var div1 = document.getElementById("div1");

            btn1.onclick = function(ev)

            {

                var oEvent = ev||event;

                div1.style.display = "block";

                alert("按钮被点击了");

                oEvent.cancelBubble = true;

            }

            document.onclick = function()

            {

                div1.style.display = "none";

                alert("document被点击了");

            }

        }

    </script>

</head>

<body>

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

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

</body>

</html>

可以看到，代码中对按钮添加了阻止冒泡的功能，oEvent.cancelBubble = true;

否则在点击显示按钮后，先后弹出

"按钮被点击了"

"document被点击了"
但实际上内容灰色框并不会显示。

所以在事件的使用中至少需要注意以下问题：

1）兼容性问题
2）事件冒泡问题

巴特西

day47—JavaScript事件基础应用

最新文章

热门文章