鼠标事件
<style>
body{
margin: 0;
}
.div0
{
width:100px;
height:100px;
position: relative;
left:100px;
top:800px;
/* margin: 100px; */
}
.div1
{
width: 50px;
height: 50px;
position: absolute;
left:50px;
top:50px;
/* margin: 50px; */
}
.span0
{
display: none;
position: absolute;
padding: 0px 5px;
border-radius: 50px;
font-size: 12px;
z-index: 999;
}
</style>
<span class="span0">aaaaa</span>
<div class="div0">
<div class="div1"></div>
</div>
<script>
/* clientX: 33 距离可视区域左上角位置
clientY: 31
layerX: 28 如果目标对象是定位方式，值于offset相似
layerY: 20 如果目标对象是非定位方式，
// 取父容器的左上角位置，如果父容器未定位，继续向上取
offsetX: 16 相对事件目标对象的左上角位置
offsetY: 9
movementX: 0 仅用于mousemove事件 这个值是鼠标移动时相对上次获取坐标的距离
movementY: 0
pageX: 28 相对页面顶端左上角位置
pageY: 25
screenX: 38 相对屏幕左上角位置
screenY: 107
x: 32 和clientX，clientY相同
y: 33
按下键点击鼠标时变为true
altKey: false
ctrlKey: false
metaKey: false
shiftKey: false
针对mousedown事件的属性，判断按下的键
左键 中键 右键
button: 0 1 2
buttons: 0 4 2
which: 1 2 3
*/
var div=document.querySelector(".div0");
// div.addEventListener("mousedown",clickHandler);
// div.addEventListener("mouseup",clickHandler);
// div.addEventListener("click",clickHandler);
// div.addEventListener("mouseover",clickHandler);
// div.addEventListener("mouseout",clickHandler);
// div.addEventListener("mouseenter",clickHandler);
// div.addEventListener("mouseleave",clickHandler);
// mouseover mouseout具有冒泡功能可以收到鼠标滑入滑出子元素的冒泡事件
// mouseenter mouseleave仅对侦听的对象起到事件接收作用
// div.addEventListener("mousemove",mouseHandler);
// div.addEventListener("mouseover",mouseHandler);
// div.addEventListener("mouseout",mouseHandler);
div.addEventListener("contextmenu",mouseHandler);
// var span0=document.querySelector(".span0");
function clickHandler(e){
console.log(e.type);
// console.log(e.clientX,e.clientY)
}
/* function abc(){
console.log(e.clientX,e.clientY);
} */
/*
click 点击左键
dblclick 双击左键
mousedown 按下键
mouseup 释放键
mouseover 滑过
mouseout 滑出
mouseenter 进入
mouseleave 离开
mousemove 移动
contextmenu 右键菜单
*/
function mouseHandler(e){
e.preventDefault();
console.log(e);
/* switch(e.type){
case "mouseout":
span0.style.display="none";
break;
case "mouseover":
span0.style.display="inline-block";
case "mousemove":
span0.textContent="这是"+getComputedStyle(e.target).backgroundColor+"颜色";
span0.style.left=e.pageX+"px";
span0.style.top=e.pageY+"px";
break;
} */
}
// tooltip
</script>
拖拽
var Utils=(function(){
/*
拖拽方法
拖拽元素
参数:
elem：被拖拽的HTML标签DOM元素 HTMLElement
parentOut:是否不允许拖拽到容器外
类型 Boolean：true 不允许拖拽到父容器外
false 允许拖拽到父容器外
Object 示例：{width:Number,height:Number};
width和height限制拖拽的范围
如果为0，该方向不能拖拽
返回：无
1、完成拖拽的起始侦听事件，当侦听在元素上按下mousedown事件时
执行当前对象的函数mousedownHandler
2、将当前对象存储在这个元素的obj属性中，用于在后面按下时调用
到当前对象
3、设置这个元素的定位为绝对定位
4、设置document对象的属性是当前带入参数是否不允许拖拽到容器外这个值
用来在后续中判断该元素是否允许拖拽脱离当前容器
*/
dragElem:function(elem,parentOut){
elem.obj=this;
elem.style.position="absolute";
document.parentOut=parentOut;
elem.addEventListener("mousedown",this.mousedownHandler);
},
/*
鼠标按下键和鼠标移动，释放的事件函数
参数：
e MouseEvent 鼠标对象 由鼠标事件自动创建该参数
1、鼠标按下时
鼠标按下时 this,e.currentTarget 针对标签元素 this->按下的标签元素
1、取消默认事件行为，可以解决拖拽时产生禁止拖拽图标
2、将当前按下鼠标左键相对元素左上角的坐标存储在document的对象属性X和y上
用于后面调用时使用
3、将当前this，也就是按下的元素存储在document对象属性div中
4、将当前Utils这个对象存在document对象属性obj中，用于后面的调用
5、针对document侦听鼠标移动和释放事件，执行的函数是Utils对象，这个对象存在this.obj
也就是按下元素的obj属性
2、鼠标移动时
this，因为鼠标是侦听document上移动的事件，所以，this是document
1、获取当前按下元素的父元素，this.div就是document.div,这个在按下时做了存储
并且求出它的父元素的范围矩形，这个返回矩形包括父元素的相对可视窗口的坐标和父元素宽高
2、计算出x，y是当前鼠标移动位置相对当前元素父元素的左上角位置
3、判断 parentOut传入参数属性是不是允许拖拽到父元素外，如果是true，不允许拖拽到父元素外
如果是对象就需要设置拖拽的范围
如果是true，拖拽时禁止x和y小于0，限制右侧和下侧不出容器
如果时对象，限制不出对象宽高的范围，
4、设置这个元素的位置是调整过后坐标
3、鼠标释放时
删除document上所有的mousemove事件和mouseup事件
*/
mousedownHandler:function(e){
// 1、事件函数中的this会覆盖普通对象中函数this的指向
// 2、事件函数中，针对e.type事件类型所有对应的事件侦听对象才是this
if(e.type==="mousedown"){
e.preventDefault();
document.x=e.offsetX;
document.y=e.offsetY;
document.div=this;
document.obj=this.obj;
document.addEventListener("mousemove",this.obj.mousedownHandler)
document.addEventListener("mouseup",this.obj.mousedownHandler)
}else if(e.type==="mousemove"){
var left,top;
var rect=this.div.parentElement.getBoundingClientRect();
var x=e.clientX-this.x-rect.x;
var y=e.clientY-this.y-rect.y;
if(this.parentOut===true){
if(x<0) x=0;
if(x>=rect.width-this.div.offsetWidth)x=rect.width-this.div.offsetWidth;
if(y<0) y=0;
if(y>=rect.height-this.div.offsetHeight) y=rect.height-this.div.offsetHeight;
}else if(typeof this.parentOut==="object"){
if(x<0) x=0;
if(x>=this.parentOut.width-this.div.offsetWidth)x=this.parentOut.width-this.div.offsetWidth;
if(y<0) y=0;
if(y>=this.parentOut.height-this.div.offsetHeight) y=this.parentOut.height-this.div.offsetHeight;
if(this.parentOut.width===0) x=0;
if(this.parentOut.height===0) y=0;
}
this.div.style.left=x+"px";
this.div.style.top=y+"px";
}else{
document.removeEventListener("mousemove",this.obj.mousedownHandler)
document.removeEventListener("mouseup",this.obj.mousedownHandler)
}
},
dragOff:function(elem){
elem.obj=null;
document.obj=null;
elem.removeEventListener("mousedown",this.mousedownHandler);
}
}
})();
焦距和Input事件
<input type="text" id="input0" placeholder="用户名">
<input type="text" id="input1">
<script>
/*
FocusEvent 焦距事件
focus 汇聚焦距
blur 失去焦距
所有的表单元素，例如文本框
超链接
focus汇聚焦距的方式有点击，tab切换
*/
var input0=document.querySelector("#input0");
var input1=document.querySelector("#input1");
input0.addEventListener("focus",focusHandler);
input1.addEventListener("focus",focusHandler);
input1.addEventListener("blur",focusHandler);
function focusHandler(e){
console.log(e);
// e.relatedTarget 上次汇聚焦距的元素
}
// inputEvent input事件
var input0=document.querySelector("#input0");
input0.addEventListener("input",inputHandler);
function inputHandler(e){
console.log(e);
/* e.data: "o" 输入的内容
e.inputType: "insertText" 输入的类型 insertCompositionText
包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
e.isComposing: true 是否是输入法文本
*/
if(!isNaN(e.data)) input0.value=input0.value.replace(e.data,"");
}
// 节流
var input0=document.querySelector("#input0");//拿到input0这个标签
var ids;//定义一个ids计数器
input0.addEventListener("input",inputHandler);//给input标签加一个事件监听
function inputHandler(e){//当input事件发生时，执行这个函数
if(ids!==undefined) return;//当ids有值时，即setTimeout创建后ids计数器有值，此时直接return
ids=setTimeout(function(){//如果未赋值，创建一个setTimeout
clearTimeout(ids);//首先清除ids计数器
ids=undefined;
console.log(input0.value);//打印此次节流500ms后的input的值
},500);
}
</script>
阻止默认事件
<style>
div
{
width: 100px;
height: 100px;
}
</style>
<form action="#">
<input type="text" name="user">
<input type="password" name="pass">
<input type="submit">
<input type="reset">
</form>
<div>askjdjksad</div>
<img src="./img/1.png">
<script>
// 1、表单事件中的submit reset 使用阻止默认事件可以取消提交和重置
/* var form=document.querySelector("form");
form.addEventListener("submit",formHandler);
form.addEventListener("reset",formHandler);
function formHandler(e){
e.preventDefault();
} */
// 2、当使用contextmenu事件，取消鼠标右键菜单
/* document.addEventListener("contextmenu",mouseHandler);
function mouseHandler(e){
e.preventDefault();
} */
// 3、当针对元素拖拽时，元素内有文本，文本会被选中
/* var div=document.querySelector("div");
document.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
} */
// 4、图片拖拽时产生禁止拖拽图标
/* var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
} */
</script>
按键事件
<style>
textarea
{
width: 800px;
height: 400px;
}
input
{
width: 600px;
}
div
{
width: 500px;
height: 400px;
border:1px solid #000000;
word-wrap: break-word;
}
</style>
<!-- <textarea id="texts"></textarea><br>
<input type="text" id="msg">
<button>提交</button> -->
<div></div>
<script>
/*
e.code: "KeyA"
e.key: "a"
e.keyCode: 65
e.which: 65 */
document.addEventListener("keydown",keyHandler);
function keyHandler(e){
console.log(e);
}
var texts,msg,bn
init();
function init(){
texts=document.querySelector("#texts");
msg=document.querySelector("#msg");
bn=document.querySelector("button");
bn.addEventListener("click",clickHandler);
document.addEventListener("keydown",clickHandler);
}
function clickHandler(e){
if(e.type!=="click" && e.type!=="keydown") return;
if(e.keyCode && e.keyCode!==13) return
if(msg.value.trim().length<1) return;
texts.value+=msg.value+"\n";
msg.value="";
}
// 富文本编辑器
var div=document.querySelector("div");
document.addEventListener("keydown",keyHandler);
// document.addEventListener("keyup",keyHandler);
function keyHandler(e){
if(e.keyCode<48 || e.keyCode>57 && e.keyCode<65 || e.keyCode>90) return;
div.innerHTML+=e.key;
}
</script>
人物走路案例
var actor,code;
var bool=false,
dic="",
time=0,
speed=1,
num=0,
x=0,
y=0;
init();
function init(){
actor=createActor();
document.addEventListener("keydown",keyHandler);
document.addEventListener("keyup",keyHandler);
setInterval(animation,16);
}
function createActor(){
var actor=document.createElement("div");
Object.assign(actor.style,{
width:"32px",
height:"32px",
position:"absolute",
left:0,
top:0,
backgroundImage:'url(./img/Actor01-Braver03.png)',
});
document.body.appendChild(actor);
return actor;
}
// 37,38,39,40
function keyHandler(e){
bool=e.type==="keydown";
code=e.keyCode;
if(e.type==="keyup"){
actor.style.backgroundPositionX="0px";
time=0;
}
}
function animation(){
if(!bool) return;
actorMove();
actorAction();
}
function actorAction(){
if(code<37 || code>40) return;
time--;
if(time>0)return;
time=15;
actor.style.backgroundPositionX=num++%4*-32+"px"
}
function actorMove(){
switch(code){
case 37:
if(dic!=="left"){
actor.style.backgroundPositionY="-33px";
dic="left"
}
x-=speed;
break;
case 38:
if(dic!=="top"){
actor.style.backgroundPositionY="-99px";
dic="top"
}
y-=speed;
break;
case 39:
if(dic!=="right"){
actor.style.backgroundPositionY="-66px";
dic="right"
}
x+=speed;
break;
case 40:
if(dic!=="bottom"){
actor.style.backgroundPositionY="0px";
dic="bottom"
}
y+=speed;
break;
}
actor.style.left=x+"px";
actor.style.top=y+"px";
}
滚轮事件
/* 向上
google和IE
deltaX: -0
deltaY: -100
deltaZ: 0
detail: 0
wheelDelta: 120
wheelDeltaX: 0
wheelDeltaY: 120
火狐
e.detail: -3
*/
var speed=0;
window.addEventListener("mousewheel",wheelHandler);
window.addEventListener("DOMMouseScroll",wheelHandler)
function wheelHandler(e){
if(e.type==="mousewheel"){
speed=e.deltaY<0 ? -10 : 10;
}else if(e.type==="DOMMouseScroll"){
speed=e.detail<0 ? -10 : 10;
}
console.log(speed);
}
