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）事件冒泡问题








		

		
posted @ 
2018-05-02 22:29 
东易韦 
阅读(155) 
评论(0) 
编辑 
收藏 
举报