day09事件

2022-08-13 16:05:06 阅读：173 来源： 互联网

标签：function day09 console 鼠标距离事件 log

事件

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

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

事件分类

鼠标事件

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9