事件（JS）

最新推荐文章于 2024-04-25 20:29:33 发布

倚楼風听雨

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量452

点赞数

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

本文链接：https://blog.csdn.net/KennGum/article/details/107284820

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

事件

事件对象

onmousemove

该事件将会在鼠标在元素中移动时被触发

事件对象

当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘那个按键被按下鼠标滚轮滚动的方向
在IE8中，相应函数被处罚时，浏览器不会传递事件对象
- 在IE8及以下的浏览器中，是将事件对象作为 window对象的属性保存的

clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
clientX和clientY
- 用于获取鼠标在当前的可见窗口的坐标
pageX和pageY
- 可以获取鼠标相对于当前页面的坐标
- 但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不能使用

获取滚动条滚动的距离

chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的

target

event中的target表示的触发事件的对象

whellDelta

event.wheelDelta可以获取鼠标滚轮滚动的方向
向上滚120 向下滚-120（这个值我们不看大小，只看正负）

事件冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过对象来取消冒泡

var box2 = document.getElementById("box2");
            box2.onmousemove = function(event){
                event = event || window.event;
                // 取消冒泡
                event.cancelBubble = true;
            };

事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数
- 它只能同时为一个元素的一个事件绑定一个响应函数
  - 不能绑定多个，如果绑定多个，则后边会覆盖掉前边的
addEventListener() 标准模型方式
- 通过这个方法设置监听器也可以为元素绑定响应函数
- 参数：
  1. 事件的字符串，不要on
  2. 回调函数，当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
- 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个相应函数，这样当事件被触发时，相应函数将会按照函数的绑定顺序执行
- 这个方法不支持IE8及以下的浏览器
attachEvent() IE8中及以下使用
- 在IE8中可以使用attachEvent() 来绑定事件
- 参数：
  1. 事件的字符串，要on
  2. 回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window

定义一个函数，用来为指定元素绑定响应函数
- 参数：
  obj 要绑定事件的对象
  evenStr 事件的字符串（不要on）
  callback 回调函数

// 统一 this
function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , false);
                }else{
                    /*
                       this是谁由调用方式决定
                       callback.call(obj)
                     */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }

事件的传播

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

拖拽

拖拽的流程
1. 当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2. 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3. 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为（IE8不支持）

//拖拽效果（IE8及以下不可用）
window.onload = function(){
            var box1 = document.getElementById("box1");
            
            box1.onmousedown = function(event){
                event = event || window.event;
                //div的偏移量 鼠标.clientX - 元素.offsetLeft
                //div的偏移量 鼠标.clientY - 元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;
                
                // 为document绑定一个onmousemove事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    //获取鼠标的坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;
                    //修改box1的位置
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                };
                
                // 为document绑定一个onmouseup事件
                document.onmouseup = function(){
                    //取消document的onmousemove事件
                    document.onmousemove = null;
                    //取消document的onmouseup事件
                    document.onmouseup = null;
                };
                return false;
            };
        };

当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上

提取一个专门用来设置拖拽的函数

参数：开启拖拽的元素

// 拖拽函数  (兼容IE8)
window.onload = function () {
            var box1 = document.getElementById("box1");
            drag(box1);
            
            /* 
                设置一个专门用来设置拖拽的函数
                    参数：开启拖拽的元素
            */
            function drag(obj) {
                // 设置box1捕获所有鼠标按下的事件
                obj.onmousedown = function (event) {
                    /*
                        setCapture()
                          - 只有IE支持，但是在火狐中调用时不会报错，
                               而如果使用chrome调用会报错
                    */
                    // if(box1.setCapture){
                    //     box1.setCapture();
                    // }
                    obj.setCapture && box1.setCapture();
                    
                    event = event || window.event;
                    //div的偏移量 鼠标.clientX - 元素.offsetLeft
                    //div的偏移量 鼠标.clientY - 元素.offsetTop
                    var ol = event.clientX - obj.offsetLeft;
                    var ot = event.clientY - obj.offsetTop;
                    
                    // 为document绑定一个onmousemove事件
                    document.onmousemove = function (event) {
                        event = event || window.event;
                        //获取鼠标的坐标
                        var left = event.clientX - ol;
                        var top = event.clientY - ot;
                        //修改box1的位置
                        obj.style.left = left + "px";
                        obj.style.top = top + "px";
                    };
                    
                    // 为document绑定一个onmouseup事件
                    document.onmouseup = function () {
                    
                        //取消document的onmousemove事件
                        document.onmousemove = null;
                        
                        //取消document的onmouseup事件
                        document.onmouseup = null;
                        
                        //当鼠标松开时，取消对事件的捕获
                        obj.releaseCapture && obj.releaseCapture();
                    };
                    return false;
                };
            };
        };

滚轮事件

onmousewheel
- 鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性
- 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件，注意该事件需要通过addEventListener() 函数来绑定
event.wheelDelta
- 获取鼠标滚轮滚动的方向
- wheelDelta这个值我们不看大小，只看正负
- 这个属性在火狐中不支持
  - 在火狐中使用event.detail来获取滚动的方向
  - 向上滚-3 向下滚3
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以return false取消默认行为
- 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault()方法来取消默认行为（不支持IE8及以下）

//滚轮事件
window.onload = function(){
            var box1 = document.getElementById("box1");
            
            box1.onmousewheel = function(event){
                event = event || window.event;
                if(event.wheelDelta > 0 || event.detail < 0){
                    //向上滚 box1变短
                    box1.style.height = box1.clientHeight - 10 + "px";
                }else{
                    //向下滚 box1变长
                    box1.style.height = box1.clientHeight + 10 + "px";
                }
                //兼容浏览器(火狐)
                event.preventDefault && event.preventDefault();
                
                return false;
            };
            
            bind(box1, "DOMMouseScroll", box1.onmousewheel);
            
            //定义一个函数，用来为指定元素绑定响应函数
            function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , true);
                }else{
                    /*
                      this是谁由调用方式决定
                      callback.call(obj)   
                     */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }
        };

键盘事件

onkeydown
- 键盘被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快（这种设计是为了防止误操作的发生）
- 在文本框中输入内容，属于onkeydown的默认行为，如果取消该默认行为，则输入的内容不会出现在文本框中

onkeyup
- 键盘被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

keycode
- 获取按键的编码
- 通过keycode可以判断哪个按键被按下
- 数字编码 48-57 对应 0-9
- 数字编码 37-40 对应左上右下

altKey
ctrlKey
shiftKey
- 这三个属性用来判断alt、ctrl、shift是否被按下，如果按下则返回true，否则返回false

//键盘移动div 
<script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            document.onkeydown = function(e){
                e = e || event;
                //定义一个变量 表示速度
                var speed = 100;
                switch(event.keyCode){
                    case 37 :
                        box1.style.left = box1.offsetLeft - speed + 'px';
                        break;
                    case 38 :
                        box1.style.top = box1.offsetTop - speed + 'px';
                        break;
                    case 39 :
                        box1.style.left = box1.offsetLeft + speed + 'px';
                        break;
                    case 40 :
                        box1.style.top = box1.offsetTop + speed + 'px';
                        break;
                };
            };
        };
    </script>

倚楼風听雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件（JS）

事件事件对象事件冒泡（Bubble）事件的绑定事件的传播拖拽滚轮事件键盘事件事件对象onmousemove该事件将会在鼠标在元素中移动时被触发事件对象当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘那个按键被按下鼠标滚轮滚动的方向在IE8中，相应函数被处罚时，浏览器不会传递事件对象在IE8及以下的浏览器中，是将事件对象作为 window对象的属性保存的
复制链接

扫一扫