JS基础-事件对象&&事件的冒泡&&事件的绑定以及事件的传播-蒲公英云

1.鼠标移动的事件对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
#areadiv{
    width:300px;
    height:100px;
    border:1px solid #333;
}
#showdiv{
    width:300px;
    height:50px;
    border:1px solid #333;
    margin-top:10px;
}
</style>
<script type="text/javascript">
window.function()
{
    //要实现的功能是当鼠标在areadiv中移动时，会在showdiv中显示鼠标的坐标
    //第一步，首先获取两个div
    var bigdiv=document.getElementById("areadiv");
    var smalldiv=document.getElementById("showdiv");
    //绑定鼠标移动事件
    bigdiv.onmousemove=function(event)
    {
        //事件对象，当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如，鼠标的坐标，键盘哪个键被按下，鼠标滚轮滚动的方向
        //在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件作为window对象的属性保存的
        //clientX可以获取鼠标指针的水平坐标，clientY可以获取鼠标指针的垂直坐标
        event=event||window.event;//为了解决事件对象的兼容性
        var x=event.clientX;
        var y=event.clientY;
        //在showdiv中显示坐标
        smalldiv.innerHTML="x="+x+","+"y="+y;
    };
};
</script>
</head>
<body>
<div id="areadiv"></div>
<div id="showdiv"></div>
</body>
</html>

效果图如下：

2.div跟随鼠标移动的练习

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
#box1{
    width:100px;
    height:100px;
    background-color:#F00;
    position:absolute;/*非常重要，一定要开启绝对定位*/
}
</style>
<script type="text/javascript">
window.function()
{
    //要实现的功能是div跟随着鼠标移动
    //第一步，首先获取box1
    var box=document.getElementById("box1");
    //绑定鼠标移动事件(给文档绑定)
     document.onmousemove=function(event)
    {
        //解决浏览器的兼容问题
        event=event||window.event;
        //获取垂直滚动条滚动的距离
        //Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取,火狐等浏览器认为浏览器的滚动条是HTML的
        var st=document.body.scrollTop||document.documentElement.scrollTop;
        var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
        //获取鼠标的坐标
        //clientX/clientY用于获取鼠标在当前可见窗口的坐标
        //div的偏移量是相对于整个页面的
        //pageX/pageY可以获取鼠标相对于整个页面的坐标，但IE8不支持这两个属性
        var x=event.clientX;
        var y=event.clientY;
        //设置div的偏移量
        box.style.left=x+sl+"px";
        box.style.top=y+st+"px";    
    };
};
</script>
</head>
<body style="height:1000px;width:1000px">
<div id="box1"></div>
</body>
</html>

3.事件的冒泡：所谓冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分冒泡都是有用的，如果不希望事件发生冒泡可以通过事件对象来取消冒泡（取消冒泡,可以将事件对象的cancelBubble设置为true，即可取消冒泡）。下面是冒泡的应用即事件的委派（1.事件的委派：指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。2.事件的委派利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能）

在这里插入代码片<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的委派练习</title>
<script type="text/javascript">
//为每一个超链接绑定一个单击响应事件(我们希望只绑定一次，即可应用到多个元素上即使元素是后添加的)
window.function()
{
    //获取button事件
    var btn=document.getElementById("btn1");
    //获取ul事件
    var u1=document.getElementById("ul1");
    //绑定单击响应事件
    btn.onclick=function()
    {
        //创建li
        var li=document.createElement("li");
        //向li中添加内容
        li.innerHTML="<a href='javascript:;' class='link'>新链接</a>";
        //将li添加到ul中
        u1.appendChild(li);
    };
    //为ul绑定一个单击响应事件
    u1.onclick=function(event)
    {
        event=event||window.event;
        //target表示触发事件的对象，如果触发事件的对象使我们期望的元素就执行，否则不执行
        if(event.target.className=="link")
        {
            alert("我是ul的单击响应函数");
        }
    };        
};
</script>
</head>
<body>
<button id="btn1">添加新链接</button>
<ul id="ul1" style="background-color:#0F0">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>

效果图如下

3.事件的绑定
绑定单击响应事件的两种方法
第一种方法：使用对象.事件=函数的形式，只能同时为一个元素的一个事件绑定一个响应函数不能绑定多个，若绑定多个则后面的会覆盖前面的
第二种方法，使用addEventListener()，通过这个方法也可以为元素绑定响应函数，参数有三个，第一个参数为，事件的字符串（不要on，如click），第二个参数为，回调函数，当事件被触发时该函数会被调用，第三个参数，是否在捕获阶段触发事件，需要一个布尔值，一般都传false
说明：使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，但是此方法不支持IE8及以下浏览器，所有IE8及以下浏览器需要使用attachEvent()方法，这个方法有二个参数，第一个参数，事件的字符串（需要on，如”onclick”），第二个参数，回调函数，这个方法也可以同时为一个元素的相同事件绑定多个响应函数，不同的是它是先绑定后执行，执行顺序和addEventListener()相反

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的绑定练习</title>
<script type="text/javascript">
//点击按钮以后，弹出一个内容
window.function()
{
    //获取按钮
    var btn=document.getElementById("btn1");
    band(btn,"click",function(){alert(1);});
    band(btn,"click",function(){alert(2);});
    band(btn,"click",function(){alert(3);});
};
//定义一个函数，用来为指定函数绑定响应函数。addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window.参数，obj，要绑定事件的对象，eventstr,事件的字符串,callback,回调函数
function band(obj,eventstr,callback)
{
    if(obj.addEventListener)
    {
        obj.addEventListener(eventstr,callback,false);
    }
    else
    {
        //IE8及以下
        //this是由调用方式决定的(解决this不一致)
      obj.attachEvent("on"+eventstr,function()
      {
          //在匿名函数中调用回调函数
          callback.call(obj);}
      );
    }
}
</script>
</head>
<body>
<button id="btn1">点击一下</button>
</body>
</html>

4.事件的传播
关于事件的传播网景公司和微软公司有不同的理解，微软公司认为事件应该是由内向外传播，也就是当事件被触发时，应该先触发当前元素的事件，然后再向当前元素的祖先元素传播，也就是说事件应该在冒泡阶段执行；网景公司认为事件应该由外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素，然后再向内传播给后代元素。W3C综合了两个公司的方案，将事件的传播分为了三个阶段，第一阶段为捕获阶段，在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但是默认不会触发事件。第二阶段为目标阶段，事件捕获到目标元素，捕获结束开始在目标元素上触发事件。第三阶段为冒泡阶段，事件从目标元素向祖先元素传递，依次触发祖先元素上的事件。如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，但是一般情况下我们不会希望在捕获阶段就触发事件，所有一般情况下addEventListener()的第三个参数为false。IE8以下的浏览器中没有捕获阶段。图解如下：
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的传播练习</title>
<style type="text/css">
#box1
{
    width:300px;
    height:300px;
    background-color:#0F0;
    margin:100px 200px;
}
#box2
{
    width:200px;
    height:200px;
    background-color:#FF0;
}
#box3
{
    width:150px;
    height:150px;
    background-color:#3CF;
}
</style>
<script type="text/javascript">
//为每一个div绑定一个单击响应函数
window.function()
{
//获取三个div
var b1=document.getElementById("box1");
var b2=document.getElementById("box2");
var b3=document.getElementById("box3");
band(b1,"click",function(){alert("我是box1的响应函数");});
band(b2,"click",function(){alert("我是box2的响应函数");});
band(b3,"click",function(){alert("我是box3的响应函数");});
};
function band(obj,eventstr,callback)
{
    if(obj.addEventListener)
    {
        obj.addEventListener(eventstr,callback,false);
    }
else
{
    obj.attachEvent("on"+eventstr,function()
    {
        callback.call(obj);
    });
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>