【6】WEB安全学习----JavaScript 二

最新推荐文章于 2025-08-07 10:44:27 发布

原创最新推荐文章于 2025-08-07 10:44:27 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

WEB安全学习笔记专栏收录该内容

70 篇文章

订阅专栏

本文介绍了JavaScript的基本事件处理机制，包括事件捆绑、浏览器事件和HTML元素事件。此外还讲解了基于对象编程的概念，自定义对象的方法，以及JavaScript内置对象的使用。最后详细探讨了DOM框架，包括Window、Frames、Location等对象及其作用。

一、JavaScript事件

1、事件捆绑

HTML文档将元素的常用事件（onclick、onmouseover等）当作属性捆绑在HTML元素上，当元素的特定事件发生时，对应的特定事件的时间处理器就被执行，并将结果返回给浏览器。

<html>
	<body>
		<script>
			function fun1()
			{
				alert('wolrd');
			}
		</script>
		<a href="http://www.baidu.com" onclick="javascript:alert('hello')">打开百度</a>
		<a href="http://www.sina.com" onclick="fun1()">打开新浪</a>
	</body>
</html>

2、浏览器事件

浏览器事件指载入文档直到关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、活得焦点事件onfocus等。

<html>
	<body>
		<script>
			window.onblur = function()
			{
				alert('浏览器失去了焦点');
			}
		</script>
	</body>
</html>

3、HTML元素事件

<a>链接的事件有：

onclick：鼠标单击链接 ondbclick：鼠标双击链接 onmouseDown：鼠标在链接的位置下 onmMouseOut：鼠标移出链接所在位置 onmouseOver：鼠标经过链接所在位置 onmouseUP:鼠标在链接的位置放开 onKeyDown：键被按下 onkeyPress：按下并放开该键 onKeyUp：键被松开

<img>图片的事件有：

onerror：加载图片出现错误时触发 onload：图片加载时触发键被按下或松开等事件

<body>文档主体的事件有：

onblur：文档失去焦点 onclick：在文档中单击鼠标 ondbClick：在文档中双击鼠标等等

<form>表单的事件有：

onsubmit：提交窗体里的表单 onreset：窗体复位

<input>表单组件的事件有：

onblur：组件失去焦点 onclick：单击组件 onfocus：onchange：当文本框(text)内容发生改变且失去当前焦点、组件获得焦点等等

<textarea>多行文本框的事件有：

onblur：文本区失去焦点 onchange：文本区内容发生改变且失去焦点 onfocus：获得焦点等等

<html>
	<body>
		<img src="#" onerror="javascript:alert(/xss/)">
	</body>
</html>

二、JavaScript基于对象编程

1、JavaScript对象分类

自定义对象的两种方法

#使用new关键字定义对象
var info = new Object();    #使用new关键字结合Object来创建一个空的对象
info.nme = "张三";    #增加属性
info.age = 20;
info.show = function()    #增加方法
{
    document.write("自定义对象方法");
}
infi.show();    #调用对象的方法


#使用大括号来定义对象
var info = 
{
    name : "张三",
    age : 20,
    show:function()
    {
        document.write("自定义对象方法");
    }
}
infi.show();    #调用对象的方法

JS内置对象

js内置对象包括字符串对象、数组对象、日期时间对象、布尔对象、数字对象、数学对象

#字符串String对象的属性和方法
var str1 = "hello world";
var a = str1.length;     #获取字符串长度
str1.toUpperCase();    #到大写
str1.indexOf('e')      #查找字符串

#数组对象的属性和方法
var arr = [1,2,3,4];
arr.reverse();    #反转数组

#日期时间对象
var today = new Date();
today.getDay();    #取星期数
等等