dom事件11-26

最新推荐文章于 2022-07-26 15:56:04 发布

weixin_51958527

最新推荐文章于 2022-07-26 15:56:04 发布

阅读量68

点赞数

分类专栏： javascript dom 文章标签： js

本文链接：https://blog.csdn.net/weixin_51958527/article/details/110161081

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

dom

5 篇文章 0 订阅

订阅专栏

鼠标移动获取所在坐标点

          window.onload = function(){
				var btn01 = document.getElementById("btn01")
				var dv1 = document.getElementById("dv1")
				
				btn01.onclick = function(){
					// 获取当前元素水平方向的滚动区域
					var left = dv1.scrollLeft
					// 获取当前元素垂直方向的滚动区域
					var top = dv1.scrollTop
					console.log(top,left)
					
				}
				
				var left = dv1.scrollLeft
				var top = dv1.scrollTop
				console.log(top,left)
			}

onscroll

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

div跟鼠标移动

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

冒泡事件

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

事件的委派

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

weixin_51958527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom事件11-26

onscroll <input type="text" disabled> <input type="submit" disabled> <script type="text/javascript"> // 当页面滚动到底部时，将input框设置为disabled = false // 获取p标签对象 var info = document.getElementById("info") // 获取input标签数组
复制链接

扫一扫

专栏目录