JS事件绑定和定时相关

事件绑定 -让网页内容和对人类指定的行为做出反应

1.事件三要素：事件源、事件、事件驱动程序

2.绑定事件的方法

1）在标签内部给事件源的事件属性赋值:<标签名 οnclick=“事件驱动程序”></标签名>
函数中的this是window对象

2)在JS中给标签对应的节点的事件属性赋值：事件源节点.onclink =事件驱动程序对应的函数
注意：必须是普通函数函数名或是匿名函数
函数中的this是事件源
3)在JS中通过节点对象的addEventlistener绑定事件： 节点.addEventlistener(事件名称{不能留on}，事情驱动驱动对应的函数)

JS的定时器

JS的定时器有两种：Interval，Timeout

1.Interval （定时器的开启和关闭）

setinterval （函数，时间） ：创建定时器 ，指每过设置的时间，自动调用改函数 ，时间的单位是毫秒

t1 = setInterval()(function(){
		console.log('hello,world')
	},1000)
// 每过1000毫秒 打印一次hello,world ，会一直循环

clearinterval(定时器的对象) ：关闭该定时器

clearinterval(t1)
//关闭上述的定时器

2.Timeout

setTimeout（函数，时间）：:创建定时器，当过了多久会调用该函数一次就会自动停止

t3 = setTimeout(function(){
	console.log('hello')
},1000)
// 过1秒后调用该函数一次，然后定时器终止

Timeout也可以用clear方法关闭 但是每意义，本身Timeout定时器相当于一个定时的炸弹，只会运行一次，真想关闭这个不如直接删除代码

JS弹框

1.alert ——提示性弹框（带确定按钮）

<button onclick="message1()">弹框</button>  
function message1(){
	   alert('添加成功！')
   }
// 当然用JS只能在Script中使用 

2.confirm ——提示性弹窗（带确定和取消按钮），返回的是布尔值 ，取消返回的是false

<button onclick="message2()">弹框2</button>
   function message2(){
	   var re = confirm('是否要删除？')
	   console.log(re)
	   if(re==ture){
		   //点了确定执行某件事
	   }else{
		   //点了取消执行某件事
	   }
   }

3.prompt ——提示信息（带一个输入框，确定和取消按钮） ，其中取消返回的是null

<button onclick="message3()">弹框3</button>
   function message3(){
	   var re = prompt('请输入名字:','张三')    // 张三默认值可以不写
       console.log(re)
	   
   }

JS中常见事件类型

1.鼠标相关事件（任何标签都可以绑定鼠标事件）

onclick ——鼠标点击事件

onmouseover ——鼠标悬停事件

onmouseout ——鼠标离开事件

2.按键相关事件

onkeypress —— 某个按键按下对应的事件
onkeydown —— 某个按键按下对应的事件
onkeyup ——某个按键按下弹起来对应的事件
注意：按键相关事件在绑定的时候必须通过JS绑定（方法2或方法3绑定），才能在函数中添加事件对应的参数，来获取案件信息

<input type="text" id="input1">
input2 = document.getElementById('input1')
input2.onkeypress = function(evt){
    console.log('键盘按下',evt,evt.key)
}
//evt   表明该函数中inptu所按下的键

练习：

​
#box2{
margin-top: 20px;
margin-left: 50px;
}
#box2>input{
border: 0;
border-bottom: 1px solid rgb(169,169,169);
width: 200px;
height: 50px;
outline: 0;
text-align: center;
font-size: 20px;
vertical-align: bottom; /垂直对齐方式/
}
#box2>button{
width: 70px;
height: 28px;
color: white;
font-size: 18px;
border: 0;
background-color: rgb(253,123,87);
}

​
#box2{
margin-top: 20px;
margin-left: 50px;
}
#box2>input{
border: 0;
border-bottom: 1px solid rgb(169,169,169);
width: 200px;
height: 50px;
outline: 0;
text-align: center;
font-size: 20px;
vertical-align: bottom; /垂直对齐方式/
}
#box2>button{
width: 70px;
height: 28px;
color: white;
font-size: 18px;
border: 0;
background-color: rgb(253,123,87);
}

苹果

×

		<div>
			<p>香蕉</p>
			<span>×</span>
		</div>
		
		<div>
			<p>西瓜</p>
			<span>×</span>
		</div>
		
		<div>
			<p>火龙果</p>
			<span>×</span>
		</div>
	</div>
	
	<div id="box2">
		<input type="" name="" id="name" value="" />
		<button type="button" onclick="add_friut()">确定</button>
	</div>
	
	<script type="text/javascript">
		function add_friut(){
			//1.获取输入框内容
			input1 = document.getElementById('name')
			name = input1.value
			input1.value = ''
			
			//2.创建新水果对应的新标签
			div = document.createElement('div')
			p = document.createElement('p')
			p.innerText = name
			span = document.createElement('span')
			span.innerText = '×'
			div.appendChild(p) 
			div.appendChild(span)
			// 新增的水果的颜色是随机色
			// random()  -  产生0~1的随机数
			r = parseInt(Math.random()*255)
			g = parseInt(Math.random()*255)
			b = parseInt(Math.random()*255)
			div.style.backgroundColor = "rgba(r,g,b,0.3)"
			
			box1 = document.getElementById('box1')
			box1.insertBefore(div, box1.firstElementChild)
		}
	</script>
</body>