第十二节 JS事件高级应用

Posted 2021-02-04 han-bky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第十二节 JS事件高级应用相关的知识，希望对你有一定的参考价值。

事件绑定：

　　IE方式：（仅适用于IE9及以下，其他的比如FF、Chrome、IE11都不适用）

　　　　attachEvent（事件名称，函数）：绑定事件处理函数

　　　　detachEvent（事件名称，函数）：接触绑定

　　DOM方式：（FF、Chrome、IE11都适用）

　　　　addEventListener（事件名称，函数，捕获）

　　　　removeEventListener（事件名称，函数，捕获）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        function myAddEvent(obj, ev, fn) {
            if (obj.attachEvent) {
                obj.attachEvent(‘on‘+ev, fn);
            } else {
                obj.addEventListener(ev, fn, false);
            }
        }

        window.onload = function () {
            var oBtn = document.getElementById(‘btn1‘);

            // oBtn.onclick = function () {
            //     alert(‘我会不会被替换？‘);
            // };
            // oBtn.onclick = function () {
            //     alert(‘你当然被替换了！‘);
            // };
            //上述两个点击事件，只会执行后面的一个，道理其实跟变量的赋值一样，第二次的赋值会把第一次的赋值覆盖掉，
            //但是如果我们不想让他们相互覆盖，而是两次都执行怎么解决呢？这时候就需要用到事件绑定：如下

            //attachEvent(事件名称, 函数) 但是该方法只适用于IE9及以下的版本，IE11、FF和Chrom都不适用
            // oBtn.attachEvent(onclick, function () {
            //     alert(‘我会不会被替换？‘);
            // });
            // oBtn.attachEvent(onclick, function () {
            //     alert(‘你不会被替换了！‘);
            // });
            //FF和Chrome我们有如下方法：addEventListener(事件名称, 函数, 捕获)
            // oBtn.addEventListener("click", function () {    //注意是“click”，而非“onclick”
            //     alert(‘我会不会被替换？‘);
            // }, false);
            // oBtn.addEventListener("click", function () {    //注意是“click”，而非“onclick”
            //     alert(‘你不会被替换了！‘);
            // }, false);

            //解决兼容问题
            // if (oBtn.attachEvent) {
            //     oBtn.attachEvent(onclick, function () {
            //         alert(‘我会不会被替换？‘);
            //     });
            //     oBtn.attachEvent(onclick, function () {
            //         alert(‘你不会被替换了！‘);
            //     });
            // } else {
            //     oBtn.addEventListener("click", function () {    //注意是“click”，而非“onclick”
            //         alert(‘我会不会被替换？‘);
            //     }, false);
            //     oBtn.addEventListener("click", function () {    //注意是“click”，而非“onclick”
            //         alert(‘你不会被替换了！‘);
            //     }, false);
            // }
            //把上述代码封装起来
            myAddEvent(oBtn, ‘click‘, function () {
                alert(‘我会不会被替换？‘);
            });
            myAddEvent(oBtn, ‘click‘, function () {
                alert(‘你不会被替换了！‘);
            });
        };
    </script>
</head>
<body>
    <button id="btn1">按钮</button>
</body>
</html>

View Code

　　何时使用事件绑定

　　绑定事件和this

　　绑定匿名函数，会无法删除

高级拖拽-1

　　复习拖拽原理：

　　　　距离不变

　　　　三件事件：down、move、up

　　限制范围：

　　　　对位置进行判断：

　　　　　　例1：不能拖出窗口的div（上一节的拖拽）

　　　　　　例2：不能拖出指定对象的div，加上磁性吸附

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
        #div2{
            width: 400px;
            height: 300px;
            background: #cccccc;
            position: relative;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);
            var oDiv2 = document.getElementById(‘div2‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    var to = oEvent.clientY-disY;

                    var ri = oDiv2.offsetWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var bo = oDiv2.offsetHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度

                    // if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                    //     le = 0;
                    // } else if (le > ri) {
                    //     le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    // }
                    //
                    // if(to<0) {
                    //     to = 0;     //让窗口从上边出不去
                    // } else if (to > bo){
                    //     to = bo;    //让窗口从下边出不去
                    // }

                    //磁性吸附，就是把上述语句改一下就好了
                    if (le<20){     //如果left<20时，直接让其等于0，即直接吸附在左边框上
                        le = 0;
                    } else if (le > ri-20) {
                        le = ri;    //当div.left 大于 div2的右边框-20px时，即div2离右边框小于20像素的时候，直接吸附在右边框
                    }

                    if(to<20) {
                        to = 0;     //如果top<20时，直接让其等于0，即直接吸附在上边框
                    } else if (to > bo-20){
                        to = bo;    //当div.top 大于 div2的底边框-20时，即div2离底边框小于20像素的时候，直接吸附在下边框
                    }

                    oDiv.style.left = le+‘px‘;
                    oDiv.style.top = to+‘px‘;

                };

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

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
    <div id="div2"><div id="div1"></div></div>
</body>
</html>

View Code

高级拖拽-2：

　　图片拖拽：阻止默认事件

　　文字选中：

　　　　阻止默认事件

　　　　IE下拖动有问题：问题是当我拖动时，会相应“选中”鼠标所掠过的某些文本，甚至包括被拖动窗口中的文本，这时候我们需要用到事件捕获（事件捕获其实就是，把整个网页上空白的东西，全都集中在某一个控件中）来解决该问题，但是好多浏览器（除了IE）不支持“setCapture()”，如下在IE浏览器下正常运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捕获</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById(‘btn1‘);

            oBtn.onclick = function () {
                alert("a");
            };
            oBtn.setCapture();
        };
    </script>
</head>
<body>
<button id="btn1">按钮</button>
</body>
</html>

View Code

再如，我们上节讲到拖拽，用document来替换oDiv对象，因为div控件太小，鼠标快速移动时，容易脱离div，此时如果我们使用“事件捕获”而不用document替换oDiv对象，可以达到同样的效果，同时网页中的字体也不会被选中，同样需要注意的是，下属代码只在IE浏览器下起作用，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                oDiv.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    oDiv.style.left = oEvent.clientX-disX+‘px‘;
                    oDiv.style.top = oEvent.clientY-disY+‘px‘;
                };

                oDiv.onmouseup = function () {
                    oDiv.onmousemove = null;
                    oDiv.onmouseup = null;
                };
                oDiv.setCapter();
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

View Code

但是上述语句又存在一个小问题，是我们想选中网页中字体的时候也选不中了，怎么解？其实我们只需加一行代码“oDiv.releaseCapture();”，加在“鼠标抬起事件中”，如下：

1 oDiv.onmouseup = function () {
2       oDiv.onmousemove = null;
3       oDiv.onmouseup = null;
4 
5       oDiv.releaseCapture();
6 };
7 oDiv.setCapter();

再提醒一次，setCapture()只适用于IE浏览器，其他浏览器可能不支持，下面我们解决兼容问题，并把相同代码合并：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                //我们仍然用if...else...语句解决兼容问题
                if (oDiv.setCapture){     //IE浏览器
                    oDiv.onmousemove =mouseMove;

                    oDiv.onmouseup = mouseUp;
                    oDiv.setCapter();
                } else {    //Chrome、FF等浏览器
                    document.onmousemove = mouseMove;

                    document.onmouseup = mouseUp;
                }
                //由于上述代码有很多相似之处，我们做一下代码合并：
                function mouseMove(ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    var to = oEvent.clientY-disY;

                    var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    if(to<0) {
                        to = 0;     //让窗口从上边出不去
                    } else if (to > bo){
                        to = bo;    //让窗口从下边出不去
                    }

                    oDiv.style.left = le+‘px‘;
                    oDiv.style.top = to+‘px‘;
                };

                //再次封装
                function mouseUp() {
                    document.onmousemove = null;
                    document.onmouseup = null;

                    if (oDiv.releaseCapture) {
                        oDiv.releaseCapture();
                    }
                };

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
        

    </script>
</head>
<body>
    我就是想放点文字做测试用，没有别的！我就是想放点文字做测试用，没有别的！<br/>
    我就是想放点文字做测试用，没有别的！我就是想放点文字做测试用，没有别的！
    <div id="div1">我就是想放点文字做测试用，没有别的！</div>
</body>
</html>

View Code

　　与DOM配合

　　　　带框的拖拽：其实就是“被拖拽控件”的轮廓（一个黑线边框）先被拖拽走，当鼠标左键抬起，被拖拽控件再瞬间移动到“框”内，并与之重合，“框”消失。

　　　　保留原有位置的拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽-带框</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        .box{
            border: 1px dashed black;   /*dashed表示虚线框*/
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                //带框的拖动，首先当鼠标按下，创建一个div
                var oBox = document.createElement(‘div‘);

                oBox.className = ‘box‘;
                oBox.style.width = oDiv.offsetWidth-2+"px";
                oBox.style.height = oDiv.offsetHeight-2+"px";

                oBox.style.left = oDiv.offsetLeft+‘px‘;
                oBox.style.top = oDiv.offsetTop+‘px‘;

                document.body.appendChild(oBox);    //把创建的“框”添加到<body>标签内

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    var to = oEvent.clientY-disY;

                    var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    if(to<0) {
                        to = 0;     //让窗口从上边出不去
                    } else if (to > bo){
                        to = bo;    //让窗口从下边出不去
                    }

                    // oDiv.style.left = le+‘px‘;
                    // oDiv.style.top = to+‘px‘;
                    //现在我们把先移动的div，换成“框”先移动
                    oBox.style.left = le+‘px‘;
                    oBox.style.top = to+‘px‘;
                };

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;

                    //让div瞬间移动到框内，并与之重合
                    oDiv.style.left = oBox.offsetLeft+‘px‘;
                    oDiv.style.top = oBox.offsetTop+‘px‘;

                    document.body.removeChild(oBox);    //去掉所有创建的“框”
                };

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

View Code

自定义滚动条

　　拖拽：

　　　　只有横向拖拽（左右方向的滚动条）：所以我们可以把与纵坐标相关的东西全部去掉即可；当然如果是上下方向的滚动条，我们只需把与横坐标相关的东西去掉即可

　　　　限制范围——范围的大小

　　　　计算比例——当前值/最大值

　　控制其他对象：

　　　　例1：控制物体的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条-控制物体大小</title>
    <style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;  /*上下 左右*/
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 0px;
            height: 0px;
            background: green;
        }
    </style>
    <script>
        window.onload = function () {
            var oParent = document.getElementById(‘parent‘);
            var oDiv = document.getElementById(‘div1‘);
            var oDiv2 = document.getElementById(‘div2‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            // var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                // disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    // var to = oEvent.clientY-disY;

                    // var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var ri = oParent.offsetWidth-oDiv.offsetWidth;
                    // var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
                    // var bo = oParent.offsetHeight-oDiv.offsetHeight;

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    // if(to<0) {
                    //     to = 0;     //让窗口从上边出不去
                    // } else if (to > bo){
                    //     to = bo;    //让窗口从下边出不去
                    // }
                    oDiv.style.left = le+‘px‘;
                    // oDiv.style.top = to+‘px‘;

                    //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
                    // document.title = le/580;
                    var scale = le/ri;  //ri表示父级的宽 减去 本身的宽

                    oDiv2.style.width = 400*scale+‘px‘;     //用滚动条控制div2的宽高，也即控制div2的显示大小
                    oDiv2.style.height = 400*scale+‘px‘;

                };

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

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>

View Code

　　　　例2：控制物体的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条-控制物体透明度</title>
    <style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;  /*上下 左右*/
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 400px;
            height: 400px;
            background: green;
            filter: alpha(opacity:0);
            opacity: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var oParent = document.getElementById(‘parent‘);
            var oDiv = document.getElementById(‘div1‘);
            var oDiv2 = document.getElementById(‘div2‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            // var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                // disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    // var to = oEvent.clientY-disY;

                    // var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var ri = oParent.offsetWidth-oDiv.offsetWidth;
                    // var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
                    // var bo = oParent.offsetHeight-oDiv.offsetHeight;

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    // if(to<0) {
                    //     to = 0;     //让窗口从上边出不去
                    // } else if (to > bo){
                    //     to = bo;    //让窗口从下边出不去
                    // }
                    oDiv.style.left = le+‘px‘;
                    // oDiv.style.top = to+‘px‘;

                    //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
                    // document.title = le/580;
                    var scale = le/ri;  //ri表示父级的宽 减去 本身的宽

                    // oDiv2.style.width = 400*scale+‘px‘;     //用滚动条控制div2的宽高，也即控制div2的显示大小
                    // oDiv2.style.height = 400*scale+‘px‘;

                    //通过获取滚动条的比例，来控制物体透明度
                    oDiv2.style.filter = ‘alpha(opacity:‘+scale*100+‘)‘;
                    oDiv2.style.opacity = scale;
                };

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

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>

View Code

　　　　例3：控制文字滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条-控制文字滚动</title>
    <style>
        #parent{
            width: 600px;
            height: 20px;
            background: #cccccc;
            position: relative;
            margin: 10px auto;  /*上下 左右*/
        }
        #div1{
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 400px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }
        #div3{
            position: absolute;
            left: 0;
            top: 0;
            padding: 5px;
        }
    </style>
    <script>
        window.onload = function () {
            var oParent = document.getElementById(‘parent‘);
            var oDiv = document.getElementById(‘div1‘);
            var oDiv2 = document.getElementById(‘div2‘);
            var oDiv3 = document.getElementById(‘div3‘);

            var disX = 0;   //记录横向距离，鼠标的横坐标减去div的横坐标
            // var disY = 0;   //记录纵向距离，鼠标的纵坐标减去div的纵坐标

            oDiv.onmousedown = function (ev) {
                var oEvent = ev||event;

                disX = oEvent.clientX - oDiv.offsetLeft;
                // disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function (ev) {
                    var oEvent = ev||event;

                    var le = oEvent.clientX-disX;
                    // var to = oEvent.clientY-disY;

                    // var ri = document.documentElement.clientWidth - oDiv.offsetWidth;   //页面可视区的宽度 减去 窗口宽度
                    var ri = oParent.offsetWidth-oDiv.offsetWidth;
                    // var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
                    // var bo = oParent.offsetHeight-oDiv.offsetHeight;

                    if (le<0){  //如果left<0时，直接让其等于0，即让窗口从左边出不去
                        le = 0;
                    } else if (le > ri) {
                        le = ri;    //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
                    }

                    // if(to<0) {
                    //     to = 0;     //让窗口从上边出不去
                    // } else if (to > bo){
                    //     to = bo;    //让窗口从下边出不去
                    // }
                    oDiv.style.left = le+‘px‘;
                    // oDiv.style.top = to+‘px‘;

                    //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
                    // document.title = le/580;
                    var scale = le/ri;  //ri表示父级的宽 减去 本身的宽

                    //通过获取滚动条的比例，来控制物体透明度
                    // oDiv2.style.width = 400*scale+‘px‘;     //用滚动条控制div2的宽高，也即控制div2的显示大小
                    // oDiv2.style.height = 400*scale+‘px‘;

                    //通过获取滚动条的比例，来控制div3的top值，以使字体上下滚动
                    oDiv3.style.top = -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+‘px‘;
                };

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

                return false;   //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
            };
        };
    </script>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2">
    <div id="div3">
        【优美语句】  人生，有起落。学会挥袖从容，暖笑无殇。人生，既要淡，又要有味。不甘心就不要放弃，看不过去就起来改变。
        要么就证明自己的能力，要么就闭嘴接受现实。所有好走的路都是下坡，失败是可以接受的，但是没有试图奋斗过的失败是没有借
        口的零分。<br/><br/>
        【优美语句】  人说，秋，是薄凉，是沉寂。我说，秋，是明净，是含蓄，是敛藏在岁月风骨里的美丽，所有的风过雨落都在自己
        清宁的心里。秋，像个素净温婉的女子，着一袭素色而明丽的衣裳，让秋云飘逸在月前，听秋雨滴落在窗边，惊扰多少寒凉而善感
        的梦，枕得秋情不忍眠。<br/><br/>
        【优美语句】  走在人生的路上，在我心里，装饰一条蜿蜒的路，因为我要走上千百遍;在我心里，浇灌着最美的花一朵，因为我要
        种下一路芬芳;在我心里，飘着一缕醉人的清风，我要撒下生命的意义;在我心里，剪一习流淌的时光，只为我一生优雅的老去。
        <br/><br/>
        【优美语句】  三月的清晨夜的容颜将要散去，于似醒非睡中，被一阵阵清脆的声音叫醒了，睁开睡眼惺忪的眸，目光慢慢移到墙角
        空调孔的地方。不知何时，卧室这个不起眼的地方就被这几只不请自来的朋友安了家。嘴角扬起浅浅的笑容，然后继续闭上眼睛，聆
        听鸟儿的声音。<br/><br/>
        【优美语句】  岁月沉积着忧伤，一笺墨香，卷写离殇，一纸情长，却再也写不出你许诺的地老天荒，如果可以，请许我一段时光，
        我依然守候着你说过的那些地久天长，我愿用一生的凝望，换你一个回眸，我愿用一生的守候，换你一刻温柔。<br/><br/>
        【优美语句】  常常错过，慢慢遗忘，不是每一次路遇的风景都是此生唯一。缘来缘去缘如水，生命如过客匆匆，皆因心境的有所不
        同。真心珍惜这短暂的一生吧!别为缘分的匆忙而感叹，莫为生活中的忙碌而纠结，更不必为了羡慕别人的所谓幸福生活而自寻烦恼。
        <br/><br/>
        【优美语句】  梅的美是独一无二的美，它的美在于它的气质，它的那种寂寞中的自足，那种凌寒独自开的孤傲。梅属乔木，枝干有
        枯焦感，虬曲苍劲，看似老气横秋，清淡素雅的梅花开在这样的枝上，却愈显冰玉之姿，有一种让人屏息的美。<br/><br/>
        【优美语句】  从一方天堂，到一处烟火，从一朵花开，到一片叶落，历经大半个年头，只为那触目惊心的一眸，然而，梅犹自不肯
        怜悯，依然执执念念，我行我素。许是冬还不够寒，风还不够烈，许是在等待那一场风花雪月的交融，雪，犹自高高的挂在半空，游
        荡，无视这一切。<br/><br/>
        【优美语句】  一个人对你的好，并不是立刻就能看到的。因为汹涌而至的爱，来得快去的也快。而真正对你好的人，往往是细水长
        流。你可能会怪他没有付出真心，但在一天天过日子里，却能感觉到他对你无所不在的关心。好的感情，不是一下子就把你感动晕，
        而是细水长流的把你宠坏。<br/><br/>
        【优美语句】  春天，紫气东来，万物复苏，惊蛰的大地，催生了树叶懵懂稚嫩的生命;温婉的春雨，滋养着树叶柔弱纤细的叶脉;和
        煦的东风，染绿了树叶浅浅的容颜;明媚的阳光，带给树叶充满生机的期待。春天，万木青翠，郁郁葱葱，那是千万片树叶的装扮。
        <br/><br/>
        【优美语句】  人间最美是真情，自然最美是花开，时光最美是苍凉;人生如行旅，值得与否，在于各自的修行。爱情，淡然相守，
        简简单单，不需要太多的浮华雕饰;轻轻松松，不需要太多的负担牵绊;就这样，不言不语，彼此知轻重，你浓我浓，落落清欢，携
        爱情奔赴一场终老。<br/><br/>
        【优美语句】  那一夜，坐着缓慢行驶的轿车，走过，曾经最美好的画面，细数曾经你给我的感动，一个挺拔的身影，一张帅气的娃
        娃脸，牵着我的手，漫步在星空下，灯光洒落，身后印下相依快乐的你我……我已将它埋入心底，谢谢你，希望你要的幸福她可以给你。
        <br/><br/>
        【优美语句】  不勾勒，细雨串起的珠帘，点缀过绝世的芬芳。不晕染，兰桡划过的涟漪，千里柔波荡漾。蝶儿翻飞的旧梦，就留给
        定格了的那些时光。纵，岁月褪去了一袭嫣然，却洗不去素韵清扬。不言超然出尘，不是孤芳自赏。只留一把风骨，与宁静相守，与
        彼岸相望。<br/><br/>
        【优美语句】  倚风，眷眸，流年安暖相随。花醉心，树摇曳，春语清心。一茶一酒一清词，听风观雨，煮一壶素淡安闲，与时光轻
        柔对语。窗前，心动于怀，心念如花儿如徐徐春风，荡漾成了一片流云，嫣然了心。看花落花开又一春，哪种花都是于千年前入了古
        人的词入了诗，被后人来吟诵，寄情于心。
    </div>
</div>
</body>
</html>

View Code

以上是关于第十二节 JS事件高级应用的主要内容，如果未能解决你的问题，请参考以下文章

vue.js项目实战运用篇之抖音视频APP-第十二节：用户信息页面功能

ES6 第十二节 Symbol在对象中的作用

学习vue第十二节，使用钩子函数完成vue动画效果

centos mysql 优化第十二节课