JavaScript 基础03-对象数组事件

发表于 分类于 阅读次数：

1.JS 数组

声明数组

  • 1 使用 Array() 构造函数方式
    • var list = new Array(); // 空数组
    • var list = new Array(length); // 定义数组 初始长度
    • var list = new Array(v1,v2,v3); // 指定初始值
  • 2 JSON 方式
    • var list = []; // 空数组
    • var list = [v1,v2,v3]; // 指定初始值

数组特点

  • 不能使用 [] 的形式去追加数组元素,想要追加的请使用 push()
  • JS数组的下标是连续的, 跳跃着赋值数组元素的话,中间的元素会自动赋值为undefined
  • JS 只有索引数组,没有关联数组

遍历

  • for 适合遍历从页面中获取到的元素集合对象
  • for-in 适合遍历对象

数组 属性

见手册

数组 方法

  • 不改变原数组的方法:
    • concat()
    • join()
    • slice()
  • 改变原数组的方法:
    • reverse()
    • push()
    • pop()
    • unshift()
    • shift()
    • sort()

2.JavaScript 的内置对象

Boolean

Boolean 对象的声明

  • 直接赋值
  • 转换函数
  • 构造函数

Number

Number 对象的声明

  • 直接赋值
  • 转换函数
  • 构造函数

Number的属性

Number的方法

String

String 对象的声明

  • 直接赋值
  • 转换函数
  • 构造函数

String 的属性

String 的方法

RegExp

RegExp 对象的声明

  • 直接赋值
  • RegExp 构造函数

RegExp的方法

RegExp 示例

Date

获取 date 对象

获取 date 中的信息

设置 date

Math

Math 的属性

Math 的方法

Array

已学习

3.JavaScript 事件

1. 事件的绑定

  • 事件作为 元素的属性
1
<tagName event="JS code..."></tagName>
  • 事件作为 元素对象的属性
1
2
element.onclick = function(){}
element.onclick = funName;
  • 事件监听(标准)
1
2
非IE: element.addEventListener('event', funName, false);
IE:   element.attachEvent('onevent', funName);

2. 解除绑定

  • 第1种和第2种的绑定方式
1
2
element.event = function(){}
element.event = null;
  • 监听方式
1
2
非IE: element.removeEventListener('event', funName, false);
IE:   element.detachEvent('onevent', funName);

3. 给一组元素绑定事件和this的使用

  • 循环绑定事件,获取触发事件的元素对象时,需要使用 this
  • 元素内部绑定事件时 传入this, 表示该元素对象自己

4. 闭包 closure

  • 在循环绑定事件时,将循环变量保留下来时,就需要使用闭包
  • 用一组元素 去控制另一组元素时,建议使用闭包
  • 语法:
1
2
3
4
5
6
7
for( ... ) {
    (function (i,x,y){
        element.event = function(){
            // 使用 i,x,y
        }
    })(i,x,y);
}

5. 常用事件

5.1 鼠标事件

  • onclick 单击触发
  • ondblclick 双击触发
  • oncontextmenu 右击触发/return false阻止系统菜单
  • onmouseover 鼠标指向触发
  • onmouseout 鼠标移开触发
  • onmousedown 鼠标按下触发
  • onmouseup 鼠标松开触发
  • onmousemove 鼠标移动触发

5.2 键盘事件

  • onkeydown 按下按键触发
  • onkeyup 松开按键触发
  • onkeypress 按下并松开触发(JS高级事件)
    不是所有的按键都能触发,无输出的按键 就不能触发
(方向键/shift/alt/ctrl/tab/大小写)

5.3 表单事件

  • onsubmit 表单被提交时触发
  • onreset 表单被重置时触发
  • onfocus 获取焦点时触发
  • onblur 失去焦点时触发
  • onchange 改变表单控件的内容或状态时就触发
    `用于input元素时,value值变化且失焦才触发`
  • oninput 非IE: 输入时输入时(input/textarea)
  • onpropertychange IE: 输入时输入时(input/textarea)
  • onselect 选中时触发

5.4 框架/对象事件

  • onload 文档加载完触发/图片加载完触发
  • onunload 文档关闭时触发 IE
  • onbeforeunload 文档关闭时触发 非IE
    浏览器阻止了关闭前的弹框 需要return "string..."
  • onabort 图片加载过程中中断触发
  • onerror 图片加载错误触发
  • onresize 窗口/框架大小变化时触发
  • onscroll 元素滚动条在滚动时触发

5.5 其他事件

  • oncopy 拷贝内容时触发
  • oncut 剪切内容时触发
  • onpaste 粘贴内容时触发
  • onplay 音/视频开始播放时触发(audio/video)
  • onpause 音/视频暂停时触发(audio/video)
  • onended 音/视频播放结束时触发(audio/video)

// Chrome 73+ 自动处理 play 状态
// https://www.tuicool.com/articles/J363M3v

6. Event 事件对象

6.1 获取

事件内部 传入 en 获取使用
var en = en || window.event;

6.2 属性

1
2
3
4
5
en.x/en.clientX 鼠标的x坐标
en.y/en.clientY 鼠标的y坐标
en.button       鼠标的按键码: 0左键/1中键/2右键/3后退键/4前进键
en.offsetX      鼠标相对于触发事件元素的 x 坐标
en.offsetY      鼠标相对于触发事件元素的 y 坐标

7. 常用HTML元素属性

1
2
3
4
5
6
7
8
9
10
11
12
innerHTML   双标签之间的文本

当前元素 相对与body 或已定位的父元素的 偏移量
offsetTop
offsetLeft

当前元素 左边缘或顶边缘 滚过的像素值
scrollTop
scrollLeft

className   当前元素的class属性值
tagName     当前元素的标签名

PS.补充

JS 中的随机数的产生.

Math.random() 函数 返回 0 和 1 之间的伪随机数
可能为 0, 但总是小于 1

1
2
3
4
5
6
7
8
9
10
11
12
// 生成 min-max,包含 min 但不包含 max 的整数:
parseInt(Math.random() * (max-min) + min, 10);

// 生成min-max,不包含 min 但包含 max 的整数:
Math.floor(Math.random() * (max-min) + min) + 1;

// 生成 min-max,不包含 min 和 max 的整数:
Math.round(Math.random() * (max-min) + min + 1);

// 生成min-max ,包含 min 和 max 的随机数:
Math.round(Math.random() * (max-min)+min);
Math.floor(Math.random() * ((max-min)+1) + min);

特效-下载进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body>
    <h1>下载进度条</h1>
    <hr>
    <button onclick="start()" id="but">开始下载</button>
    <div id="container">
    	<div id="color">
    		<span id="tip"></span>
    	</div>
    </div>
    
    <script>
		//获取color的宽度
		var container=document.getElementById('container');
		var color=document.getElementById('color');
        var tip=document.getElementById('tip');
		var but=document.getElementById('but');
                console.log(but.onclick);
        // 设置每次调用设置color宽度
        var w=0;
        function download(){
                color.style.width=w+'%';
                w++;
                tip.innerHTML=(w-1)+'%';
                but.onclick=stop;
                but.innerHTML='暂停下载';
                console.log(but.onclick);
    			if (w>100) {
    				clearInterval(c1);
					// alert('下载完成');
					tip.innerHTML='下载完成';
                    but.innerHTML='下载完毕';
                    but.onclick=start;
    			}
    	}

    	// 点击start开启定时器
    	function start(){
    		if (w<100) {
    			c1 = setInterval('download()',50)	
    		}
    	}
        function stop(){
            clearInterval(c1);
            but.onclick=start;
            but.innerHTML='继续下载';
            console.log(but.onclick);
        }
    </script>

特效-图层拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<head>
    <meta charset="UTF-8">
    <title>图层拖拽</title>
    <style>
    	#box{
    		width: 100px;
    		height: 100px;
    		border: 1px solid #000;
    		position: absolute;
    	}
    </style>
</head>
<body>
    <h1>图层拖拽</h1>
    <hr>
    
    
	<div id="box">
		
	</div>

	<script>	
		var box = document.getElementById('box');
		box.onmousedown = function(en){
			var en = en || window.event;
			box.style.background='#00eef3';
			box.innerHTML='按住';
    		console.log(box.style);
			document.onmousemove = function(env){
				var env = env || window.event;
				box.style.top=env.y-en.offsetY+'px';
				box.style.left=env.x-en.offsetX+'px';
	    		console.log(box.style.top);
	    		console.log(box.style.left);
			}
		}

		document.onmouseup = function(){
			box.style.background = '#fff';
			box.innerHTML='松开';
			document.onmousemove = null;
		}

	</script>

</body>

特效-地址联动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<h1>JS onchange 地址联动实例</h1>
<hr>

<select name="con" id="con"></select>
<select name="city" id="city"></select>

<script>
// 声明数组
// 国家的信息
var conList = ['中国', '美国', '英国', '日本', '德国'];

// 城市的信息 二维数组
var cityList = new Array();
cityList[0] = ['北京', '上海', '天津', '重庆', '南京'];
cityList[1] = ['纽约', '洛杉矶', '芝加哥', '旧金山', '华盛顿'];
cityList[2] = ['伦敦', '伯明翰', '曼彻斯特', '剑桥', '爱丁堡'];
cityList[3] = ['东京', '北海道', '福冈县', '广岛', '大阪'];
cityList[4] = ['柏林', '汉堡', '慕尼黑', '科隆', '法兰克福'];

// 获取下拉框 填充国家或城市

var con = document.getElementById('con');
var city = document.getElementById('city');
// console.log(con, city);

// 填充国家下拉框选项
for (var i = 0; i < conList.length; i++) {
    // con.innerHTML += '<option value="'+i+'">'+conList[i]+'</option>';
    con.add(new Option(conList[i], i));
}

// 绑定onchange事件到第一个下拉框之上
con.onchange = function () {
    // 清空之前的选项
    // city.innerHTML = '';
    city.options.length = 0;

    // 根据value值 获取被选中的option信息
    var index = con.value;
    // console.log(index);
    // 根据索引值,去取出对应的城市信息
    var citys = cityList[index];
    // console.log(citys);

    // 填充城市信息
    for (var i = 0; i < citys.length; i++) {
        city.add(new Option(citys[i], i));
    }
}

// 手动触发onchange一次
con.onchange();
</script>

特效-resize事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<h1>JS onresize  事件</h1>
 <hr>

 <div id="box"></div>

 <script>
     window.onresize = function(){
         box.innerHTML = Math.random();
         // 随机背景颜色
         // // rgb(0,0,0)  ~ rgb(255,255,255)
         // var r = Math.floor(Math.random() * 100000 % 256);
         // var g = Math.floor(Math.random() * 100000 % 256);
         // var b = Math.floor(Math.random() * 100000 % 256);
         // console.log(r,g,b);
         // document.body.style.backgroundColor = 'rgb('+r+','+g+','+b+')';

         // 0~9a~f >>> [0,1,2,3,4,....e,f]
         // #000000 ~ #ffffff
         var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
         document.body.style.backgroundColor = color;

         // 2147483647   int
         // 10485760   =>  10M
         // 1048576   =>  1M
     }
 
 </script>