第七次网页前端培训笔记（js对象，事件）

最新推荐文章于 2024-10-12 10:41:56 发布

cx_zz

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量392

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_61169431/article/details/122877293

版权

1.内置事件

         <script type="text/javascript">
			var date = new Date();
			console.log(date);
			console.log(date.getFullYear());
			console.log(date.getMonth() + 1); /*getMonth()表示0~11月，所以想获得真正的月份需要加1*/
		</script>

2.对象

            /*对象*/
			//通过字面量形式创建对象
			var obj1 = {};  //空对象
			console.log(obj1);
			var obj2 = {
				name:"zhangsan",
				age:18,
			};
			console.log(obj2);
			
			//通过new Object创建
			var obj3 =new Object(); //空对象
			console.log(obj3);
			
			//通过Object对象的create方法创建
			var obj4 = Object.create(null); //空对象
			console.log(obj4);
			
			var obj5 = Object.create(obj2);
			console.log(obj5);
			
			/*取值操作*/
			console.log(obj1.name);  //undefined
			console.log(obj2.name);  //zhangsan
			
			/*对象的序列化和反序列化*/
			var obj = {
				name:"zhangsan",
				pwd:"123456",
				age:18
			}; //json对象
			console.log(obj);
			var objtojson = JSON.stringify(obj);
			console.log(objtojson);
			
			var jsonstr = '{"name":"zhangsan","pwd":"123456","age":18}'; 
			console.log(jsonstr);
			var strtoobj = JSON.parse(jsonstr);
			console.log(strtoobj);

this用法

3.事件

     <body onload="loadWindow()">
		<button onclick="test()" onmouseout="outButton()">按钮</button>
		姓名：<input type="text" onblur="aa()" onfocus="bb()" />
		城市：<select onchange="changeCity()">
				<option>北京</option>
				<option>上海</option>
				<option>深圳</option>
			</select>
		
	</body>
	<script>
		function loadWindow(){
			console.log("文档加载完毕...");
		}
		function test(){
			console.log("按钮被点击了...");
		}
		function aa(){
			console.log("失去焦点了...");
		}
		function bb(){
			console.log("聚焦了...");
		}
		function changeCity(){
			console.log("值改变了...");
		}
		function outButton(){
			console.log("聚焦开始了...");
		}
		
	</script>

   <body>
            <!-- html事件处理程序 -->
			<button type="button" onclick="alert('hello')">按钮1</button>
			<!-- DOM0级事件*-->
			<button type="button" id="btn2">按钮2</button>
			<!-- DOM2级事件 -->
			<button type="button" id="btn3">按钮3</button>
			
   </body>
   <script>
         /*DOM0级事件*/
		//1.事件源：获取事件源（按钮）
		var btn2 = document.getElementById("btn2");
		console.log(btn2);
		//2.事件类型：给事件源绑定指定时间
		btn2.onclick = function(){
			console.log("按钮被点击了...");
		}
		btn2.onmouseout = function(){
			console.log("按钮被点击了...");
		}
		
		
		
		
		/*DOM2级事件*/
		//1.事件源：获取源事件
		var btn3 = document.getElementById("btn3");
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了...");
		},false);
		function btnFunction(){
			console.log("鼠标离开按钮3了...");
		}
		btn3.addEventListener("mouseout",btnFunction,false);
		
	</script>