JavaScript学习笔记7

最新推荐文章于 2024-11-12 17:31:26 发布

此间诗意杀人地

最新推荐文章于 2024-11-12 17:31:26 发布

阅读量124

点赞数

分类专栏：笔记文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_43763188/article/details/122421785

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、事件对象

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下等等
onmousemove：该事件将会在鼠标在元素上移动时被触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            height: 100px;
            width:300px;
            margin: 10px auto;
            position: relative;
            border:solid 1px aquamarine;
        }
        #div2{
            height: 20px;
            width: 300px;
            margin: 10px auto;
            position: relative;
            border:solid 1px beige;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
       var div1=document.getElementById("div1");
       var div2=document.getElementById("div2");
       //event=event||window.event;解决事件的兼容性问题
       div1.onmousemove=function(event){
         //clientX和cliebtY可以获取鼠标指针的水平和垂直坐标。
        var x=event.clientX;
        var y=event.clientY;
         div2.innerHTML="x="+x+",y="+y;
       }
    </script>
</body>
</html>

//盒子随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            height: 100px;
            width:300px;
            margin: 10px ;
            position: relative;
            border:solid 1px aquamarine;
        }
        #div2{
            height: 20px;
            width: 300px;
            margin: 10px;
            position: relative;
            border:solid 1px green;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
       var div1=document.getElementById("div1");
       var div2=document.getElementById("div2");
       document.onmousemove=function(event){
           //获取鼠标的坐标
           var left=event.pageX;
           var top=event.pageY;
           //可以获取滚动条滚动的距离
           //Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
           //火狐浏览器认为浏览器的滚动条是html的，
           //var st=document.documentElement.scrollTop;
           var st=document.body.scrollTop;
           var sl=document.body.scrollLeft;
           div1.style.left=left+sl+"px";
           div1.style.top=top+st+"px";
       }
    </script>
</body>
</html>

二、事件的冒泡(Bubble)

事件冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
大部分情况下冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。取消冒泡：将事件对象的cancelBubble设置为true，即可取消冒泡。
应用：事件的委派，指将事件统一绑定给元素的共同祖先元素，这样后代元素上的事件被触发时，可以冒泡到祖先元素，从而通过祖先元素的单击响应函数来处理事件。例如：为超链接绑定单击响应函数，希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的。我们可以将其绑定给元素的共同父元素。
事件委派是利用了事件冒泡，通过委派可以事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <button id="button1">添加</button>
   <ul id="ul1">
       <li><a href="" class="link">超链接</a></li>
       <li><a href="" class="link">超链接</a></li>
       <li><a href="" class="link">超链接</a></li>
   </ul>
   <script>
       var button1=document.getElementById("button1");
       var ul1=document.getElementById("ul1");
       button1.onclick=function(){
           var li=document.createElement("li");
           li.innerHTML="<a href='javascript:;' class='link'>超链接</a>";
           ul1.appendChild(li);
       }  
       ul1.onclick=function(event){
           //如果触发对象是我们期望的元素，则执行，否则不执行
           event=event||window.event;
           if(event.target.className=="link"){
               alert("hhhh");
           }
       }
   </script>
</body>
</html>

三、事件的绑定

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个。
通过addEventListener()通过这个方法可以为元素绑定响应函数，可以同时为一个相同事件绑定多个响应函数。参数：1.事件的字符串;2.回调函数，当事件被触发时函数会被调用;3.是否在捕获阶段触发事件，需要一个布尔值，一般传false。
attachEvent()在IE8中可以使用这个方法来绑定多个响应函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。
bind函数

     function bind(obj,eventStr,callback){
         if(obj.addEventListener){
             obj.addEventListener(eventStr,callback,false);
         }else{
             obj.attachEvent("on"+eventStr,callback);
               
             //obj.attachEvebt("on"+eventStr,function(){
             //    callback.call(obj);//有点不懂
             //})
         }
     }

四、事件的传播(了解)

关于时间的传播，网警公司和微软公司有不同的理解。微软公司认为事件应是由内向外的传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后向外传播给后代元素。
W3C综合了两个公司的方案，将事件分为3个阶段。
- 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但默认此时不会触发事件。
- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
- 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况不会希望在捕获阶段触发事件，所有这个参数一般都是false。

五、鼠标事件

当鼠标放在被拖拽元素上按下时，开始拖拽onmousedown;
当鼠标移动时被拖拽元素跟随鼠标移动onmousemove;
当鼠标松开时，被拖拽元素固定在当前位置onmouseup;
onmousewheel鼠标滚轮滚动事件，会在滚轮滚动的时候触发，但火狐不支持该属性。在火狐中使用DOMMouseScroll来绑定滚动事件，该事件需要addEventListeren()来绑定。
wheelDelta可以获取鼠标滚轮滚动的方向，向上滚120，向下滚-120，这个值可以只看正负，不看大小。火狐不支持这个属性，在火狐中使用event.detail来获取滚动的方向。

六、键盘事件

键盘事件：键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
onkeydown和onkeyup按键被被按下和按键被松开。对于onkeydown来说，如果一直按着某个按键不松手，则事件就一直触发，当onkeydown连续触发时，第一次和第二次之间间隔会很长，其他的会非常的快，这种设计是为了防止误操作的发生。
可以通过keyCode来获取按键的ASCLL编码，通过他可以判断哪个按键被按下。除了keyCode,事件对象还提供了几个属性：altkey、ctrlkey、shiftkey等用来判断alt ctr shift是否被按下。
在文本框中输入内容，是onkeydown的默认属性。如果在onleudown中取消了默认行为，不会出现在文本框中。
练习：

//键盘移动div，有个问题还没解决，向右向下都很快，但向左向上就很慢
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
        var div1=document.getElementById("div1");
        document.onkeydown=function(event){
            var speed=10;
            //37.38.39.40左上右下
            switch(event.keyCode){
               case 37:
                   div1.style.left=div1.offsetLeft-speed+"px";
                   break;
               case 39:
                   div1.style.left=div1.offsetLeft+ speed+"px";
                   break;
               case 38:
                   div1.style.top=div1.offsetTop- speed+"px";
                   break;
               case 40:
                   div1.style.top=div1.offsetTop+speed+"px";
                   break;
            }
        }
    </script>
</body>
</html>