(九)Javascript事件分类(含JS实现固定定位)

最新推荐文章于 2022-03-26 17:00:03 发布

Seeker-Joseph

最新推荐文章于 2022-03-26 17:00:03 发布

阅读量787

点赞数 1

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51458883/article/details/115257155

版权

JS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

(九)事件分类

鼠标事件

click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave

查看鼠标各个点的坐标
- 注意，这里的前缀是document

 <body>
    <div style="width:100px;height: 100px;background-color:red;position:absolute;
    left:0;top:0;"></div>
    <script type="text/javascript">
      var div = document.getElementsByTagName('div')[0];
      document.onmousemove = function (e) {
        var event = e || window.event;
        // 写事件对象的兼容
        console.log(e.pageX + " " + e.pageY)

      }

    </script>
  </body>

实现鼠标按下去后时，方块一起动


var drag = function(){
    var disX;
	var disY;

div.onmousedown = function(e){
    disX = e.pageX - parseInt(div.style.left);
    disY = e.pageY - parseInt(div.style.top);
	div.onmousemove = function (e) {
        var event = e || window.event;
        console.log(e.pageX + " " + e.pageY);
        div.style.left = e.pageX - disX + "px";
        div.style.top = e.pageY -disY + "px";
      }
  	div.onmouseup = function (){
        div.onmousemove = null;
    }   
 }
}

//注意第6、9行div改为document的区别

后面四个中前面两个和后面两个功能同(类似hover)

注意:通过事件捕获解决鼠标在方块外不移的过程

用button来区分鼠标的按键，0/1/2

document.onmousedown = functionn (e){
	var event = e || window.event;
	console.log(e);
}
//查看事件对象中的button，左键是0中建是1右键是2

DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

如何解决mousedown和click的冲突

对于一个a标签，实现具有拖拽功能，单点击的时候才跳转
关键:利用时间差
需要记住的点是系统会先执行mousedown-up再执行click

 <body>
    <div style="width:100px;height: 100px;background-color:red;position:absolute;
    left:0;top:0;"></div>
    <script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
    var firstTime = 0;
	var lastTime = 0;
	var key = false;

	document.onmousedown = function(e){
        firstTime = new Date().getTime();
        drag();
    }
	document.onmouseup = function(){
        lastTime = new Date().getTime();
        if(lastTime - firstTime > 300){
            key = true;
        }
    }
	document.onclick = function (){
        if(key) {
            console.log('click');
            key = false ;
        }
    }
    </script>
</body>

在移动端中,mouse不好使，用touchstart-move-end

键盘事件

keydown keyup keypress

keydown > keypress > keyup(连续按不太起来，up是不会出现的)
keydown 和keypress的区别
- keydown 可以响应任意键盘按键，keypress只可以响应字符类键盘按键
- keypress返回ASCII码，可以转换成相应字符,查看事件对象中的charCode

document.onkeydown = function(e){
	console.log(e);
	//获取操作类的数值用keydown，比如上下左右
    //他的which对应的是按键
}
document.onkeypress = function(e){
	console.log(e);
    //一般相区分大小写，获得数值类的用keypress
}

返回按的按键

document.onkeypress = function(e){
	console.log(String.fromCharCode(e.charCode));
	//这是String上的静态方法,可转换ASCII码
}

文本操作事件(含输入框的实现)

input,focus,blur(移出鼠标点外面才触发),change(比较输入框获得失去焦点前后里面内容是否变化，发生改变才触发)

<body>
<input type="text" style="border:1px solid red ; ">

<script>
	var input = document.getElementsByTagName('input')[0];
	input.oninput = function (e){
		console.log(this.value);
	}
//输入一次触发一次，只要里面内容有变化就会触发里面事件

</scricpt>
</body>

实现一般页面中输入框的实现

用类名来实现样式的转变

 <style>
      input {
        border: 1px red solid;
      }
      .out {
        color: #999;
      }
      .in {
        color: #404040;
      }
    </style>
  </head>
  <body>
    <input
      class="out"
      type="text"
      value="请输入用户名"
      onfocus="if(this.value =='请输入用户名'){
        this.value = ''; this.className = 'in' }"
      onblur="if(this.value == ''){this.value = '请输入用户名';this.className = 'out'} "
    />
  </body>

窗体操作类(window上的事件)

scroll

滚动条滚动即可触发事件

window.onscroll = function (){
	console.log(window.pageXOffset + " " + window.pageYOffset)
}

load

当读到 javascript 标签会阻断页面

<script>
    var div = document.getElementsByTagName('div')[0];
</script>.;
<div></div>
/* 因为代码是一行一行执行的，所以这时候读不到div */

<script>
    window.onload = function(){
    	    var div = document.getElementsByTagName('div')[0];
}
</script>.;
<div></div>
/* 这时候可以读到 */

这个方法是最慢的，而且没有什么意义。
HTML和CSS是并行一起可以解析的，HTML在解析时会形成domTree，css会形成cssTree，会在系统的内部画一个树形图
- 比如当代码一行一行执行的时候，遇到了一个img 元素节点。系统读到它的时候确认它是img标签就会直接挂到树上==(dom结点的解析)==，所以一般先解析，解析完之后开启一个线程，异步地去下载这个图片文件

/* 现在body中有 */
<div>
	<span></span>
	<strong></strong>
</div>

/* 树形结构大致如下
		document
		html
	head	body
    		div
    	strong  span
 */

javascript 放在文档最后面的原因：前面的各个节点都已经解析完了，javascript可以直接操作他们了，没必要等那些图片下载完
load：当使用这个，需要等整个文档解析完之后，CSS的渲染renderTree构建完之后，各种信息文件图片下载完之后，这时候才开始执行。window如果触发load事件就是等待以上过程完成之后才开始执行。

Js实现固定定位

小练习:fixed定位 js兼容版(fixed在IE6以下不兼容)
- 根据window.scroll每次滚动都会触发函数的原理
- 给元素设置绝对定位，div.style.top=自己想相对顶部的距离(len) + 滚动条滚动的距离(window.pageYOffset)

<!DOCTYPE html>
<html>
<head>
	<title>fixed</title>
	<style type="text/css">
		body{
			height: 5000px;
		}
		div{
			position: absolute;
			top: 300px;
			left: 0;
			right: 0;
			margin: 0 auto;

			width: 50px;
			height: 400px;

			background: #bfa;
		}
	</style>
</head>
<body>
	<div></div>

	<script type="text/javascript">
		var div = document.getElementsByTagName('div')[0];
		var lenOfTop = parseInt(div.getBoundingClientRect().top)
		window.onscroll = function () {
			div.style.top = lenOfTop + parseInt(window.pageYOffset) + "px";
		}


	</script>
</body>
</html>

Seeker-Joseph

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
(九)Javascript事件分类(含JS实现固定定位)

(九)事件分类目录(九)事件分类鼠标事件键盘事件keydown keyup keypress文本操作事件(含输入框的实现)==实现一般页面中输入框的实现==窗体操作类(window上的事件)scroll==load==Js实现固定定位鼠标事件click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave查看鼠标各个点的坐标注意，这里的前缀是document <body
复制链接

扫一扫