4、尚硅谷-JavaScript基础-李立超-JavaScript事件

最新推荐文章于 2023-05-25 18:25:55 发布
最新推荐文章于 2023-05-25 18:25:55 发布
阅读量581 收藏 9
点赞数 3
分类专栏： # js入门 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/120269050
版权

文章目录

1、事件对象

1.1、简单介绍

  • 在DOM对象上的某个事件被触发时候，会产生一个事件对象event,这个对象包含着所有事件有关的信息，包括导致事件的元素，事件的类型以及其他和特定事件相关的信息。
  • 例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而鼠标操作导致的事件对象中，会包含与按下的键有关的信息。所有的浏览器支持event对象，但是支持方式不同。
  • DOM标准的浏览器会将一个event对象传入到事件的处理程序当中，无论事件处理程序是什么都会传入一个event对象。

可以通过以下这种方式获取

btn.onclick = function(event) {
  alert(event.type);
}

Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不同，可用的属性和方法也不一样。

1.2、案例说明

<!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>初识事件对象</title>
    <style>
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>
    <script>
        /**
         * 需求：当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
         **/
        window.onload = function () {
            /**
             * 涉及到的技术：
             * 1、onmousemove
             * -该事件将会在鼠标在元素中移动时候触发
             * 2、事件对象
             * - 当事件的响应函数被触发时候，浏览器每次都会将一个事件对象作为实参传递给响应函数
             * - 在事件对象中封装了当前事件相关的一切信息，比如：鼠标坐标，鼠标按下那个键，鼠标滑轮方向
             * 
             **/
            
            // 1、获取areaDiv，showMsg
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            // 2、areaDiv触发事件
            areaDiv.onmousemove = function (event) {

                /**
                 * 涉及到的问题：
                 * 1、简要描述
                 * 在IE8中，响应函数被触发时候，浏览器不会传递事件对象；
                 * 在IE8以及以下的浏览器中，是将事件对象作为window对象的属性保存的
                 * 2、坐标（x,y）
                 * clientX可以获取鼠标指针的水平坐标
                 * clientY可以获取鼠标指针的垂直坐标
                 * 
                 **/
                console.log(event);
                showMsg.innerHTML="坐标：("+event.clientX+","+event.clientY+")";
            }
        }
    </script>
</head>

<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>

</html>

1.3、案例中注意点

1、 event说明
在这里插入图片描述

clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标

2、兼容性问题

在IE8中，响应函数被触发时，浏览器不会传递事件对象；
在IE8以及以下的浏览器中，是将事件对象作为window对象的属性保存，故而需要判定

3、js中判断简写方式

before:
	if(!event){
		event = window.event;
	}
back:
	event = event || window.event;

1.4、效果图

请添加图片描述

1.5、事件对象练习之div动态移动

1.5.1、需求说明

需求：使得div可以跟随鼠标移动

1.5.2、源码实现

<!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>div动态移动</title>
    <style>
        #box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
    </style>
    <script>
        /**
         * 需求：使得div可以跟随鼠标移动
         */
window.onload=function(){
    // 1、获取box1，Dom对象
    var box1 = document.getElementById("box1");

    // 2、绑定鼠标移动事件
    document.onmousemove=function(event){
        /**
         * 涉及到的event属性
         * 1、scrollTop
         * - 这个元素的顶部到视口可见内容(的顶部)的距离的度量
         * 2、scrollLeft
         * - 这个元素的左边到视口可见内容(的顶部)的距离的度量
         * 3、clientX
         * - 鼠标相对以浏览器有效区域的的X轴坐标
         * 4、clientY
         * - 鼠标相对以浏览器有效区域的的Y轴坐标
         * 5、pageX
         * - 鼠标指针的位置，相对于文档的左边缘
         * 6、pageY
         * - 鼠标指针的位置，相对于文档的上边缘
         * 对于pageX,pageY两个属性在IE8中不支持，所以如果需要兼容IE8，不要使用
         */
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
        var left = event.clientX;
        var top = event.clientY;

        // 3、设置div偏移量
        box1.style.left=left+sl+"px";
        box1.style.top=top+st+"px";
    }
}
    </script>
</head>
<body style="width: 1000px; height: 2000px;">
    <div id="box1"></div>
</body>
</html>

1.5.3、注意点

1、pageX,pageY,clientX,clientY

  • pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。在IE8及更早版本中是没有这个两个属性的，但是我们可以根据滚动信息和客户区坐标位置信息计算出来
  • 鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。

1.5.4、效果图

请添加图片描述

2、事件的冒泡

2.1、简单介绍

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

2.2、案例说明

<!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>事件冒泡</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        #s1 {
            background-color: yellow;
        }
    </style>
    <script>
        /**
         * 需求：实现冒泡简易效果
         */
        window.onload = function () {
            // 1、获取s1，dom对象
            var s1 = document.getElementById("s1");

            // 2、s1鼠标点击事件
            s1.onclick = function (event) {
                event.cancelBubble = true;
                alert("s1点击事件被触发");
            }

            // 3、获取box1，dom对象
            var box1 = document.getElementById("box1");
            box1.onclick = function (event) {
                event.cancelBubble = true;
                alert("box1点击事件触发");
            }

            // 4、document.body 鼠标点击事件
            document.body.onclick = function (event) {
                alert("body点击事件触发");

            }
        }
    </script>
</head>

<body>
    <div id="box1">
        我是box1
        <span id="s1">我是span</span>
    </div>
</body>

</html>

2.3、核心注意点

1、取消冒泡

event.cancelBubble = true; // 表示该元素不进行事件冒泡

2.4、效果图

进行冒泡

请添加图片描述

不进行冒泡

请添加图片描述

3、事件的委派

3.1、简单介绍

  • 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时候，会一直冒泡到祖先元素，从而通过祖先元素的响应函数处理事件
  • 事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

3.2、案例演示

<!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>04-事件的委派</title>
    <script>
        window.onload = function () {
            // 1、获取ul,button的dom对象
            var ul = document.getElementById("u1");
            var btn01 = document.getElementById("btn01");

            // 2、点击按钮添加超链接
            btn01.onclick = function () {
                // 2.1、创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='#' class='link'>新添加的超链接</a>"

                // 2.2、将li添加到ul中
                ul.appendChild(li);
            }
            /**
             * 简要分析：
             *   为每一个超链接绑定一个单击响应函数，这里我们为每一个超链接都绑定了一个单击响应函数，比较麻烦
             *   而且这种操作只能为已经有的超链接设置事件，而新添加的超链接必须重新绑定
             */

            //  3、获取所有的超链接a
            var allA = document.getElementsByTagName("a");

            // 4、遍历
            /*  for(var i = 0 ; i < allA.length ; i ++){
                 allA[i].οnclick=function(){
                     alert("我是a的点击响应函数");
                 }
             } */

            /**
             * 我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以
             * 尝试将其绑定给元素的共同的祖先元素
             * 
             * 事件的委派
             *   将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时候，会
             *   一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件
             *   
             *   事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
             */

            // 5、为祖先元素ul绑定一个单击响应函数
            ul.onclick = function (event) {

                // 解决浏览器兼容性问题
                event = event || window.event;

                /**
                 * 参数说明event
                 *   event中的target表示触发事件的喜爱那个
                 */
                // alert(event.target);

                // 如果触发事件对象是我们期望的元素，执行否则不执行
                if (event.target.className = 'link') {
                    alert("我是ul的单击响应函数");
                }
            }
        }
    </script>
</head>

<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
        <li>
            <p>我是p元素</p>
        </li>
        <li><a href="#" class="link">超链接1</a></li>
        <li><a href="#" class="link">超链接2</a></li>
        <li><a href="#" class="link">超链接3</a></li>
    </ul>
</body>

</html>

3.3、注意事项

1、为每一个超链接绑定一个单击响应函数
而且这种操作只能为已经有的超链接设置事件，而新添加的超链接必须重新绑定；故而可以采用事件委派，
直接操作祖先元素即可

3.4、效果图

请添加图片描述

4、事件的绑定

4.1、简单介绍

事件绑定是指把事件注册到具体的元素之上，js代码中通过标记（id tag class）获取元素，给元素添加特定的方法(如：onclick)；

4.2、案例演示

1、onclick绑定

<!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>05-事件的绑定</title>
    <script>
        /**
         * 需求：点击按钮以后弹出一个内容
         */
        window.onload = function () {

            //  1、获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 介绍
             *   使用 '对象.事件' = 函数的形式绑定响应函数
             *   它只能同时为一个元素的一个事件绑定一个响应函数
             *   不能绑定多个，如果绑定了多个，则后边会发改前边的
             */

            //  2、为btn01绑定两个点击响应函数
            btn01.onclick = function () {
                alert(1);
            }
            btn01.onclick = function () {
                alert(2);
            }
        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

2、监听事件事件addEventListener()绑定

<!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>05-事件的绑定</title>
    <script>
        /**
         * 需求：点击按钮以后弹出一个内容
         */
        window.onload = function () {

            //  1、获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 介绍
             *   使用 '对象.事件' = 函数的形式绑定响应函数
             *   它只能同时为一个元素的一个事件绑定一个响应函数
             *   不能绑定多个，如果绑定了多个，则后边会发改前边的
             */

            //  2、为btn01绑定两个点击响应函数
            /* btn01.onclick = function () {
                alert(1);
            }
            btn01.onclick = function () {
                alert(2);
            } */

            /**
             * 涉及的监听事件addEventListener()
             * - 通过这个方法可以为匀速绑定响应函数
             * - 参数说明
             *  1、事件的字符串，不能用on
             *  2、回调函数，当事件触发时候该函数会被调用
             *  3、是否在捕获阶段触发事件，需要一个布尔值，一般传false
             * 
             * 事件说明
             *   使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
             *   这样当事件被触发时候，响应函数将会按照函数的绑定顺序执行
             * 
             * 注意
             *   这个方法不支持IE8以及以下的浏览器
             */
            btn01.addEventListener("click", function () {
                alert(1)
            }, false);
            btn01.addEventListener("click", function () {
                alert(2)
            }, false);


        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

在这里插入图片描述
3、使用attachEvent()绑定

<!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>05-事件的绑定</title>
    <script>
        /**
         * 需求：点击按钮以后弹出一个内容
         */
        window.onload = function () {

            //  1、获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 介绍
             *   使用 '对象.事件' = 函数的形式绑定响应函数
             *   它只能同时为一个元素的一个事件绑定一个响应函数
             *   不能绑定多个，如果绑定了多个，则后边会发改前边的
             */

            //  2、为btn01绑定两个点击响应函数
            /* btn01.onclick = function () {
                alert(1);
            }
            btn01.onclick = function () {
                alert(2);
            } */

            /**
             * 涉及的监听事件addEventListener()
             * - 通过这个方法可以为匀速绑定响应函数
             * - 参数说明
             *  1、事件的字符串，不能用on
             *  2、回调函数，当事件触发时候该函数会被调用
             *  3、是否在捕获阶段触发事件，需要一个布尔值，一般传false
             * 
             * 事件说明
             *   使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
             *   这样当事件被触发时候，响应函数将会按照函数的绑定顺序执行
             * 
             * 注意
             *   这个方法不支持IE8以及以下的浏览器
             */
            /* btn01.addEventListener("click", function () {
                alert(1)
            }, false);
            btn01.addEventListener("click", function () {
                alert(2)
            }, false); */

            /**
             * attachEvent()
             * - 在IE8中可以使用该事件来绑定点击响应函数
             * - 参数说明
             *  1、事件的字符串，使用on
             *  2、回调函数
             * 
             * - 这个方法可以同时为一个事件绑定多个处理函数
             *   不同的是它是先执行后绑定，执行顺序和addEventListener()相反
             */
            btn01.attachEvent("onclick",function(){
                alert(1);
            });
            btn01.attachEvent("onclick",function(){
                alert(2);
            });

        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

问题所在：
在这里插入图片描述
4、最终版本，兼容所有浏览器

<!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>05-事件的绑定</title>
    <script>
        /**
         * 需求：点击按钮以后弹出一个内容
         */
        window.onload = function () {

            //  1、获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 介绍
             *   使用 '对象.事件' = 函数的形式绑定响应函数
             *   它只能同时为一个元素的一个事件绑定一个响应函数
             *   不能绑定多个，如果绑定了多个，则后边会发改前边的
             */

            //  2、为btn01绑定两个点击响应函数
            /* btn01.onclick = function () {
                alert(1);
            }
            btn01.onclick = function () {
                alert(2);
            } */

            /**
             * 涉及的监听事件addEventListener()
             * - 通过这个方法可以为匀速绑定响应函数
             * - 参数说明
             *  1、事件的字符串，不能用on
             *  2、回调函数，当事件触发时候该函数会被调用
             *  3、是否在捕获阶段触发事件，需要一个布尔值，一般传false
             * 
             * 事件说明
             *   使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
             *   这样当事件被触发时候，响应函数将会按照函数的绑定顺序执行
             * 
             * 注意
             *   这个方法不支持IE8以及以下的浏览器
             */
            /* btn01.addEventListener("click", function () {
                alert(1)
            }, false);
            btn01.addEventListener("click", function () {
                alert(2)
            }, false); */

            /**
             * attachEvent()
             * - 在IE8中可以使用该事件来绑定点击响应函数
             * - 参数说明
             *  1、事件的字符串，使用on
             *  2、回调函数
             * 
             * - 这个方法可以同时为一个事件绑定多个处理函数
             *   不同的是它是先执行后绑定，执行顺序和addEventListener()相反
             */
            // btn01.attachEvent("onclick",function(){
            //     alert(1);
            // });
            // btn01.attachEvent("onclick",function(){
            //     alert(2);
            // });

            // 2、自定义函数bind
            /**
             * 定义一个函数，用来为制定元素绑定响应函数
             * addEventListener()中this,是绑定事件的对象
             * attachEvent()中的this,是window
             * 需要统一两个方法中this
             * 
             * 参数说明
             * obj 要绑定事件的对象
             * eventStr 事件的字符串(不要on)
             * callback 回调函数
             */
            function bind(obj,eventStr,callback){
                if(obj.addEventListener){
                    obj.addEventListener(eventStr,callback,false);
                }else{
                    // IE8以下执行
                    obj.attachEvent("on"+eventStr,function(){
                        // 匿名函数调用回调函数 
                        callback.call(obj);
                    })
                }
            }
            
            // 3、调用自定义函数
            bind(btn01,"click",function(){
                alert(this);
            })

        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

4.3、完善onclick事件

<!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>05-事件的绑定</title>
    <script>
        /**
         * 需求：点击按钮以后弹出一个内容
         */
        window.onload = function () {

            //  1、获取按钮对象
            var btn01 = document.getElementById("btn01");

            /**
             * 介绍
             *   使用 '对象.事件' = 函数的形式绑定响应函数
             *   它只能同时为一个元素的一个事件绑定一个响应函数
             *   不能绑定多个，如果绑定了多个，则后边会发改前边的
             */

            //  2、为btn01绑定两个点击响应函数
            /* btn01.onclick = function () {
                alert(1);
            }
            btn01.onclick = function () {
                alert(2);
            } */

            /**
             * 涉及的监听事件addEventListener()
             * - 通过这个方法可以为匀速绑定响应函数
             * - 参数说明
             *  1、事件的字符串，不能用on
             *  2、回调函数，当事件触发时候该函数会被调用
             *  3、是否在捕获阶段触发事件，需要一个布尔值，一般传false
             * 
             * 事件说明
             *   使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
             *   这样当事件被触发时候，响应函数将会按照函数的绑定顺序执行
             * 
             * 注意
             *   这个方法不支持IE8以及以下的浏览器
             */
            /* btn01.addEventListener("click", function () {
                alert(1)
            }, false);
            btn01.addEventListener("click", function () {
                alert(2)
            }, false); */

            /**
             * attachEvent()
             * - 在IE8中可以使用该事件来绑定点击响应函数
             * - 参数说明
             *  1、事件的字符串，使用on
             *  2、回调函数
             * 
             * - 这个方法可以同时为一个事件绑定多个处理函数
             *   不同的是它是先执行后绑定，执行顺序和addEventListener()相反
             */
            // btn01.attachEvent("onclick",function(){
            //     alert(1);
            // });
            // btn01.attachEvent("onclick",function(){
            //     alert(2);
            // });

            // 2、自定义函数bind
            /**
             * 定义一个函数，用来为制定元素绑定响应函数
             * addEventListener()中this,是绑定事件的对象
             * attachEvent()中的this,是window
             * 需要统一两个方法中this
             * 
             * 参数说明
             * obj 要绑定事件的对象
             * eventStr 事件的字符串(不要on)
             * callback 回调函数
             */
            function bind(obj,eventStr,callback){
                if(obj.addEventListener){
                    obj.addEventListener(eventStr,callback,false);
                }else{
                    // IE8以下执行
                    obj.attachEvent("on"+eventStr,function(){
                        // 匿名函数调用回调函数 
                        callback.call(obj);
                    })
                }
            }
            
            // 3、调用自定义函数
            bind(btn01,"click",function(){
                alert(this);
            })

        }
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
</body>

</html>

4.4、效果图

请添加图片描述

5、函数的传播

5.1、简单介绍

  • 三个阶段
    • 1、捕获阶段：该阶段时候从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    • 2、目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    • 3、冒泡阶段：事件从目标元素向它的祖先元素传递，一次触发祖先元素的事件

5.2、案例说明

<!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>06-事件的传播</title>
    <style>
        #box1 {
            width: 400px;
            background-color: gray;
            height: 400px;
        }

        #box2 {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }

        #box3 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             * 需求：验证事件传播
             */
            // 1、获取三个div的dom对象
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("box3");

            /**
             * 事件传播
             *  三个阶段
             *  1、捕获阶段
             *   - 该阶段时候从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
             *  2、目标阶段
             *   - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
             *  3、冒泡阶段
             *   - 事件从目标元素向它的祖先元素传递，一次触发祖先元素的事件
             * 
             * 如果希望在捕获阶段就出发事件，可以将addEventListener()第三个参数设置为true
             * 一般情况我们不会希望在捕获阶段触发事件，所以这个参数为false
             */
            // 2、调用点击函数
            bind(box1, "click", function () {
                alert("我是box1点击响应函数");
            })
            bind(box2, "click", function () {
                alert("我是box2点击响应函数");
            })
            bind(box3, "click", function () {
                alert("我是box3点击响应函数");
            })

            // 自定义点击函数
            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);
                    });
                }
            }
        }
    </script>
</head>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">

            </div>
        </div>
    </div>
</body>

</html>

5.3、效果图

请添加图片描述

6、事件练习之拖拽div

6.1、源码实现

<!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>07-事件拖拽效果</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: darkcyan;
            position: absolute;
            left: 300px;
            top: 300px;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             * 需求：拖拽box1元素
             * 分析
             *   1、当鼠标在被拖拽元素上按下时候，开始拖拽 onmousedown
             *   2、当鼠标移动时元素随着鼠标移动 onmousemove
             *   3、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
             */

            //  1、获取box1的dom对象
            var box1 = document.getElementById("box1");

            // 设置box1捕获所有鼠标按下的事件
            box1.setCapture && box1.setCapture();

            // 2、为box1绑定一个鼠标按下事件
            // 2.1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
            box1.onmousedown = function (event) {
                // 解决浏览器兼容性问题
                event = event || window.event;

                // 左侧 clientX-offsetLeft
                // 上边 clientY-offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                // 2.2、当鼠标移动时被拖拽元素随着鼠标移动 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";
                    // 2.3、当鼠标松开时，onmouseup，鼠标固定在当前位置
                    document.onmouseup = function () {
                        // 取消document的onmousemove事件
                        document.onmousemove = null;
                        // 取消document的onmouseup事件
                        document.onmouseup = null;

                        // 当鼠标松开时，取消对事件的捕获
                        box1.releaseCapture && box1.releaseCapture();
                    }
                }
                return false;
            }


        }
    </script>
</head>

<body>
    我是文章内容
    <div id="box1"></div>
    <div id="box2"></div>
</body>

</html>

6.2、注意

1、拖拽过程中相对位置不一样

请添加图片描述
在这里插入图片描述

2、在鼠标移动和鼠标松开事件中出现灵异现象，多个div时候，当鼠标移动另一个div下面时候，再次移动，第一个div事件不能触发
在这里插入图片描述

3、多个div，还有段落可能出现特殊情况，全选文字之后，拖拽div现象
请添加图片描述

解决方案

// 设置box1捕获所有鼠标按下的事件
setCapture && obj.setCapture();
//当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();

在这里插入图片描述

6.3、效果图

请添加图片描述

6、滚轮事件

6.1、案例演示

<!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>08-滚轮事件</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }
    </style>
    <script>
        /**
         * 需求：为box1绑定一个鼠标滚轮事件
         */

        window.onload = function () {
            /**
             * 涉及的事件
             *   onmousewheel
             *   鼠标滚轮滚动事件，会在滚轮滚动时候触发
             * 但是火狐浏览器不支持该事件
             * 
             * 火狐中需要使用DOMMouseScroll来绑定事件
             * 注意该事件需要通过addEventListener()函数来绑定
             */
            // 1、获取ID为box1的dom
            var box1 = document.getElementById("box1");

            // 2、为box1添加滚轮滚动事件
            box1.onmousewheel = function (event) {
                // 解决浏览器兼容性问题
                event = event && window.event;

                // alert(event.wheelDelta);
                // alert(event.detail);

                /**
                 * 当鼠标滚轮向下滚动时候，box1变长
                 * 当滚轮向上滚动时候，box1变短
                 */

                //  判断鼠标滚轮滚动方向
                if (event.wheelDelta > 0 || event.detail < 0) {
                    alert("变小");
                    box1.style.height = box1.clientHeight - 10 + "px";
                } else {
                    alert("变大");
                    box1.style.height = box1.clientHeight + 10 + "px";
                }

                /**
                 * 注意：
                 *   使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                 *   需要使用event来取消默认行为event.preventDefault()
                 *   但是IE8不支持event.preventDefault()这个东西，如果直接调用会报错
                 */
                event.preventDefault && event.preventDefault();

                /**
                 * 滚轮滚动时候，如果浏览器有滚动条，滚动条随之滚动
                 * 这是浏览器默认行为，如果不希望发生，可以取消默认行为
                 */
                return false;
            }

            // 为火狐浏览器绑定滚轮事件
            bind(box1, "DOMMouseScroll", box1.onmousewheel);
            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);
                    });
                }
            }

        }
    </script>
</head>

<body style="height: 2000px;">
    <div id="box1"></div>
</body>

</html>

6.2、注意事项

1、兼容性问题

  • 火狐中需要使用DOMMouseScroll来绑定事件
  • 注意该事件需要通过addEventListener()函数来绑定
  • 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
  • 需要使用event来取消默认行为event.preventDefault()
  • 但是IE8不支持event.preventDefault()这个东西，如果直接调用会报错
    2、滚轮滚动条
  • 滚轮滚动时候，如果浏览器有滚动条，滚动条随之滚动
  • 这是浏览器默认行为，如果不希望发生，可以取消默认行为
return false;

6.3、效果图

请添加图片描述

7、键盘事件

7.1、简要介绍

<!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>09-键盘事件</title>

    <script>
        /**
         * 需求：初识键盘事件
         */
        window.onload = function () {
            /**
             * 键盘事件
             * onkeydown
             *  - 案件被按下
             *  - 对于onkeydown来说如果一直按着某个按键，则事件一直触发
             *  - 当onkeydown连续触发，第一次和第二次之间会间隔稍微长一点，其他的会非常快
             *  - 这种涉及是为了防止误操作的发生
             * 
             *  onkeyup
             *   按键被松开
             * 
             * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
             */
            document.onkeydown = function (event) {
                // 解决浏览器兼容性问题
                event = event || window.event;

                /**
                 * 可以通过keyCode来获取按年的编码
                 * 通过它可以判断吧哪个键被按下，除了keyCode，事件对象还提供了几个属性
                 * altKey
                 * ctrlKey
                 * shiftKey
                 * - 这三个用来判断alt,ctrl,shift是否被按下，如果按下返回TRUE，否则false
                 */
                // console.log(event.keyCode); // a 65
                // 例如 判断y是否被按下
                if (event.keyCode === 89) {
                    console.log("y被按下了");
                }

                // 例如 判断ctrl+y被按下
                if (event.keyCode === 89 && event.ctrlKey) {
                    console.log("ctrl和y被按下了");
                }

            }
            // 获取input
            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function (event) {
                // 解决浏览器兼容性问题
                event = event || window.event;
                // 49-57
                // 判断不能输入数字
                if (event.keyCode >= 49 && event.keyCode <= 57) {
                    return false;
                }
                console.log(event.keyCode);
            }
        }
    </script>
</head>

<body>
    <input type="text">
</body>

</html>

7.2、案例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			
		</style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					//定义一个变量，来表示移动的速度
					var speed = 10;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 500;
					}
					
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(event.keyCode){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

7.3、效果图

请添加图片描述

geekmice
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
李立超JavaScript基础篇笔记
02-02
针对李立超JavaScript基础篇的教学视频，一集集整理出的笔记，以集数为目录，详细概括了李立超老师所讲的所有内容
JavaScript李立超基础篇笔记.docx
02-02
针对李立超JavaScript基础篇的教学视频，一集集整理出的笔记，以集数为目录，详细概括了李立超老师所讲的所有内容
javascript全笔记-基础版（尚硅谷视频李立超老师）
weixin_51717662的博客
10-16 2410
观看javascript视频整理的笔记，跟着视频所讲内容整理的关于javascript基础版笔记，包括javascript简介，javacript基础语法，常用对象，JavaScript DOM,BOM.
尚硅谷TypeScript教程（李立超老师）学习笔记
qq_48105178的博客
03-18 1262
涵盖了环境搭建、TypeScript中的各种类型（基本类型、数组、对象、元组、枚举、unknown、any、void、never等）、TypeScript的编译选项，以及TypeScript中面向对象的相关知识（类、抽象类和接口）
尚硅谷李立超老师讲解web前端---笔记（持续更新）
m0_63695673的博客
03-17 711
商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）浏览器开发者模式按f12，elements是元素的意思，点击以后也可以看见我们正在vscode编写的代码。当我们通过不同的选择器，选择相同的元素，并且为相同的样式设置为不同的值时，此时就发生了冲突。默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（
Javascript 学习笔记（一）
Hi_KER的博客
02-27 573
Javascript学习笔记
[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)
emmmm.....
01-11 2582
JavaScript 的书写位置 JavaScript 注释 JavaScript 输入输出语句 变量 数据类型 运算符 流程控制 对象 函数 严格模式 面向对象 Map Set
李立超前端JavaScript基础个人总结笔记
05-25
源自于B站up主李立超老师的前端JavaScript基础知识视频课，根据199节视频课的内容，使用Typora笔记软件总结核心知识点，方便前端小白配合老师视频课使用，内含相关概念的定义和配套代码资源，其上传的初衷是为了方便...
JavaScript基础知识总结.xmind
02-23
通过思维导图的方式，快速了解掌握JavaScript的基本内容
前端面试题大全-李立超老师.zip
10-17
前端面试题大全-李立超老师.zip
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 10 11 100 101 110 111 单位数字：2个（0-1） 扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格
JavaScript基础笔记-尚硅谷视频自己总结
01-13
JavaScript入门知识点总结，文档里面包含W3School里面方法
html+js视频笔记
01-14
很好的html和javascript资料，很全面也很详细
尚硅谷_Ajax
11-12
Ajax的技术的产生 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. “Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。 而Ajax这项技术，是Google在Google Labs发布Google Maps和Google Suggest后真正为人所认识。
经典尚硅谷JavaScript视频
06-15
精心收藏 上百本经典前端电子书 总有基本合适你的 节省大家时间
前端JavaScript核心基础笔记（李立超老师视频课总结）
m0_73717726的博客
05-25 230
源自于B站up主李立超老师的前端JavaScript基础知识视频课，根据199节视频课的内容，使用Typora笔记软件总结核心知识点，方便前端小白配合老师视频课使用，内含相关概念的定义和配套代码资源，其上传的初衷是为了方便自己学习，养成做笔记的习惯，该资源免费向大家提供，有markdown和pdf，个人推荐markdown配合Typora打开，观看体验会更好，后续会持续更新其它相关前端技术的笔记内容，欢迎大家在评论区发表自己的意见，期待各位的使用，感谢！
尚硅谷李立超JavaScript笔记
Maryal的博客
02-07 1678
李立超老师JavaScript笔记目录1.JS简介2.JS的HelloWorld3.JS代码编写的位置4.JS的基本语法5.字面量与变量6.标识符7.数据类型8.强制类型转换9.其他进制的数字算数运算符一元运算符自增自减逻辑运算符赋值运算符关系运算符 目录 1.JS简介 1.ECMAScript是JavaScript的标准 2.一个JS包含三个元素:ECMAScript,DOM(文档对象模型: 如何通过JS操作网页),BOM(浏览器对象模型: 如何通过JS操作浏览器) 3.JS是一种解释形语言，动态语言(和
2023.2.8日学习---李立超老师学习笔记
qq_43474780的博客
02-08 327
学习中ing
5、尚硅谷-JavaScript基础-李立超-BOM
极客鼠之家
09-15 641
文章目录1、何为BOM2、Navigator对象2.1、简单介绍2.2、案例说明2.3、效果图3、Location对象3.1、简单介绍3.2、案例说明3.3、效果图4、History对象4.1、简单介绍4.2、案例说明4.3、效果图5、定时调用6、轮播图实现7、定时器 1、何为BOM ECMAScript无疑是JavaScript的核心，但是想要在浏览器中使用JavaScript，那么BOM才是真正的核心（浏览器对象模型） BOM提供了很多对象，用于访问浏览器的功能，这些功能和任何网页内容无关 BOM将浏
李立超typescript
最新发布
09-20
李立超是一位教授JavaScript和TypeScript的老师。他的教学视频以集数为目录，详细概括了他所讲的所有内容。在他的教学视频中，他讲解了JavaScript和TypeScript的基础知识以及相关的编程技巧和应用场景。 在引用中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值