Day07——JS：事件

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量102 收藏
点赞数
分类专栏： JS基础 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56174842/article/details/128763396
版权

文章目录

一、事件对象

  • 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
    这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。
  • 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存。使用下面方法就能解决这个不一致的问题。
元素.事件 = function(event){
		event = event || window.event;
				
};
  • 练习:
    鼠标移动到上面盒子时，下面盒子显示鼠标指针的水平及垂直坐标。
    在这里插入图片描述
<script>
    window.onload = function () {

        //获取两个div
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");

        areaDiv.onmousemove = function (event) {

            event = event || window.event;
            /*
            * clientX可以获取鼠标指针的水平坐标
            * cilentY可以获取鼠标指针的垂直坐标
            */
            var x = event.clientX;
            var y = event.clientY;

            //alert("x = "+x + " , y = "+y);

            //在showMsg中显示鼠标的坐标
            showMsg.innerHTML = "x = " + x + " , y = " + y;
        }

    }
</script>

二、使div可以跟随鼠标移动

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
					
					
					//获取到鼠标的坐标
					/*
					 * clientX和clientY
					 * 	用于获取鼠标在当前的可见窗口的坐标
					 * div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
		
				};				
				
			};
					
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

三、事件的冒泡（Bubble）

  • 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
  • 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
  • 可以将事件对象的cancelBubble设置为true，即可取消冒泡
元素.事件 = function(event){
			event = event || window.event;
			event.cancelBubble = true;
		};

四、事件的委派

  • 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
  • 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
  • 示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">

        window.onload = function () {

            var u1 = document.getElementById("u1");

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

                //将li添加到ul中
                u1.appendChild(li);
            };


            /*
             * 为每一个超链接都绑定一个单击响应函数
             * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
             * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
             */
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            /*for(var i=0 ; i<allA.length ; i++){
                allA[i].onclick = function(){
                    alert("我是a的单击响应函数！！！");
                };
            }*/

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

            //为ul绑定一个单击响应函数
            u1.onclick = function (event) {
                event = event || window.event;

                /*
                 * target
                 * 	- event中的target表示的触发事件的对象
                 */
                //alert(event.target);


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

            };

        };

    </script>
</head>

<body>
    <button id="btn01">添加超链接</button>

    <ul id="u1" style="background-color: #bfa;">
        <li>
            <p>我是p元素</p>
        </li>
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
</body>
</html>

五、事件的绑定对象

对象.事件 = 函数 绑定响应函数

  • 使用 对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后面绑定的函数会覆盖前面的函数

addEventListener()方法 绑定响应函数

  • 使用addEventListener()方法可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数会按照函数的绑定顺序执行
  • 这个方法不支持IE8及以下的浏览器
  • 参数：
  1. 事件的字符串，不要on
  2. 回调函数，当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

语法：对象. addEventListener(参数1，参数2，参数3)；

示例：

box1.addEventListener("click",function(){
    alert("1");
},false);
box1.addEventListener("click",function(){
    alert("2");
},false);
box1.addEventListener("click",function(){
    alert("3");
},false);
//执行结果为1，2，3

attachEvent()方法

  • 在IE8中可以使用attachEvent()方法来绑定事件
  • 这个方法也可以同时为一个元素的相同事件绑定多个处理函数，不同的是它是后绑定的函数先执行，执行顺序和addEventListener()相反
  • 这个方法只支持IE5到IE10的浏览器，其他浏览器不兼容
  • 参数：
  1. 事件的字符串，要on
  2. 回调函数

语法：对象.attachEvent(参数1，参数2)

示例：

box1.attachEvent("onclick",function(){
    alert("1");
});
box1.attachEvent("onclick",function(){
    alert("2");
});
box1.attachEvent("onclick",function(){
    alert("3");
});
//执行顺序为3，2，1

创造函数兼容所有浏览器 

//定义一个函数，用来指定元素绑定响应函数
/*
 * addEventListener()中的this，是绑定事件的对象
 * attachEvent()中的this，是window
 * 需要统一两个方法的this
 */
/*
 * 参数：
 *   obj       要绑定事件的对象
 *   eventStr  事件的字符串（不要on）
 *   callback  回调函数
 */
function bind(obj,eventStr,callback){
    if(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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">			
			window.onload = function(){
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");
				
				//开启box1的拖拽
				drag(box1);
				//开启box2的
				drag(box2);
				
				drag(img1);
								
				
			};
			
			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj){
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						obj.style.left = left+"px";
						obj.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};
			}
					
		</script>
	</head>
	<body>		
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>
		
		<img src="img/an.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>

八、滚轮的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
								
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
								
				box1.onmousewheel = function(event){					
					event = event || window.event;
					
					
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);					
					
					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
					//判断鼠标滚轮滚动的方向
					if(event.wheelDelta > 0 || event.detail < 0){
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向下滚，box1变长
						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>

九、键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			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);
					
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if(event.keyCode === 89 && event.ctrlKey){
						console.log("ctrl和y都被按下了");
					}										
				};
				
				/*document.onkeyup = function(){
					console.log("按键松开了");
				};*/
				
				//获取input
				var input = document.getElementsByTagName("input")[0];				
				input.onkeydown = function(event){
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					//数字 48 - 57
					//使文本框中不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						//在文本框中输入内容，属于onkeydown的默认行为
						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
						return false;
					}					
					
				};
			};
						
		</script>
	</head>
	<body>		
		<input type="text" />		
	</body>
</html>

十、键盘移动div

<!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>
华籍美人_Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习—— 二：数据计算
God_stf的博客
03-07 637
JavaScript学习——二：数据计算1.用JS计算下列算式，并将结果在控制台输出 （1）2.编写程序，让用户输入摄氏度，向用户展示出对应的华氏温度3.用JS计算下列算式，并将结果在控制台输出 （2）4.编写程序，提示用户输入六边形的边长，然后显示它的面积5.用语句输出几天后是星期几6.用户输入一个三位数，用程序计算三位数字各数位上数字的和结果截图 1.用JS计算下列算式，并将结果在控制台输出 （1） // 1、计算算式 var num1=(123+45*78)/(34+543)-9*(324-3
Day12:JS基础
03-20
在“Day12: JS基础”中，我们将会深入探讨JavaScript的基础知识，帮助初学者构建坚实的JS根基。 一、JavaScript简介 JavaScript是一种解释型、弱类型、基于原型的脚本语言，广泛应用于网页和互联网应用开发。它主要...
JS基础学习Day6——案例：利用js实现柱状图
thefairwilldim的博客
09-15 218
利用js实现柱状图
day12——Javascript事件
Lu_Xuan_的博客
08-30 136
JavaScript事件简介、事件对象event、点击事件的光标坐标点获取、常见的事件（了解）、事件
JavaScript——1：了解 JavaScript
dangfulin的博客
04-13 261
最开始的HTML相当简单，很容易就能够掌握设计网页所需知道的一切。但随着 Web 的发展，页面设计人员还希望他们的页面能够与用户进行交互， HTML 很快就显得不足以满足这一需求了，而JavaScript的发明，就为控制浏览器和网页添加了许多活力和交互方法。 一，JavaScript 是什么 JavaScript 是一种可以用来给网页增加交互性的编程语言。 JavaScript 程序也被称为“脚本”，它们包含在 HTML 页面内部（最初编写脚本的方式）或者驻留在外部文件中（通常的方法）。例如： <!D
JS基础学习Day3——JS对象
thefairwilldim的博客
09-08 77
构造对象的三种方法。
day-one:预算应用程序
07-14
第一天——预算应用程序 更多详情敬请期待…… 入门 要开始使用，您可以简单地克隆存储库并安装依赖项： 先决条件 您需要 git 来克隆存储库。 您可以从获取 git。 我们还使用了一些 node.js 工具来进行初始化和测试...
Day-19:第 19 天
06-26
JavaScript有七种原始数据类型：Undefined、Null、Boolean、Number、BigInt、String和Symbol（ES6新增），以及一种复杂数据类型——Object。特别是，JavaScript中的Number类型不仅包含整数，还支持浮点数，甚至可以...
Day08:Day08的任务
03-16
此外，Day08的任务可能还会涉及到事件处理，这是JavaScript与用户交互的关键。例如，你可以学习如何添加事件监听器，响应用户的点击、键盘输入等行为。 最后，DOM（Document Object Model）操作可能是课程的一部分...
Day-31:角度路由器
06-22
10. **路由事件**：Angular路由器提供了一些事件，如`routeReuseStrategy`，`events`，可以监听路由的变更，实现自定义的行为。 通过以上知识点的学习和实践，开发者可以有效地管理前端应用的导航和页面切换，提升...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 99
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 206
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 92
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 304
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 157
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
什么是vue的计算属性
weixin_56187723的博客
07-12 168
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
已知字典day = {1:'Monday',2:'Thursday',3:'*day',4:'Whatday?',5:'Mayday',6:'Saturday'}，使用update()方法编程，把一周7天的字典完善好，并将新字典打印出来。
04-05
day = {1:'Monday',2:'Thursday',3:'*day',4:'Whatday?',5:'Mayday',6:'Saturday'} day.update({7:'Sunday', 3:'Wednesday'}) print(day) # {1: 'Monday', 2: 'Thursday', 3: 'Wednesday', 4: 'Whatday?', 5: 'May...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值