javaScript事件对象笔记


一、事件

1.鼠标事件

代码如下(实例):

onclick 当用户点击某个对象时会触发的事件
ondblclick 当用户双击某个对象是会触发的事件
onmousedown 鼠标按钮在某个元素上被按下时触发的事件
onmouseenter 当鼠标指针移动到元素上时触发的事件
onmouseleave 当鼠标指针移出元素时触发的事件
onmousemove 当鼠标在元素上移动时触发的事件
onmouseover 当鼠标移到某元素之上时会触发的事件
onmouseout 当鼠标从某元素中移开时触发的事件
onmouseup 当鼠标键在某元素上被松开时触发的事件

1.1鼠标事件属性

clientX 可以获取鼠标指针的水平坐标
cilentY 可以获取鼠标指针的垂直坐标
pageX 可以获取鼠标相对于当前页面的水平坐标
pageY 可以获取鼠标相对于当前页面的垂直坐标

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

2.鼠标滚轮事件

onwheel 鼠标滚轮事件

2.1鼠标滚轮事件属性

event.wheelDelta 可以获取鼠标滚轮滚动方向

3.键盘事件

代码如下(实例):

//onkeydown 某个键盘按键被按下时触发
onkeyup 某个键盘按键被松开是触发
onkeypress 某个键盘按键被按下并松开。

3.1键盘事件属性

 document.onkeydown=function(event){
                // 判断y键是否被按下
                // 判断y和ctrl是否同时被按下
                /*
					 * 可以通过keyCode来获取按键的编码
					 * 	通过它可以判断哪个按键被按下
					 * 除了keyCode,事件对象中还提供了几个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
					 * 			如果按下则返回true,否则返回false
					 */
                if(event.keyCode==89&&event.keyCode==17){
                    console.log("y键被按下了");
                }
            }

4.表单事件

代码如下(实例):

//onblur 元素失去焦点时触发
onfocus 元素获取焦点
onchange 表单元素的内容改变时触发
oninput 元素获取用户输入时触发
onsubmit 表单提交时触发

5.加载事件

代码如下(实例):

//window.onload
加载完body在加载script代码

二、内置对象

1.字符串对象

代码如下(示例):

1.字符串.length 获取字符串的长度
2.charAt(index)方法和charCodeAt(index)方法 用于获取第n个字符的内容,和内容unicode编码,index索引是从0开始计算的
3.indexOf(要查找的字符) lastIndexOf(要查找的字符)
4.字符串.toLowerCase()转换成小写
字符串.toUpperCase()转换成大写
5.字符串截取
1.substr(开始的索引位置,截取的长度);
2.substring(开始的索引位置,结束的索引位置); 不包含结束的索引

2.时间对象

代码如下(示例):

/* Date对象
            -在JS中使用Date对象来表示一个时间 */
            // 创建一个Date对象
            // 如果直接使用构造函数创建一个Date对象,则会封装为当前代码的执行时间
            var d=new Date();
            // 创建一个指定的时间对象
            // 需要在构造函数中传递一个表示时间的字符串作为参数
            // 日期格式 月份/日/年 时:分:秒
            var d2=new Date("01/01/1970 8:00:00");
            /* getDate()
                -获取当前日期对象是那一日 */
            var date=d.getDate();
            /* getDay()
            -获取当前日期对象是周几
            -会返回一个0-6的值
                0表示周日 */
            var day =d.getDay();
            /* getMonth()
                -获取当前对象的月份
                -会返回0-11的值
                0表示1月
                1表示2月
                11表示12月 */
            var month=d.getMonth();
            // var year=d2.getYear()
            /* getTime()
                -获取当前日期对象的时间戳
                -时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒(时间差8小时)
                    到当前时间发费的毫秒数(1秒等于1000毫秒) */
            var time=d2.getTime();
            /* 利用时间戳来测试代码的执行的性能
                获取当前时间戳 */
            // time=Date.now();
            var start=Date.now();
            for(var i=0;i<100;i++){
                console.log(i);
            }
            var end=Date.now();
            console.log("我执行了:"+(end-start)+"毫秒")
            // console.log("我执行了:" + start-end+"毫秒");

3.数学对象

代码如下(示例):

1.Math.PI获取圆周率
2.Math.abs() 绝对值
3.Math.ceil 对x进行上舍入(进一法);有小数就进1
4.Math.floor对x进行 下舍入(舍一法) 小数抹去
5.Math.round 四舍五入
6.Math.pow(x,y) x的y次方
7.Math.sqrt(x) 求x的平方根
8.Math.max() 返回最大值
9.Math.min() 返回最小值
10.Math.round() 生成1个0-1的随机数字

4.数组对象

代码如下(示例):

1.数组.join() 使数组元素以特定字符进行拼接得到新的字符串,join方法是将数组转换成了具有特殊分割符的字符串
2.字符串.split() 将具有一定规则的字符串转换成数组
3.数组.push()在数组末尾加一个元素或者多个元素(都是直接对数组本身进行操作)
4.数组.pop方法在数组的末尾删除掉一个元素(都是直接对数组本身进行操作)
5.数组.unshift在数组的头部追加一个或者多个元素
6.shift 删除数组当中的第一个位置的元素
7.数组.sort排序 会改变原有数组 而且排序是按字符顺序排序,请谨慎使用
8.数组.reverse 使数组顺序颠倒 --(都是直接对数组本身进行操作)

三、自定义对象

1.递归函数

代码如下(示例):

// 3.递归函数
			function tempfun(x){
				if(x<1){
					return;	//递归的出口
				}else{
					document.write("<br/>"+x);
				}
				tempfun(x-1);
			}
			tempfun(1000);

2.创建对象

/* 创建一个对象 */
        var obj=new Object();
        // 向对象中添加属性
        obj.name="孙悟空";
        obj.age=18;

2.1字面量创建对象

var obj={
            name:"孙悟空",
            age:28,
            gender:"男",
            address:"花果山"
        };
         // 对象的属性值可以是任何的数据类型,也可以是个函数
        obj.sayName=function(){
            console.log(obj.name);
        };
/* 函数也可以称为对象的属性
            如果一个函数作为一个对象的属性保存,
            那么我们称这个函数是这个对象的方法
            调用函数就说调用对象的方法 (method)
            
        但是它只是名称上的区别*/

3.对象的访问

for in循环得规则
总结:for(var i in xxx) for in循环中如果xxx是数组此时i就是索引012345…
for(var i in xxx) for in循环中如果xxx是对象此时i就是属性名称…
想访问对象的属性值 可以 对象[属性名]

var shuzu=['李白','杜甫','陶渊明','李清照'];
			for(var i in shuzu){
				document.write("使用for in循环 此时的i是"+i+","+shuzu[i]+"<br/>");
			}

4.构造函数

// 构造函数的特点:
// 1.一般情况首字母大写
// 2.没有显示使用object创建对象
// 3.运用this来指向此对象(将构造函数的作用域指向新对象 所以此时的this才是当前对象)
// 4.无明确return值,但仍能被新建的对象接收到
// 5.如果构造函数没有传入参数,则自动补充undefined
// typeof 是用于判断基础数据类型的,如果用于判断对象的数据类型都会返回object

function createPerson(name, age, sex) {
				// 1.必须创建空对象
				var person = new Object();
				person.myName = name;
				person.mySex = sex;
				person.myAge = age;
				person.sayHi = function() {
					//
				}
				// 3.将制造好的对象返回
				return person;
			}
			var p1 = createPerson("小灰灰", "男", 18);
			console.log(p1);
			// 2.构造函数模式上生产对象
			
			function MyFunCreatePerson(name, sex, age) {
				// 构造函数内自动省略 new Object()
				// var obj=new Object(); 或者 var obj={};
				this.herName = name;
				this.herSex = sex;
				this.herAge = age;
				this.sayHello = function() {
					var msg = "您好我是:" + this.herName + "我的性别是:" + this.herSex + "我的年龄是:" + this.herAge;
				}
				// 还自动省略了  return obj
			}
			var p2 = new MyFunCreatePerson("喜洋洋", "男", 20);
			console.log(p2);
			// constructor.name	用于获取对象的具体类型对象
			// document.write("<br/>工厂模式创建对象的对象是"+p1.myName+"类型是"+p1.constructor.name);
			// document.write("<br/>工厂模式创建对象的对象是"+p2.herName+"类型是"+p2.constructor.name);
			// 3.原型模式	生产对象--大大实现了属性和方法的共享	节省了很多资源
			function person(){
				person.prototype.pName="小峰";
				person.prototype.pAge=18;
				person.prototype.pSex="男";
				person.prototype.pFriends=["小鱼人","小狐狸","小河蟹","小德玛"];
				person.prototype.sayHello=function(){
					var msg = "您好我是:" + this.pName + "我的性别是:" + this.pSex + "我的年龄是:" + this.pAge;
					document.write(msg)
				}
				
			}
			var pp=new person();
			pp.pName="小艾";
			pp.pAge=66;
			pp.pFriends.push("Galaxy");
			pp.sayHello();
			document.write("小艾同学的朋友有"+pp.pFriends);
			console.log(pp);
			
			var ppt=new person();
			ppt.pName="皮皮题";
			ppt.sayHello();
			console.log(ppt);
			document.write("皮皮题的朋友还有"+ppt.pFriends);
			// 原型模型其弊端
			// 由于原型函数属性和方法是共享的,会导致如果属性指向的是一个对象,有一个实例更改了此对象,所有实例都会跟着更改
			//4. 原型模型升级版	--构造函数和原型模式的混合使用
			function NewPerson(name,age,sex){
				this.newName=name;
				this.newAge=age;
				this.newSex=sex;
				this.newFriends=['小露露','小娜娜'];
			}
			NewPerson.prototype.playGamej=function(){
				var msg="您好啊,我是"+this.newName+"我今年"+this.newAge+"岁了";
			}
			var person1=new NewPerson("小马",15,"男");
			var person2=new NewPerson("小王",18,"女");
			console.log(person1);
			console.log(person2);
			person1.newFriends.push("老王");
			person2.newFriends.push("老赵");
			document.write("<br/>小马的朋友有"+person1.newFriends);
			document.write("<br/>小王的朋友有"+person2.newFriends);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function MyFunCreatePerson(name, sex, age) {
				if(name==undefined||name==""){
					this.herName="无名";
				}else{
					this.herName=name;
				}
				if(sex==undefined){
					this.herSex="女";
				}else{
					this.herSex = sex;
				}
				if(age==undefined){
					this.herAge=19;
				}else{
					this.herAge = age;
				}
				
				this.sayHello = function() {
					var msg = "您好我是:" + this.herName + "我的性别是:" + this.herSex + "我的年龄是:" + this.herAge+"岁";
					document.write(msg);
				}
			}
			var p1=new MyFunCreatePerson();
			p1.sayHello();
			var p2=new MyFunCreatePerson("小美");
			p2.sayHello();
			
			
		</script>
	</body>
</html>

5.对象直接量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 键  值  对
			// var person3={name:"zhangshan",
			// 			person2:"lishi",
			// 			person1:"wangwu"}
			var person={
				name:"zhangshan",
				sex:'女',
				friends:['明亮','非凡'],
				playGame:function(){
					var msg="大家好,我是"+this.name+"我的性别是"+this.sex+"我正在后排打游戏"
				}
			}
			// 对象直接量的访问 与 常规对象访问一致
			// 1.对象名称.属性名称
			console.log(person.name);
			// 2.对象名称["属性名"]
			console.log(person["sex"]);
			// 3.使用for in 循环访问
			for(var i in person){
				console.log("属性名称有"+i+"属性值"+person[i]);
			}
			
		</script>
	</body>
</html>

四、JSON

1.json转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 1.将json转换成一般字符串  JSON.Stringfy
			// json类型的对象
			var hero={"name":"惊奇队长","sex":"女","gongji":"宇宙射线"};
			var str =JSON.stringify(hero);
			// 将JSON转换为字符串后我们可以做很多操作
			var str =str.replace("惊奇队长","地震女");
			console.log(str);
			// 2.将一定格式的字符串转换成json JSON.parse()
			var ob=JSON.parse(str);
			var str1='{"haha":77,"dd":66}';
			var ob1=JSON.parse(str1);
			console.log(ob1);
		</script>
	</body>
</html>

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页