八、DOM（四） -- DOM事件2

已于 2023-01-20 23:07:31 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： WEB基础-JS核心 文章标签： javascript html5 vue.js
于 2021-07-29 16:13:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/119055435
版权

一、滑轮滚动事件

	
	+++ 绑定滚动事件(兼容谷歌、IE浏览器)
				
				elem.onmousewheel=function(){  } 
									绑定滚动事件						
				
				event.wheelDelta
									只看正负，不看大小。向上滚>0 。向下滚<0	
									(通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。)



	+++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有)
				
				elem.addEventListener("DOMMouseSrolll",function(){})		
									绑定鼠标滚动事件(兼容火狐浏览器,火狐特有的写法)
	
				event.detail
									只看正负，不看大小。向上滚 < 0 。向下滚 > 0	
									(通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。)




	+++ 滚动事件兼容性处理
	
			  elem.onmousewheel=function(event){
					event=event||widow.event;	
					
					if(event.wheelDelta>0 || event.detail<0){
						console.log("向上滚动")
					}else{
						console.log("向下滚动")
					}
			  } 	
	  
			  elem.addEventListener("DOMMouseSrolll",elem.onmousewheel)
1.1 绑定滑轮滚动事件
1）兼容谷歌、IE浏览器，绑定滑轮滚动事件

    /**绑定滚动事件*/
    document.onmousewheel=function(event){

        /** 事件对象的兼容性处理*/
        event=event || window.event;

        if(event.wheelDelta>0){
            console.log("向上滚")
        }

        if(event.wheelDelta<0){
            console.log("向下滚")
        }
       
    }

在这里插入图片描述

2）兼容火狐浏览器，绑定滑轮滚动事件
    /**绑定滚动事件*/
    document.addEventListener("DOMMouseScroll",function(event){
            event=event||window.event;
            if(event.detail>0){
                console.log("向下滚")
            }else{
                console.log("向上滚")
            }

    })

在这里插入图片描述

3）绑定事件兼容性处理
<script>

    /** 绑定滚动事件，兼容谷歌、IE浏览器*/
    document.onmousewheel=function(event){
        event=event||window.event;

        //event.wheelDelta 兼容谷歌、IE浏览器
        //event.detail 兼容火狐
        if(event.wheelDelta >0 || event.detail<0){
            console.log("向上滚")
        }else{
            console.log("向下滚")
        }

    }

    /** 绑定滚动事件，兼容火狐浏览器*/
    document.addEventListener("DOMMouseScroll",document.onmousewheel)


</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2 绑定鼠标滑轮事件案例

实现场景：当鼠标向上滚动时，红色div变长。鼠标向下移动时，红色div变短

1） 案例1
<body >

    <div style="width:100px;height:100px;background-color: red;"></div>

</body>

<script>

    var div=document.getElementsByTagName("div")[0];

    /** 绑定滚动事件，兼容谷歌、IE浏览器*/
    document.onmousewheel=function(event){
        event=event||window.event;

        // 判断鼠标向上滚动
        if(event.wheelDelta >0 || event.detail<0){
            div.style.height=div.scrollHeight+10+"px";
        }

        //判断鼠标向下滚动
        if(event.wheelDelta <0 || event.detail >0){
            div.style.height=div.scrollHeight-10+"px";
        }

    }

    /** 绑定滚动事件，兼容火狐浏览器*/
    document.addEventListener("DOMMouseScroll",document.onmousewheel)


</script>

在这里插入图片描述

2） 案例2
>>>>>> 问题

在案例1的基础上，当浏览器出现滚动条时，就会出现滑轮滚动，滚动条也动。效果很不友好

<body style="height:2000px">

    <div style="width:100px;height:100px;background-color: red;"></div>

</body>

<script>

    var div=document.getElementsByTagName("div")[0];

    /** 绑定滚动事件，兼容谷歌、IE浏览器*/
    div.onmousewheel=function(event){
        event=event||window.event;

        // 判断鼠标向上滚动
        if(event.wheelDelta >0 || event.detail<0){
            div.style.height=div.scrollHeight+10+"px";
        }

        //判断鼠标向下滚动
        if(event.wheelDelta <0 || event.detail >0){
            div.style.height=div.scrollHeight-10+"px";
        }

    }

    /** 绑定滚动事件，兼容火狐浏览器*/
    div.addEventListener("DOMMouseScroll",document.onmousewheel)


</script>

在这里插入图片描述

>>>>>> 解决方式
	当浏览器出现滚动条时，滑轮滚动，不止div的高度发生变化，浏览器也随之滚动，
	这是由于浏览器的默认行为导致，我们要阻止滑轮的默认行为。
			

<!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>Document</title>
</head>
<body style="height:2000px">

    <div style="width:100px;height:100px;background-color: red;"></div>

</body>

<script>

    var div=document.getElementsByTagName("div")[0];

    /** 绑定滚动事件，兼容谷歌、IE浏览器*/
    div.onmousewheel=function(event){
        event=event||window.event;

        // 判断鼠标向上滚动
        if(event.wheelDelta >0 || event.detail<0){
            div.style.height=div.scrollHeight+10+"px";
        }

        //判断鼠标向下滚动
        if(event.wheelDelta <0 || event.detail >0){
            div.style.height=div.scrollHeight-10+"px";
        }
        
        /**
         *  当滚轮滚动时，如果浏览器有滚动条，滚动条也随之滚动。这是浏览器的默认行为。
         *  如果不希望发生，可以取消浏览器默认行为。
         */


         /**
          * 取消浏览器默认行为
          *         1、return false   取消通过JS事件绑定的默认行为
          *         2、event.preventDefault()  取消通过事件监听绑定的默认行为
          */
         event.preventDefault();
         return false;
    }

    /** 绑定滚动事件，兼容火狐浏览器*/
    div.addEventListener("DOMMouseScroll",document.onmousewheel)


</script>
</html>

二、鼠标滚动事件

1）鼠标滚动事件wheel与scroll的区别
	
	scrool事件：
			1、当鼠标滑动或滚动条滚动时就会触发回调函数
			2、回调函数执行和滚动条滚动默认行为同时执行


	wheel事件：
			1、当鼠标滚动时就会触发回调函数
			2、回调函数执行完毕后才会执行滚动条滚动默认行为
2）鼠标滚动事件wheel与scroll的区别


	wheel事件和scroll事件的区别：
			1、scroll事件当鼠标滑动或滚动条滚动时就会触发，而wheel事件只有当鼠标滚动时才会触发。
			
			2、scroll事件触发时，回调函数和滚动条滚动默认行为同时执行。
			   wheel事件触发，回调函数执行完毕后才会执行滚动条滚动的默认行为。
2）鼠标滚动事件和滑轮滚动事件的区别

	onmousewheel事件 
			该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。
			注意：onmousewheel和DOMMouseScroll事件，
			在没有滚动条或者内容没有被滚动的时候也会发生，
			意思是只要鼠标动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。



	onscroll、onwheel事件
    		事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。
			使用window.scroll必须要有滚动条才能触发，一般配合$(window).scrollTop()使用.
3）案例
>>>>>> scroll事件

scoll事件，鼠标滚动和滚动条滚动都会触发回调函数；回调函数和滚动事件同时进行

	<div  onscroll="show()" style="height:200px;background-color: red;overflow: auto;">
		<br/><br/>22<br/><br/><br/>22<br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/>
	</div>
		
    <script>

       function show(){
			  for (var i = 0; i < 10000; i++) {
				console.log(i);
			  }
	   }
	</script>

请添加图片描述

>>>>>> wheel事件

wheel事件，鼠标滚动时会触发回调函数，而滚动条滚动则不会触发回调函数。
回调函数执行完毕后，才会执行滚动条滚动的默认行为。


	<div  onwheel="show()" style="height:200px;background-color: red;overflow: auto;">
		<br/><br/>22<br/><br/><br/>22<br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/><br/>
	</div>
		
    <script>

       function show(){
			  for (var i = 0; i < 10000; i++) {
				console.log(i);
			  }
	   }
	</script>

请添加图片描述

二、键盘事件

	
	+++ 键盘事件:键盘事件一般绑定给可以获取焦点的对象或者document。
	            （比如div不能获取焦点，所以就不能绑定键盘事件）
	
				onkeydown  表示按键被按下
							1、如果一直按着某个按键不松手，则事件会一直触发。
							
							2、当onkeydown事件连续触发时,第一次触发和第二次触发会有明显时间间隔，而其他的会非常快。
							   这种设计是为了方式误操作的发生。
						
				onkeyup    表示按键被松开

		
	+++ 键盘事件相关属性
			
				 keyCode    获取按的是哪一个按键。获取按键的ASCII码值
				 altKey		判断"ALT" 按键是否被按下
				 ctrlKey	判断"CTRL" 键是否被按下
				 shiftKey	判断"SHIFT" 键是否被按下。
				 metaKey		返回当事件被触发时，"meta" 键是否被按下。
2.1 键盘事件
1）onkeydown事件，按键被按下时触发
   document.onkeydown=function(){
        console.log("按键被按下了")
    }
2）onkeyup 事件，按键抬起时触发
    document.onkeyup=function(){
        console.log("按键被按抬起了")
    }
3）键盘事件注意事项
>>>>>> 对于onkeydown事件，如果按着按键不动手，则会一直触发
   document.onkeydown=function(){
        console.log("按键被按下了")
    }

在这里插入图片描述

>>>>>> 键盘事件一般绑定给可以获取焦点的对象或者document对象。如果是div，则不会被触发。

按键事件绑定给div，则按键事件不会触发

<body>
    <div style="width:100px;height:100px;background-color: red;"></div>
</body>


<script>
    
    var div=document.getElementsByTagName("div")[0];
    div.onkeydown=function(){
        console.log("div按键事件被触发")
    }

   
</script>

在这里插入图片描述

按键事件绑定给可以获取焦点的对象或document，则可以触发

<body style="height:2000px">

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


<script>
    
    var input=document.getElementsByTagName("input")[0];
    input.onkeydown=function(){
        console.log("input按键事件被触发")
    }

</script>

在这里插入图片描述

2.2 键盘事件相关属性
1）获取哪一个按键被按下

<script>
    
    document.onkeydown=function(event){

        event=event||window.event;

        //获取按键的ASCII码值
        console.log(event.keyCode);


        console.log(event.ctrlKey); //判断"CTRL" 键是否被按下
        console.log(event.altKey); //判断"ALT" 按键是否被按下
        console.log(event.shiftKey);//判断"SHIFT" 键是否被按下。

    }

</script>

在这里插入图片描述

2）同时按住ctrl+A，如果是则触发
<script>
    
    document.onkeydown=function(event){

        event=event||window.event;

        //获取按键的ASCII码值
        console.log(event.keyCode);

        if(event.keyCode==65 && event.ctrlKey ){

            console.log("ctrl+A同时被按下")
        }
       
    }

</script>

在这里插入图片描述

2.3 键盘事件案例
1）在文本框中不能输入数字

原理：文本框中输入内容是onkeydown的默认行为。取消默认行为即可

<body>

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


<script>
    
    var input=document.getElementsByTagName("input")[0];
    input.onkeydown=function(event){

        event=event||window.event;

        //0-9的keycode为48-57
        if(event.keyCode>=48 && event.keyCode<=57){

            //取消文本框的默认行为
            return false;
        }
    }

</script>

在这里插入图片描述

2）键盘按键控制DIV移动

缺点：按键持续按下时，第一次有明显的卡顿

<!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>Document</title>
</head>
<body >

    <div style="width:100px;height: 100px;background-color: red; position: absolute;"></div>
</body>


<script>
    
    var div=document.getElementsByTagName("div")[0];
    document.onkeydown=function(event){

        event=event||window.event;

        //通过keyCode可以获取上下左右的码值
        //左:37   上:38  右:39   下:40
        console.log(event.keyCode)

        //按下左键
        if(event.keyCode==37){
            div.style.left=(div.offsetLeft-10)+"px"
        }
        //按下上键
        if(event.keyCode==38){
            div.style.top=(div.offsetTop-10)+"px"
        }
        //按下右键
        if(event.keyCode==39){
            div.style.left=(div.offsetLeft+10)+"px"
        }
        //按下下键
        if(event.keyCode==40){
            div.style.top=(div.offsetTop+10)+"px"
        }
        
        //取消浏览器默认行为
        return false;
    }

</script>

</html>

在这里插入图片描述

三、JS常规事件全解

	
	1、JS提供的事件方法在使用HTML标签事件绑定、JS事件绑定时，要加上on。
	   在使用事件监听方式绑定时，不需要加。
	   



		click	当用户单击元素时发生此事件。	
		dblclick	当用户双击元素时发生此事件。	

		keydown	当用户正在按下键时，发生此事件。	
		keypress	当用户按下键时，发生此事件。	
		keyup	当用户松开键时，发生此事件。	

		focus	在元素获得焦点时发生此事件。	FocusEvent
		focusin	在元素即将获得焦点时发生此事件。	FocusEvent
		focusout	在元素即将失去焦点时发生此事件。	FocusEvent
		blur	当元素失去焦点时发生此事件。	FocusEvent


		mousedown	当用户在元素上按下鼠标按钮时，发生此事件。	MouseEvent
		mouseenter	当指针移动到元素上时，发生此事件。	MouseEvent
		mouseleave	当指针从元素上移出时，发生此事件。	MouseEvent
		mousemove	当指针在元素上方移动时，发生此事件。	MouseEvent
		mouseout	当用户将鼠标指针移出元素或其中的子元素时，发生此事件。	MouseEvent
		mouseover	当指针移动到元素或其中的子元素上时，发生此事件。	MouseEvent
		mouseup	当用户在元素上释放鼠标按钮时，发生此事件。	MouseEvent
		mousewheel	不推荐使用。请改用 wheel 事件。	WheelEvent


		change	当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件	Event

		copy	当用户复制元素的内容时发生此事件。	ClipboardEvent
		cut	当用户剪切元素的内容时发生此事件。	ClipboardEvent
		paste	当用户将一些内容粘贴到元素中时，发生此事件。	ClipboardEvent


		drag	拖动元素时发生此事件。	DragEvent
		dragend	当用户完成拖动元素后，发生此事件。	DragEvent
		dragenter	当拖动的元素进入放置目标时，发生此事件。	DragEvent
		dragleave	当拖动的元素离开放置目标时，发生此事件。	DragEvent
		dragover	当拖动的元素位于放置目标之上时，发生此事件。	DragEvent
		dragstart	当用户开始拖动元素时发生此事件。	DragEvent
		drop	当将拖动的元素放置在放置目标上时，发生此事件。	DragEvent
		durationchange	媒体时长改变时发生此事件。	Event


		input	当元素获得用户输入时，发生此事件。	

		load	在对象已加载时，发生此事件。	
		loadstart	当浏览器开始查找指定的媒体时，发生此事件。	ProgressEvent


		reset	重置表单时发生此事件。	Event
		scroll	滚动元素的滚动条时发生此事件。	
		submit	在提交表单时发生此事件。	Event

		wheel	当鼠标滚轮在元素向上或向下滚动时，发生此事件。	WheelEvent
3.1 onload事件的变形

<body onload="load()">

</body>
二旬、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaEE源代码 dom4j-1.6.1
07-09
JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源...
dom常用事件介绍
qq_2511276124的博客
12-13 385
dom常用事件介绍。
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2343
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
JavaScript的事件流、页面加载事件与元素滚动事件
最新发布
2301_79614379的博客
05-19 680
当初始的HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载。当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发（当一个元素的事件触发时，会依次调用所有父级的。利用事件冒泡的特点，给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素事件。目的：防止事件影响父级元素，将事件限制在当前元素内（不仅可以阻止事件冒泡，也可以阻止事件捕获）。从DOM的根元素开始去执行对应的事件（从父到子，从外到里）
滚动加载事件-scroll、offset、client家族
qq_54201133的博客
06-06 566
滚动加载事件-scroll、offset、client家族
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
LuShanGuoQiLin的博客
08-25 188
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
元素滚动 scroll 与 scroll 事件
weixin_52212950的博客
03-20 2427
scroll 翻译过来就是滚动的意思，我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性： element.scrollTop：返回滚动后被卷上去的距离，返回值无单位 element.scrollLeft：返回滚动后被卷到左边的距离，返回值无单位 element.scrollWidth：返回自身的实际宽度（包含padding，不包含边框） element.scrollHeight：返回自身的实际高度（包含padding，不包含边框
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
dom4j-2.1.3.jar
04-29
dom4j是一个十分优秀的JavaXML API，具有性能优异、功能强大和极其易使用的特点，它的性能超过sun公司官方的dom技术，同时它也是一个开放源代码的软件。 dom4j-2.1.3 XML Document Object Model based on Java ...
dom-events:功能性DOM事件处理器
04-22
功能性DOM事件处理器 ... import { DomEventDispatcher } from '@frontmeans/dom-events' ; const dispatcher = new DomEventDispatcher ( document . getElementById ( 'my-button' ) ) ; dispatcher . on ( 'click'
dom4j-2.1.1.jar
12-10
四、DOM4J与其他XML库的比较 DOM4J与JDOM、XOM等其他XML处理库相比，其优势在于功能全面、性能优秀和广泛的社区支持。虽然Java标准库中的JAXB和DOM API提供了XML处理的基础功能，但DOM4J因其简洁的API和强大的功能...
JS-加载事件-滚动事件
weixin_54902466的博客
06-15 1142
加载事件一 加载事件1.语法2.详解3.注意4.代码演示二 滚动事件1.概念2.语法3.注意事项4.代码演示5.总结: 一 加载事件 加载事件是浏览器加载，如图片外联JavaScript、外联 CSS 等外部资源完成时触发的事件 1.语法 element.addEventListener(‘load’,function () {}); 2.详解 1、网页当中凡是写路径的都会再network被查看 2、凡是有路径的都需要有外部资源 有时候我们需要加载资源之后再去做某些事情，那么此时就需要加载事 3.注意 通
JavaScript基础——滚动事件、加载事件、三大家族
NGUP_LEE的博客
04-05 4073
文章目录一、滚动事件和加载事件1.1 滚动事件1.2 加载事件二、元素的大小和位置2.1 scroll家族2.2 offset家族2.3 client家族 一、滚动事件和加载事件 1.1 滚动事件 当页面滚动时触发的事件 时间名：scroll 样例，监听整个页面滚动： window.addEventListener('scroll',funtion(){ //执行操作 }) 可以给window或者document添加scroll事件 1.2 加载事件 加载外部资源（如图片、外联CSS和JavaScr
滚动事件与加载事件
大鹏的博客
12-15 3136
当初始的HTML文档完全加载和解析完成之后,DOMContentLoaded事件被触发,无需等待样式表,图像等完成加载。注意: 不光可以监听整个页面资源的加载完毕,也可以针对某个资源绑定load事件。加载外部资源(如图片, 外联CSS和JavaScript)加载完毕是触发事件。给document添加DOMContentLoaded事件。监听某个元素的内部滚动直接给某个元添加元素即可。事件名:DOMContentLoaded。给window添加load事件。当页面进行滚动触发事件。事件名: scroll。
JS - 处理元素滚动
kelly0721的博客
02-07 577
业务功能中时常有元素滚动的功能，现在就总结一下一些常用的事件。
vue：元素滚动到底部触发事件，隐藏滚动条及滚动条显示和隐藏切换
qq_37899622的博客
06-23 2570
一、设置一个div元素，绑定滚动事件 二、在methods中描述滚动事件 三、设置CSS，让其内容超出高度时存在滚动条（overflow: auto;），然后隐藏滚动条（::-webkit-scrollbar{ display: none; }）
JS监听DOM元素滚动
S筱潇S四维Smile
06-12 3070
scroll 可以实现监听页面滚动或者元素滚动是否到底。
Web APIs day3 | Dom事件进阶（事件流、事件委托、加载 &滚动事件）
csyldjy的博客
06-05 332
目录1 事件流1.1 事件流与两个阶段说明1.2 事件捕获1.3 事件冒泡1.4 阻止冒泡1.5 解绑事件1.6 补充1.6.1 鼠标经过事件的区别1.6.2 两种注册事件的区别2 事件委托3 其他事件3.1 页面加载事件3.1.1 资源加载3.1.2 页面dom加载3.2 元素滚动事件3.2.2 页面滚动事件-获取位置3.2.3 页面滚动事件-滚动到指定的坐标 3.2.4 案例3.3 页面尺寸事件 3.3.2 页面尺寸事件-获取元素宽高 4 元素尺寸于位置事件流: 指的是事件完整执行过程中的流动路径(
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2228
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
DOM-XSS漏洞挖掘与攻击面全面解析
常见的DOM-XSS漏洞位置包括： 1. URL代入页面: 在页面加载时，某些用户输入字段可能导致URL被恶意注入，如搜索框、表单提交等。攻击者通过构造恶意URL，利用location.href属性获取location.search和location.hash中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值