js事件上

事件上

事件概述:

用户在浏览器上触发一个操作 浏览器会执行相关的函数进行处理,称为事件

例如:用户点击注册按钮,浏览器会完成注册操作

事件的两种模式

• 内联模式

• 脚本模式

  <!-- 内联模式 -->
  <button onclick="alert(123)">123</button>
  <!-- 脚本模式 -->
  <button onclick="handleClick()">123</button>
  <script>
  function handleClick() {
  alert(123)
  }
  

事件划分

事件的执行者 元素

事件名 on开头 + 对应的名字

事件处理函数 function

//执行者 事件名
document.onclick = function(){
    //处理函数
}

事件的分类

鼠标事件(mouse)

点击事件

onclick

ondblclick

onmousedowm

onmouseup

移进

onmouseenter(子元素不会触发)

onmouseover(子元素也会触发)

移出

mouseleave(子元素不会触发)

mouseout (子元素也会触发)

移动

mousemove

键盘事件(key)

onkeyup 弹起

onkeydown 按下

onkeypress (字符键才触发 按下)

window.onkeydown = function(){
	console.log('键盘按下')
}
window.onkeyup = function(){
    console.log('键盘弹起')
}
//字符键触发 只有按字符的时候才能触发  tab ctrl
window.onkeypress = function(){
    console.log('字符按下')
}

html事件

• load 加载事件

• unload 卸载

• select 选择

• change 修改

• blur 失去焦点

• focus 获取焦点

• input 输入内容

• scroll 滚动

• submit 提交

• reset 重置

<form action="" style="height: 1000px;">
    <input type="text">
        <input type="text" class="con">
            </form>
<script>
            window.onload = function() {
            console.log('加载');
        }
window.onunload = function() {
    console.log('卸载');
}
//html元素的一些事件
//表单元素
//获取事件焦点
document.querySelector('input').onfocus = function() {
    console.log('获取焦点');
    //focus方法可以直接获取焦点
    document.querySelector('input:nth-child(2)').focus()
}
//失去焦点事件
document.querySelector('input').onblur = function() {
    console.log('失去焦点');
}
document.querySelector('.con').onselect = function() {
    console.log('选择');
}
//修改数据  失去焦点
document.querySelector('input:nth-child(2)').onchange = function() {
    console.log('数据修改了');
}
//vue 双向绑定原理实现
document.querySelector('input:nth-child(2)').oninput = function() {
    console.log('输入数据');
}
//表单元素  form
document.querySelector('form').onsubmit = function() {
    console.log('数据提交了');
}
//重置元素  form
document.querySelector('form').onresert = function() {
    console.log('数据重置了');
}
//scroll 滚动栏 滚动事件  任何具备滚动栏都可以添加
window.onscroll = function() {
    console.log('滚动了');

}
setTimeout(function() {
    //操作滚动栏滚动 x轴  y轴
    window.scrollTo(0, 0)
}, 1000)
</script>

所有的函数都具备一个参数arguments(所有传递参数 他是数组)

处理函数也同样是函数 同样存在这个arguments

通过我们的比对发现这个arguments里面只有一个参数,这个参数是一个event对象(事件源对象)

由于我们的arguments[0]或者对应的arguments数组里面的第一个参数(第一个形参 所有我们可以在对应的处理函数中直接声明一个形参来接收我们arguments里面的数据)

document.querySelector('button').onclick = function(e){
//e其实就是我们对应的arguments[0] 所以这个e就是我们的event对象
//建议形参写为e或event
//兼容写法
e = e || window.event
 console.log(e.altKey)
}

event 事件源对象(window里面的)

event中的属性

//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距离

位置相关属性(event中的属性)

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

三个按键是否按下(长按) 先按下再操作 布尔类型的值

ctrlKey altKey shiftKey

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

button (只针对于点击事件)

左键为0 中间为1 右键为2

type 事件触发类型

target 当前触发事件的对象

currentTarget 当前加事件的对象

键盘的输入的相关属性

key 获取对应的按下的键

keyCode 获取按下的键的ascii码

charCode 获取keypress 事件中按键的ascii码

window.onkeydown = function(e){
    //兼容ie
    e = e || window.event
    //key 获取对应的按下的键
    console.log(e.key)//兼容问题
    //keyCode  获取对应按下键的ascii码
    console.log(e.keyCode) //不管是大写还是小写获取的都是大写的ascii码
}
//只支持字符
window.onkeypress = function(e){
    console.log(e.keyCode)
    //将ascii码转为对应的字符串
    console.log(String.fromCharCode(e.keyCode))
    //只在onkeypress 里面才有用 也返回ascii码
    console.log(e.charCode)
    
}

事件委托机制

将原来元素需要做的事情 交给他的父元素

1.加事件给对应的父元素

2.在父元素的事件中进行判读e.target

//事件委托  (里面有多个相同的元素需要同样的事件)
//获取父元素 利用的父元素的事件及对应的e.target进行判断  当前你操作的元素是哪一个
document.querySelector('ul').onclick = function(e){
    e = e || window.event
    //获取当前操作的元素  li
 	if(e.target.nodeName == 'LI'){
    	for(var j = 0;j<this.children.length;j++){
            this.children[j].style.backgroundColor = ''
        }
        e.target.style.backgroundColor = 'red'
	}
}