事件

onscroll

1.当页面滚动到底部时，将input框设置为disabled = false
2.获取p标签 对象

var info = document.getElementById("info")

3. 获取input标签 数组

var input = document.getElementsByTagName("input")
console.log(info,input)

4. 为info绑定一个滚动事件

info.onscroll = function(){
// console.log(123)
				console.log("scrollHeight"+info.scrollHeight)
console.log("scrollTop"+info.scrollTop)
				console.log("clientHeight"+info.clientHeight)
if(info.scrollHeight - info.scrollTop == info.clientHeight){
	input[0].disabled = false
	input[1].disabled = false
	}
}

div跟随鼠标移动

1.获取div盒子

var box = document.getElementById("box")

2.注册鼠标移动事件

document.onmousemove = function(event){

3.兼容浏览器

event  = event || window.event			

4.获取鼠标垂直 水平滚动的距离

var t = document.body.scrollTop || document.documentElement.scrollTop
var l = document.body.scrollLeft || document.documentElement.scrollLeft

5.获取鼠标坐标点 x y

var x = event.clientX
var y = event.clientY

6.组合坐标设置div元素样式

box.style.left = (l+x)+"px"
box.style.top = (t+y)+"px"

事件冒泡

1.事件冒泡就是指 事件的向上传导，当其后代事件被触发时，其祖先也会被触发
2. 阻止事件冒泡

event.cancelBubble = true

var box = document.getElementById("box")
			var box1 = document.getElementById("box1")
			box.onclick = function(event){
				event = event || window.event
				alert("这是father")
			}
			box1.onclick = function(event){
				event = event || window.event
				alert("这是son")
				// 阻止事件冒泡
				event.cancelBubble = true
			}

事件的委派

1.获取按钮

var btn = document.getElementById("btn")

2.获取ul

var ul = document.getElementsByTagName("ul")[0]
btn.onclick = function(){

3.创建li

var li = document.createElement("li")

4.给li添加a链接内容

li.innerHTML = "<a href='http://www.baidu.com'>百度<a>"
ul.appendChild(li)
}

5.为每一个li绑定一个单击事件 告诉我要取快递

var a = document.getElementsByTagName("a")
				// for(var i = 0; i < a.length;i++){
				// 	a[i].onclick = function(){
				// 		alert("给我取个快递")
				// 		return false
				// 	}
				// }
				
				ul.onclick = function(event){
					
					event = event || window.event
					console.log(event.target.className)
					return false
					// if(event){}
				}
			}