day09事件

2022-08-13 16:05:06 作者：互联网

事件

是一个流程，一个监听，一个触发

监听过程—触发过程—处理过程（是一个完整的事件）

事件分类

鼠标事件

click单击事件

mouseover鼠标移进(自己及自己里面的都能触发)

mouse enter（只有自己可以触发）

//右键点击（不会触发事件）

box.oncontextmenu=fuction(){
console.log('右键点击')
}

键盘事件（以key开头）

keyup弹起

keydown按下

keypress字符键按下

window.onkeydown = function(){
console.log("键盘按下");
}
window.onkeyup = function(){
console.log("键盘弹起");
}
window.onkeypress = function(){
console.log("字符按下");
}

HTML事件（被动触发）

load 加载事件
unload 卸载
change 修改
blur 失去焦点
focus 获取焦点
input 输入内容
scroll 滚动
submit 提交
reset 重置

select 选择（只有输入框才能触发）

窗口的加载

window.onload=function(){
console.log('窗口加载')
}

window.onunload=function(){
console.log(‘窗口卸载‘)
}

// 获取焦点事件
document.querySelector("input").onfocus = function(){
console.log("获取焦点");
// focus方法可以直接获取焦点
document.querySelector("input:nth-child(2)").focus()
}
// 失去焦点事件
document.querySelector("input").onblur = function(){
console.log("失去焦点");
}
document.querySelector("#context").onselect = function(){
console.log("选择了");
}

`arguments` （所有传递参数他是数组）

是一个对应于传递给函数的参数的类数组对象。

typeof arguments参数返回的是 'object'。

event(事件源)

事件的组成

元素on 事件名=处理函数

处理函数是一个function，具备着一个arguements（参数数组）

document.querySelector("button").onclick = function(e){
e = e || window.event //兼容写法
console.log(e.altKey);
}

位置的相关属性

//event中的属性
//位置属性
console.log(e.x);//当前鼠标离对应的最顶部的距离（不包含滚动栏的距离）不包含不可见距离
console.log(e.y);
console.log(e.clientX);
console.log(e.clientY);
console.log(e.offsetX);//对应在div里面的鼠标位置X
console.log(e.offsetY);//对应在div里面的鼠标位置Y
console.log(e.pageX);//当前鼠标离对应的最顶部的距离（包含滚动栏的距离） 包含不可见距离
console.log(e.pageY);
console.log(e.layerX);//在定位的时候基于自己 不定位的时候基于最顶部距离 包含不可见距离
console.log(e.layerY);
console.log(e.screenX);//离屏幕最坐标的X距离
console.log(e.screenY);//离屏幕最上面的y距离

offsetX 鼠标离当前元素的X距离
offsetY 鼠标离当前元素的Y距离
clientX 鼠标离网页最左的距离 （不包含不可见部分）
clientY 鼠标离网页最顶部的距离 （不包含不可见部分）
pageX 鼠标离网页最左的距离 （包含不可见部分）
pageY 鼠标离网页最顶部的距离 （包含不可见部分）
screenX 鼠标离屏幕最左部的距离
screenY 鼠标离屏幕最顶部的距离

键盘触发的事件

//三个按键是否按下(长按) 先按下再操作 布尔类型的值
console.log(e.ctrlKey); //是否按下ctrl
console.log(e.shiftKey);//是否按下shift
console.log(e.altKey);//是否按下alt

key事件（当前按下的键）

keycode（获取当前按下大写的ascii码）
charcode（字符键press事件ascii码）

button （只针对于点击事件）
左键是0 中间为1 右键为2

键位	码值	键位	码值
0~9（数字键）	48~57	A~Z（字母键）	65~90
Backspace（退格键）	8	Tab（制表键）	9
Enter（回车键）	13	Space（空格键）	32
Left arrow（左箭头键）	37	Top arrow（上箭头键）	38
Right arrow（右箭头键）	39	Down arrow（下箭头键）	40

事件委托

<ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ul>
window.onload = function(){
        var myul = document.getElementById('ul');
        myul.onclick = function(){
            console.log(123)
        }
    }

阻止事件冒泡

1.event.stopPropagation()方法

$('.btn').click(function (even) {

even.stopPropagation();

alert('按钮被点击了'); })

2.event.preventDefault()方法

$('.btn').click(function (even) {
        even.preventDefault();
        alert('按钮被点击了');
    })

3.return false 方法

$('.btn').click(function (even) {
        alert('按钮被点击了');
        return false;
    })

区间拖拽

<div class="box">
<div class="moveBox"></div>
</div>
<script>
//1.获取元素 大盒子和移动的盒子
var box = document.querySelector(".box")
var moveBox = document.querySelector(".moveBox")
//2.给小盒子加鼠标按下事件 记录对应的鼠标在小盒子的位置 记录大盒子的位置
//鼠标在大盒子里面的位置其实就是 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离
（offset家族）
//当前的鼠标在页面上的位置（pageX） - 大盒子离页面的距离(offsetLeft)
//当前的鼠标在页面上的位置（pageY） - 大盒子离页面的距离(offsetTop)
moveBox.onmousedown = function(e){
e = e || window.event
var currentX = e.offsetX //鼠标在小盒子里面的位置
var currentY = e.offsetY
//3.按下事件里面给大盒子添加移动事件
//（得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置 控制对应的移动）
box.onmousemove = function(e){
e = e || window.event
// var targetX = e.offsetX - currentX
// var targetY = e.offsetY - currentY
var targetX = e.pageX - this.offsetLeft - currentX
var targetY = e.pageY - this.offsetTop - currentY
//最大的移动区间就是 父元素的宽度-子元素的宽度
var maxX = this.offsetWidth - moveBox.offsetWidth
var maxY = this.offsetHeight - moveBox.offsetHeight
//边界判断
// 如果当前定位的位置小于0就让他等于0
if(targetX<0){
targetX = 0
}
if(targetY<0){
targetY = 0
}
//如果当前移动的距离大于我们最大的距离就让他等于这个距离
if(targetX>maxX){
targetX = maxX
}
if(targetY>maxY){
targetY = maxY
}
//控制小盒子的位置
moveBox.style.left = targetX + "px"
moveBox.style.top = targetY + "px"
}
//4.取消对应的大盒子的移动事件 以及大盒子的弹起事件
box.onmouseup = function(){
box.onmouseup = box.onmousemove = false
}
}
</script>

鼠标在大盒子里面的位置其实就是 = 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离（offset家族）
移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置
最大的移动区间 = 父元素的宽(高)度 - 子元素的宽(高)度

offsetParent 偏移的父元素（选择离他最近加了定位的父元素）
offsetLeft 左偏移
offsetTop 上偏移
offsetWidth 偏移元素的宽度
offsetHeight 偏移元素的高度

标签：function,day09,console,鼠标,距离,事件,log
来源： https://www.cnblogs.com/zzy911/p/16583202.html