事件上

事件

概述:事件是一个异步机制,从 执行 -- 观察 -- 处理函数 这个过程称之为事件

组成

事件名 执行对象 处理函数 观察者

示例

<button>点击</button>
var btn = querySelector('button')
btn.onclick = function(){
    cinsole.log('点击了')
}

事件名 click

执行对象 button

处理函数 自定义函数

观察者 js引擎

在js里书写的事件 它观察者都是事件引擎.而我们关注的点只要是前面的三个内容

事件的声明

1.内联模式

<!-- 内联模式就是在标签里面书写对应的代码 -->
<button onclick = 'alert('你好')'>看这里,点我</button>

2.脚本模式

var btn = document.getElementsByTagName('button')[0]
//执行对象.on + 事件名 = 处理函数
btn.onclick = function(){
    console.log('你好')
}
function handler(){
    console.log('处理函数执行了')
}
btn.onclick = handler

内联模式和脚本模式的区别

  1. 内联模式里面的函数需要手动调用,而对应的脚本模式的处理函数自动调用

  2. 内联模式里面的函数调用的this指向window对应的脚本模式里面的处理函数的this指向当前的调用者

事件的事件名

鼠标事件 (鼠标触发的mouse)

  • click 单击事件

  • dblclick 双击事件

  • mousedown 按下

  • mouseup 弹起

  • mouseenter 移入

  • mouseleave 移出

  • mouseover 移入 //包括子元素

  • mouseout 移出 //包括子元素

  • mousemove 移动

  • contextmenu 右键点击

注意事项

  • click和对应mousedown和mouseup的执行顺序 (mousedown -- mouseup -- click)

  • mouseenter(mouseleave)和mouseover(mouseout)的区别 (mouseenter 子元素不会触发mouseover子元素会触发)

<div>快点我</div>
<script>
    //获取div
    var btn = document.querySelector('div')
    //单击事件
    btn.onclick = function(){
        console.log('单击事件执行了')
    }
    //双击事件 双击事件必定触发单击事件
    btn.ondblclick = function(){
        console.log('双击事件执行了')
    }
    //鼠标按下 注意:执行顺序 按下 -- 弹起 -- 单击
    btn.onmousedown = function(){
        console.log('按下事件执行了')
    }
    //鼠标弹起
    btn.onmouseup = function(){
        console.log('弹起事件触发了')
    }
    //鼠标移进 注意:enter和leave 进入子元素不会触发
    btn.onmouseseenter = function(){
        console.log('鼠标移进了')
    }
    //鼠标移出
    btn.onmouseleave = function(){
        console.log('鼠标移出了')
    }
    //鼠标移进 注意:over和out 进入子元素也会触发
    btn.onmouseover = function(){
        console.log('鼠标over移进了')
    }
    //鼠标移出
    btn.onmouseout = function(){
        console.log('鼠标out移出了')
    }
    //鼠标移动了
    btn.onmousemove = function(){
        console.log('鼠标移动了')
    }
    //鼠标点击右键 注意:点击事件不会触发
    div.oncontextmenu = function(){
        console.log('右键点击了')
    }
</script>

键盘事件 (键盘触发的key)

keydown 按下

keyuo 弹起

keypress 字符串 //除功能键的其它键

<input type = 'text'>
<script>
    //获取输入框
    var input = document.querySelector('input')
    //键盘事件
    input.inkeydown = function(){
        console.log('键盘按下');
    }
    //在input弹起会出现两次
    input.onkeyup = function(){
        console.log('键盘弹起');
    }
    //在字符键按下 (除了功能键)
    input.onkeypress = function(){
        console.log('字符键按下');
    }
    window.onkeypress = function(){
        console.log('在window上触发了keypress事件')
    }
</script>
//注意事项
//执行顺序 keydown - keypress - keyup
//keypress一定会触发keydown

HTML事件(HTML中自带的一些事件(只能用于专门HTML))

window的事件

  • 加载事件(load)

  • 卸载事件(unload)

  • 关闭窗口的事件(onclose)

  • 打印之前调用的事件(onbeforeprint)

  • 卸载之前调用的事件(onbeforeunload)

  • 滚动栏发生变化的事件(onscroll)

//加载事件
window.onload = function(){
    console.log('hello');
}
//卸载事件(刷新)
window.onunload = function(){
    console.log('卸载')
}
//关闭窗口事件 (清除相关缓存和对应的资源操作)
window.onclose = function(){
    console.log('关闭')
}
//打印之前调用 调用print方法之前 更改打印的然后继续打印
window.onbeforeprint = function(){
    console.log('打印了')
}
//在卸载之前调用 将一些内容回收
window.onbeforeunload = function(){
    console.log('卸载之前')
}
//滚动栏滚动
window.onscroll = function(){
    console.log('滚动栏位置发生变化')
}
//加载事件的其他使用
var image = new Image()//构建一个图片对象
image.onload = function(){//如果图片加载好了
    image.src = '图片地址' //给图片设置对应的src地址
}
//onscroll的其他使用
document.querySelector('div').onscrll = function(){
    console.log('div的滚动栏滚动了')
}

表单事件

  • submit表单提交事件

  • reset表单重置事件

  • select 内容被选中 (只针对输入框和文本域)

  • change表单的value值发生变化

  • input可输入的表单标签里面进行输入

  • blur失去焦点

  • focus获取焦点

//表单事件
//加给整个form表单事件
documnet.forms[0].onsubmit = function(){
    console.log('提交了');
}
documnet.forms[0].onreset = function(){
    console.log('重置了')
}
//change value值发生变化 失去焦点
document.querySelector('input').onchange = function(){
    console.log('值变化了');
}
//input输入对应的值的时候调用
document.querySelector('input').oninput = function(){
    console.log('输入值');
}
//select 选择里面的内容
document.querySelector('input').onselecr = function(){
    console.log('选择值了');
}
//失去焦点
document.querySelector('input').onfocus = function(){
      console.log('失去焦点')
}
//聚焦
document.querySelector('input').onfocus = function(){
    console.log('获取焦点')
}

相关聚焦和失焦的方法

focus聚焦的方法

blur失焦的方法

//element也具备 focus() blur()
document.querySelector('input').focus()
setTimeout(function(){
document.querySelector('input').blur()
},3000)

event事件源对象

概述

event被称为事件源对象,它是一个全局的内置对象(属于window),它里面包含了一些关于事件执行的相关属性

处理函数中Arguments

处理函数也是一个函数，函数就具备一个arguments的属性。arguments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments

var btn = document.querySelector('button')
btn.onclick = function(){
    //点击事件触发后对应的arguments里面有一个对应的pointEvent的对象
    console.log('arguments',srguments)
    console.log(`arguments[0]`,arguments[0])
    //这个对象是在arguments里面存在第一位里面以属性为主 那么这个对象表示什么
    //这个参数其实就对应的事件的一些内容 称为事件源对象 event
}
window.onkeydown = function(){
    console.log('arguments',arguments);
    //keyboardEvent 键盘的事件源对象
    console.log(`arguments[9]`,arguments[0]);
}

从上述代码可得到对应的事件执行的处理函数里面会传递一个参数,这个参数的类型是一个event.这个处理函数的arguments数组里面只有一个元素.

//所以可以简写为
btn.onclick = function(e){
    //这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题
    //兼容写法
    e = e || window.event
    //这个e表示的就是第一个参数 那么他也就是我们对应的event对象
}

event的常用属性

鼠标坐标的相关属性

screenX表示鼠标离屏幕的X距离

screenY表示鼠标离屏幕的Y距离

pageX表示当前的鼠标离页面的X距离(包含隐藏的部分)

pageY表示当前的鼠标离页面的Y距离(包含隐藏的部分)

clientX表示鼠标离页面可视区的X距离

clientY表示鼠标离页面可视区的Y距离

offsetX表示鼠标离父元素偏移的X距离

offsetY表示鼠标离父元素偏移的Y距离

image-20221107210545927

按钮辅助的相关属性

  • ctrlKey 是否按下了ctrl键

  • altKey是否按下了alt键

  • shiftKey是否按下了shift键

//辅助的按键属性 返回布尔类型(boolean)值 false turn
console.log(e.ctrlKey);//是否长按ctrl
console.log(e.altKey);//是否长按alt
console.log(e.shiftKey);//是否长按shift

鼠标相关的属性

button按下是哪个键

//按下的键是什么 三个值 0 1 2
console.log(e.button);//左键0 滚轮键1 右键2

事件及相关触发的属性

type 当前的事件类型

//事件类型 返回事件名
console.log(e.type)//click

target表示当前事件的触发对象

currentTarget表示加事件的元素

//触发者元素
console.log(e.target);
console.log(e.currentTarget)

键盘相关的属性

key表示当前按下的键的字符(区别大小写)

keyCode (在keydown里面 不区分大小 全部是大写的ascii码)

code (key+大写的字符)

charCode (在keypress里面才管用 区分大小写 返回对应的ascii码)

window.onkeypress = function(){
    console.log(e.code);//当前的按钮按下哪个键 返回一个是key+大写字母
    console.log(e.keyCode);//当前按下键的大写字母 ascii码
    console.log(e.charcode);//当前字符的ascii码 keypress里面
    xonsole.log(e.key);//表示当前按下的键(兼容问题)
}

事件委托机制 (事件代理)

概述:将对应的事件委托给对应的父元素,然后通过对应的e.target获取实际的触发元素进行操作.

示例:

//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelecotr('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function(e){
    e = e || window.event
    //判断当前触发元素是否为li
    if(e.target.tagName == 'LI'){
        item.classNmae = ''
    }
    e.target.className = 'active'
}

事件委托的运用场景

在一个父元素里面有多个子元素要添加相同的事件的时候

posted @ 2022-11-07 21:29  落尘寰  阅读(57)  评论(0)    收藏  举报