滚动事件

最新推荐文章于 2023-09-17 16:47:53 发布

w0012236948

最新推荐文章于 2023-09-17 16:47:53 发布

阅读量438

点赞数

本文链接：https://blog.csdn.net/w0012236948/article/details/110219939

版权

1.滚动事件

当页面滚动到底部时,将input框设置为disabled = false
为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
			}

2.div跟随鼠标移动

#box{
	width: 50px;
	height: 50px;
	background-color: palegreen;
	position: absolute;
	left: 0;
	top: 0;
	}

<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>
	</body>

3.事件冒泡

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

#box1{
				width: 50px;
				height: 50px;
				background-color: greenyellow;
			}
			#box{
				width: 150px;
				height: 150px;
				background-color: deeppink;
			}

<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
			}

4.事件委托

<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")
				ul.onclick = function(event){
					event = event || window.event
					if(event.target.className){
						alert("dan ji shi jian")
					}
					return false
				}
			}
		</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>

w0012236948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动事件

1.滚动事件当页面滚动到底部时,将input框设置为disabled = false为info绑定一个滚动事件info.onscroll = function(){ console.log("scrollHeight"+info.scrollHeight) console.log("scrollTop"+info.scrollTop) console.log("clientHeight"+info.clientHeight) if(info.scrollHeight - info.sc
复制链接

扫一扫