01当鼠标移动时获取所在位置
<
style>
#are{
width: 300px;
height: 50px;
border: 1px solid #0000FF;
margin-bottom:10px;
}
#showMsg{
width: 300px;
height: 20px;
border: 1px solid #FF00FF;
}
</style>
</head>
<body>
<div id="are"></div>
<div id="showMsg"></div>
<!--
事件对象
-->
<script type="text/javascript">
// 获取div
var are = document.getElementById("are")
var showMsg = document.getElementById("showMsg")
// 鼠标移动事件
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
}
</script>
02onscroll
<style type="text/css">
#info{
width: 500px;
height: 500px;
background: #00FF00;
overflow: auto;
}
</style>
</head>
<body>
<h1>欢迎进行用户信息注册</h1>
<p id="info">
请输入您要注册的信息O(∩_∩)O哈哈~
</p>
<input type="text" disabled>
<input type="submit" disabled>
<script type="text/javascript">
/*
当页面滚动到底部时，将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(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
}
}
</script>
03div跟随鼠标动
<style type="text/css">
#box{
width: 50px;
height: 50px;
background-color: palegreen;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body style="width: 1000px;height:2000px">
<div id="box"></div>
<script type="text/javascript">
// 获取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"
}
</script>
04事件冒泡
#box1{
width: 50px;
height: 50px;
background-color: greenyellow;
}
#box{
width: 150px;
height: 150px;
background-color: deeppink;
}
</style>
</head>
<body>
<!--
事件冒泡就是指 事件的向上传导，当其后代事件被触发时，其祖先也会被触发
-->
<div id="box">
<div id="box1"></div>
</div>
<script type="text/javascript">
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
}
</script>
05事件委派
<script type="text/javascript">
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
// if(event){}
}
}
</script>
<button id="btn">按钮</button>
<ul>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
</ul>
</body>
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
