js事件总结

最新推荐文章于 2024-04-25 20:29:33 发布
最新推荐文章于 2024-04-25 20:29:33 发布
阅读量213 收藏
点赞数 1
分类专栏： js基础总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/89887755
版权

一、事件对象 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白墙
关注
专栏目录
JavaScript事件学习小结(五）js中事件类型之鼠标事件
11-22
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
js常用事件总结
dgz41976的博客
11-18 189
一.live(),click(),delegate(),bind(),change(),.on详解 参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp 1.live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来...
JavaScript事件的总结
qq_48516121的博客
11-04 423
一、基本的事件类型： 1.单击:onclick 2.双击事件:ondbclick 3.加载:onload 4.得到焦点：onfocus 5.失去焦点:onblur 6.改变事件:onchang ...
js事件类型总结
最自由的笑的博客
07-23 542
UI事件 load 当页面完全加载后触发 unload 当页面完全卸载后触发 abort 停止下载时，载入的内容没有加载完触发 error 发生错误时触发 select 当用户选择文本框中的一个或多个字符时触发 resize 当窗口大小发生变化时触发 scroll 当用户滚动带滚动条元素中的内容时，在该元素上面触发 ps：鼠标滚轮可以触发键盘上下键也可以触发 焦点事件 blur 在元素失去焦点时触
js 事件小结 表格区别
12-11
一般事件 事件 浏览器支持 描述 onClick HTML: 2|3|3.2|4Browser: IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2|3|3.2|4Browser:IE4|N4|O 鼠标双击事件 onMouseDown ...
JavaScript事件学习小结（三）js事件对象
11-23
JavaScript事件是Web开发中不可或缺的一部分...总结，理解JavaScript事件对象及其在不同浏览器环境下的行为是实现跨浏览器事件处理的关键。熟悉这些差异可以帮助开发者编写更兼容的代码，确保在多种浏览器上运行良好。
JavaScript事件学习小结(二)js事件处理程序
11-25
在JavaScript事件学习小结(二)中，主要探讨的是如何处理这些事件，即事件处理程序。事件处理程序是当特定事件发生时执行的函数，如用户点击按钮或页面加载完成。以下是关于JavaScript事件处理程序的详细解释： 1. *...
JS基本事件总结
wangzunkuan的博客
03-23 489
概述 JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。主要事件表总结如下： 鼠标单击事件( onclick ） onclick是鼠标单击事...
JS中的事件归纳总结
w8789760的博客
04-01 1091
事件分为三类 鼠标事件 键盘事件 html事件 鼠标事件 鼠标的一切操作都是鼠标事件 点击 移动 滚轮 键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前 html的事件 页面加载事件 默认触发的 执行一次
js事件总结之概述
心灵刈博
03-03 540
何为事件 说到事件，总会想到何为事件，我的理解事件就是由于用户的某些行为使浏览器产生了交互、响应。我查了百度百科，它说：“当文档、浏览器、元素或与之相关的对象发生某些有趣的事情，web浏览器就会产生事件。”额、、、额，就是对象具体些，道理好像是一样。还没我的好懂，哈哈，下面是本家及书籍总结之言，理解就行。
js的常见事件总结
m0_66039084的博客
03-21 790
<!-- <script> // 事件：用户操作页面产生的行为叫做事件。 // 事件处理函数：一旦触发事件，事件函数就会自动执行 </script> --> <!-- <div id="btn">点击div</div> <script> // onclick 点击事件 var btn= document.querySelec...
js 常用事件总结
锦瑟年华L的博客
04-24 266
事件绑定方法 1、在DOM元素中直接绑定 <button onclick="alert('谢谢支持')">按钮</button> 2、对象属性方式 DomObject.onclick = function(){} 3、addEventListener方式( W3C标准 ) 添加事件 xxxDomObject.addEventListener('click...
关于JS事件的学习总结
min_0329的博客
02-23 308
鼠标事件onclick  元素被点击时发生onmousedown  鼠标按键被按下时发生onmouseup  鼠标按键被松开时发生oncontextmenu  用户右击鼠标时触发并打开上下文菜单ondblclick   对象被双击时发生键盘事件onkeydown  用户按下一个键盘按键时发生onkeypress  按下按键时触发onkeyup  用户释放键盘按钮时添加事件的三种方式1、通过html...
[Javascript]：JS的常用事件总结
我只是个程序员。
09-23 429
下面收集了网上一些已经分好类的常用事件，方便自己查找相关事件知识。如有需要，请自取。 Window事件 针对 window 对象触发的事件，也就是常说的页面事件，属于浏览器事件类型（应用到 标签）： 事件 触发该事件的条件 onload 页面内容加载完成时触发此事件 onunload 文档卸载，即当前
js常用事件案例总结
李青林的博客
01-14 2065
一,完整表单的验证 Q Q 手机 邮箱 座机 姓名 function $(id) { return document.getElementById(id); } var inpQQ = $("inp1"); var inpMobile = $("inp2"); var inpEmail = $
JS事件总结超详细-思维导图
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-25 1082
经过了一段时间事件学习，我又重新对事件进行了总结，废话不多说，直接上思维导图不想看思维导图的可以看下方内容，也是思维导图上的全部内容
js基础知识（2）
最新发布
智商不在服务区的博客
04-25 1147
addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。参数1：事件名称必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 click ,而不是使用 onclick。参数2：function 必须。指定要事件触发时执行的函数。注意：事件对象会作为第一个参数传入函数。参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件处理程序（事件句柄）在捕获阶段执行false默认。
JavaScript 事件大全：类型、支持浏览器和描述
JS 事件小结表格区别 JS 事件是 JavaScript 中的一种机制，用于响应用户交互或其他事件。这些事件可以分为两大类：一般事件和页面相关事件。 一般事件是指用户与页面元素的交互，例如鼠标点击、双击、按下、松开、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值