其他分享
首页 > 其他分享> > day09事件

day09事件

作者:互联网

事件

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

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

事件分类

鼠标事件

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