关于 当鼠标移动时获取所在坐标点 onscroll div跟着鼠标移动 事件冒泡 事件的委派

当鼠标移动时获取所在坐标点

事件对象

//获取div
var are=document.getElementById("are")
var showMsg=document.getElentById("showMag")
//鼠标移动事件
are.onmousemove=function(event){
console.log(event)
//兼容浏览器
event=event||window.event
var x=event.clientX
var y=event.clientY
showMsg.innerHTML="x:"+x+"y:"+y
}

onscroll

当页面滚动到底部时，将input框设置为disabled = false

// 获取p标签 对象
var info = document.getElementById("info")
// 获取input标签 数组
var input = document.getElementsByTagName("input")
console.log(info,input)
// 为info绑定一个滚动事件
info.onscroll = function(){
     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跟着鼠标移动

// 获取div盒子
var box = document.getElementById("box")
// 注册鼠标移动事件
document.onmousemove = function(event){
   // 兼容浏览器
	event  = event || window.event
   // 获取鼠标滚动的距离
	/* 
	谷歌认为 body
	火狐认为 html
	 */
// 获取鼠标垂直 水平滚动的距离
var t = document.body.scrollTop || document.documentElement.scrollTop
var l = document.body.scrollLeft || document.documentElement.scrollLeft
// 获取鼠标坐标点 x y
var x = event.clientX
var y = event.clientY
// 组合坐标设置div元素样式
box.style.left = (l+x)+"px"
box.style.top = (t+y)+"px"

事件冒泡

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

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
}

事件的委派

window.onload = function(){
// 获取按钮
var btn = document.getElementById("btn")
// 获取ul
var ul = document.getElementsByTagName("ul")[0]
btn.onclick = function(){
// 创建li
var li = document.createElement("li")
// 给li添加a链接内容
li.innerHTML = "<a href='http://www.baidu.com'>百度<a>"
ul.appendChild(li)
}
// 为每一个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
   }
 }