js事件总结

最新推荐文章于 2022-06-29 23:03:15 发布

M'r白墙

最新推荐文章于 2022-06-29 23:03:15 发布

阅读量191

点赞数 1

分类专栏： js基础总结

本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/89887755

版权

js基础总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、事件对象 event

事件对象是用来获取事件的详细信息：如鼠标位置、键盘键码等等

1、获取event对象(兼容性写法)

var oEvent = ev || event;   // 兼容写法

2、事件流

事件冒泡：从子元素往父元素冒泡
就是事件从目标开始，网上冒泡直到页面的最上一级标签，也就是当一个元素被触发，同样的事件也会在该元素的所有祖先元素中从内向外一次触发。

解决冒泡事件：
事件名.stopPropagation()或者直接return false。
在IE中，window.e.cancelBubble=true;

事件捕获：
当我们使用事件捕获时，父级元素先触发，自己元素后触发。
事件捕获，是一个从祖先节点到后节点的过程。
IE只支持冒泡，不支持捕获。

阻止浏览器的默认行为：
e.preventDefault()
在IE中：
window.e.returnValue=false;
或者return false；

3、鼠标位置
鼠标位置：clientX、clientY

4、键盘事件
keyCode 获取用户按下键盘的哪个按键
其他属性 ctrlKey、shiftKey、altKey

二、简易拖拽demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: #ccc;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        var oDiv = document.getElementById("box");
        var disX = 0;
        var disY = 0;

        oDiv.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX - oDiv.offsetLeft;
            disY = ev.clientY - oDiv.offsetTop;
            
            if(oDiv.setCaptrue){
               oDiv.onmousemove = mouseMove;
               oDiv.onmouseup = mouseUp;
               oDiv.setCaptrue()
            } else {
               document.onmousemove = mouseMove;
               document.onmouseup = mouseUp;
            }

            function mouseMove(ev) {
                var ev = ev || window.event;
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;

                if(l < 0){
                    l = 0;
                } else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }

                if(t < 0){
                    t = 0;
                } else if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                 
                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
            }

            function mouseUp() {
                this.onmousemove = null;
                this.onmouseup = null;
                if(oDiv.releaseCaptrue){
                    oDiv.releaseCaptrue()
                }
            }
            return false;
        }
    </script>
</body>
</html>

// 拖拽封装
<script>
    /* 父 */
function Drag(id){
   var _this = this;
   this.disX = 0;
   this.disY = 0;
   this.oDiv = document.getElementById(id);
   this.oDiv.onmousedown = function(ev){
       _this.fnDown(ev);
       return false; 
   }
}

Drag.prototype.fnDown = function(ev) {
    var _this = this;
    var ev = ev || window.event;
    this.disX = ev.clientX - this.oDiv.offsetLeft;
    this.disY = ev.clientY - this.oDiv.offsetTop;

    document.onmousemove = function(ev){
        _this.fnMove(ev)
    };
    document.onmouseup = function(){
        _this.fnUp()
    };

}


Drag.prototype.fnMove = function(ev) {
    var ev = ev || window.event;
    this.oDiv.style.left = ev.clientX - this.disX + 'px';
    this.oDiv.style.top = ev.clientY - this.disY + 'px';
}

Drag.prototype.fnUp = function() {
    document.onmousemove = null;
    document.onmouseup = null;
}


/* 子 */
function LimitDrag(id){
   Drag.call(this,id);   // 继承父类属性
}
for(var i in Drag.prototype){
    LimitDrag.prototype[i] = Drag.prototype[i]
}

LimitDrag.prototype.fnMove = function(ev){
    var ev = ev || event;
    var l = ev.clientX - this.disX;
    var t = ev.clientY - this.disY;

    if( l < 0 ){
        l = 0;
    } else if( l > document.documentElement.clientWidth - this.oDiv.offsetWidth){
        l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
    }

    if( t < 0 ){
        t = 0;
    } else if( t > document.documentElement.clientHeight - this.oDiv.offsetHeight){
        t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
    }

    this.oDiv.style.left = l + 'px';
    this.oDiv.style.top = t + 'px';
}
</script>

************************************************

// 使用上面的封装方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        #div1,#div2{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        #div1{
            background: #ccc;
        }
        #div2{
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
        new Drag("div1");
        // LimitDrag
        new LimitDrag("div2")
    </script>
</body>
</html>

// 自定义滚动条demo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: none;
            margin: none;
            list-style: none;
        }

        #parent {
            width: 500px;
            height: 20px;
            background: #ccc;
            position: relative;
            margin: 20px auto;
        }

        #box {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            background: red;
        }

        #conet_box {
            width: 200px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        #conet{
            width: 100%;
            position: absolute;
            left: 0;top:0;
            padding: 4px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="box"></div>
    </div>

    <div id="conet_box">
       <div id="conet">
           conet百度百科中对Base64有一个很好的解释：“Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法”。
            什么是“可打印字符”呢？为什么要用它来传输8Bit字节码呢？在回答这两个问题之前我们有必要来思考一下什么情况下需要使用到Base64？Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。什么是可打印字符？在ASCII码中规定，0~31、127这33个字符属于控制字符，32~126这95个字符属于可打印字符，也就是说网络传输只能传输这95个字符，不在这个范围内的字符无法传输。那么该怎么才能传输其他字符呢？其中一种方式就是使用Base64。
             Base64，就是使用64个可打印字符来表示二进制数据的方法。Base64的索引与对应字符的关系如下表所示：---------------------作者：艾华生来源：CSDN
        原文：https://blog.csdn.net/qq_20545367/article/details/79538530
        版权声明：本文为博主原创文章，转载请附上博文链接！
        百度百科中对Base64有一个很好的解释：“Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法”。什么是“可打印字符”呢？为什么要用它来传输8Bit字节码呢？在回答这两个问题之前我们有必要来思考一下什么情况下需要使用到Base64？Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。什么是可打印字符？在ASCII码中规定，0~31、127这33个字符属于控制字符，32~126这95个字符属于可打印字符，也就是说网络传输只能传输这95个字符，不在这个范围内的字符无法传输。那么该怎么才能传输其他字符呢？其中一种方式就是使用Base64。 Base64，就是使用64个可打印字符来表示二进制数据的方法。Base64的索引与对应字符的关系如下表所示：
        ---------------------
        作者：艾华生
        来源：CSDN
        原文：https://blog.csdn.net/qq_20545367/article/details/79538530
        版权声明：本文为博主原创文章，转载请附上博文链接！百度百科中对Base64有一个很好的解释：“Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法”。
         什么是“可打印字符”呢？为什么要用它来传输8Bit字节码呢？在回答这两个问题之前我们有必要来思考一下什么情况下需要使用到Base64？Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。什么是可打印字符？在ASCII码中规定，0~31、127这33个字符属于控制字符，32~126这95个字符属于可打印字符，也就是说网络传输只能传输这95个字符，不在这个范围内的字符无法传输。那么该怎么才能传输其他字符呢？其中一种方式就是使用Base64。
        Base64，就是使用64个可打印字符来表示二进制数据的方法。Base64的索引与对应字符的关系如下表所示：
        ---------------------
        作者：艾华生
        来源：CSDN
        原文：https://blog.csdn.net/qq_20545367/article/details/79538530
        版权声明：本文为博主原创文章，转载请附上博文链接！
       </div>    
    </div>
    <script>
          var oParent = document.getElementById("parent");
          var oBox = document.getElementById("box");
          var oConetBox = document.getElementById("conet_box");
          var oConet = document.getElementById("conet");
          var disX = 0;

          oBox.onmousedown = function(ev){
              var ev = ev || event;
              disX = ev.clientX - oBox.offsetLeft;   // 鼠标在元素上的位置

              document.onmousemove = function(ev){
                  var ev = ev || event;
                  var l = ev.clientX - disX;
                  if( l < 0 ){
                      l = 0;
                  } else if( l > oParent.offsetWidth - oBox.offsetWidth) {
                      l = oParent.offsetWidth - oBox.offsetWidth;
                  }
                  oBox.style.left = l + 'px';

                  var scale = l / (oParent.offsetWidth - oBox.offsetWidth);            
                  oConet.style.top = scale * (oConetBox.offsetHeight - oConet.offsetHeight) + 'px';
              }

              document.onmouseup = function(){
                  document.onmousemove = null;
                  document.onmouseup = null;
              }
              return false;
          }
    </script>
</body>
</html>

三、事件绑定

在IE下使用 attachEvent
在Chrome 和 FF 下使用 addEventListener

attachEvent 两个参数（事件名，函数）事件名需要加上 on
addEventListener 三个参数（事件名，函数，false或者true）事件名不需要加 on,
addEventListener 第三个参数 true、false 决定了是先捕获还是先冒泡，如果是true就是捕获，反之则是冒泡

// 事件绑定封装
function myAddEvent(obj, ev, fn){
    if(obj.attachEvent){
       obj.attachEvent("on"+ev,fn)
    } else {
       obj.addEventListener(ev,fn,false)
    }
}
var oBox = document.getElementById("box");
myAddEvent(oBox,"click",function(){
    console.log("a")
})
myAddEvent(oBox,"click",function(){
    console.log("b")
})

M'r白墙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件总结

一、事件对象 event事件对象是用来获取事件的详细信息：如鼠标位置、键盘键码等等1、获取event对象(兼容性写法)var oEvent = ev || event; // 兼容写法2、事件流事件冒泡：从子元素往父元素冒泡就是事件从目标开始，网上冒泡直到页面的最上一级标签，也就是当一个元素被触发，同样的事件也会在该元素的所有祖先元素中从内向外一次触发。解决冒泡事件：事件名....
复制链接

扫一扫