event事件(上)

JavaScript 能够做什么?

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:

  • 每当页面加载时应该做的事情

  • 当页面被关闭时应该做的事情

  • 当用户点击按钮时应该被执行的动作

  • 当用户输入数据时应该被验证的内容

  • 等等

让 JavaScript 处理事件的不同方法有很多:

  • HTML 事件属性可执行 JavaScript 代码

  • HTML 事件属性能够调用 JavaScript 函数

  • 您能够向 HTML 元素分配自己的事件处理函数

  • 您能够阻止事件被发送或被处理

  • 等等

事件

概述:

事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。

JS 事件(event)是当用户与网页进行交互时发生的事情,例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时,您可以使用 JavaScript 中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。

事件是一个异步机制。他相当于一个 执行者执行 -- 观察者观察 --- 处理函数执行 这个流程称为事件。

事件的组成

事件名字 (内置的) clik

执行对象 (元素对象) button

处理函数 (自定义函数) 后续的函数

观察者 (js的事件引擎)

注:在js(JavaScript)内书写的事件,他的观察者都是事件引擎。需要关注的是前面的三个内容(事件名、执行者、处理函数)

 

事件的声明书写方式

内联模式(写在标签内部)

内联模式就是在 onclick 书写中

<!-- 内联模式就是在onclick 中  书写、设置对应的代码 -->
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
    function fn(arg){
        alert('我是函数执行'+arg);
    }

 

 

脚本模式(在script 中 常用)

1、事件名字 2、执行对象 3、处理函数

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

 

事件名的分类

一般情况下事件的名称都是以单词 on 开头的,例如点击事件 onclick、页面加载事件 onload 等。

下表中列举了一些 JavaScript 中常用的事件:

事件描述 
onclick 鼠标、键盘事件 点击鼠标时触发此事件
ondblclick 双击 鼠标时触发此事件  
onmousedown 按下 鼠标时触发此事件  
onmouseup 弹起 鼠标按下后又松开时触发此事件  
onmouseover 移入 当鼠标移动到某个元素上方时触发此事件  
onmousemove 移出 移动鼠标时触发此事件  
onmouseout 移出 当鼠标离开某个元素范围时触发此事件  
onkeypress 字符串当按下并松开键盘上的某个键时触发此事件 键盘事件
onkeydown 按下 当按下键盘上的某个按键时触发此事件 键盘事件
onkeyup 弹起 当放开键盘上的某个按键时触发此事件 键盘事件
窗口事件 onabort 图片在下载过程中被用户中断时触发此事件
onbeforeunload 当前页面的内容将要被改变时触发此事件  
onerror 出现错误时触发此事件  
onload 页面内容加载完成时触发此事件  
onmove 当移动浏览器的窗口时触发此事件  
onresize 当改变浏览器的窗口大小时触发此事件  
onscroll 当滚动浏览器的滚动条时触发此事件  
onstop 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件  
oncontextmenu 当弹出右键上下文菜单时触发此事件  
onunload 改变当前页面时触发此事件  
表单事件 onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变时触发此事件  
onfocus 当某个元素获得焦点时触发此事件  
onreset 当点击表单中的重置按钮时触发此事件  
onsubmit 当提交表单时触发此事件  

 

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

  • click 单击事件

  • dbclik 双击事件

  • mousedown 按下

  • mouseup 弹起

  • mouseenter 移入

  • mouseleave 移出

  • mouseover 移入

  • mouseout 移出

  • mousemove 移动

  • contextmenu 右键点击

     

    注意事项:

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

    按下鼠标 弹起 点击

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

<div>我是一个div
    <p>你好</p>
</div>
<script>
    //获取div
    var div = document.querySelector('div')
    //脚本模式 元素对象.on+事件名 = 处理函数
    div.onclick = function(){
        console.log('单击事件执行了');
    }
    //双击事件必定触发单击
    div.ondblclick = function(){
        console.log('双击事件执行了');
    }
    //鼠标的按下和弹起  执行顺序 按下 -- 弹起 -- 单击
    div.onmousedown = function(){
        console.log('鼠标按下');
    }
    div.onmouseup = function(){
        console.log('鼠标弹起');
    }
    //鼠标的移进和移出
    //enter和leave 进入子元素不会触发
    div.onmouseenter = function(){
        console.log('鼠标移进去了');
    }
    div.onmouseleave = function(){
        console.log('鼠标移出了');
    }
    //over和out 进入子元素也会触发
    div.onmouseover = function(){
        console.log('鼠标over移入了');
    }
    div.onmouseout = function(){
        console.log('鼠标out移出了');
    }
    //鼠标的移动
    div.onmousemove = function(){
        console.log('鼠标移动了');
    }
    //鼠标点击右键 (点击事件不会触发)
    div.oncontextmenu = function(){
        console.log('右键点击了');
    }
 </script>

 

 

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

keydown 按下

keyup 弹起

keypress 字符串(除功能键的其他键)

注:
  • 执行顺序 keydown-->keypress-->keyup

  • keypress 一定会触发 keydown

<input type="text">
<script>
    //获取输入框
    var input = document.querySelector('input')
    //键盘相关事件
    input.onkeydown = function(){
        console.log('键盘按下');
    }
    //在input 弹起会出现俩次
    input.onkeyup = function(){
        console.log('键盘弹起');
    }
    //字符键按下 (除了功能键)
    input.onkeypress = function(){
        console.log('字符键按下');
    }
    window.onkeypress = function(){
        console.log('在window上触发了keypress事件');
    }
</script>

 

 

HTML 事件 (html 中自带的一些事件 (只能用于专门 HTML))
window 的事件
  • 加载事件 load

  • 卸载事件 unload

  • 关闭窗口 onclose

  • 打印之前调用的事件 onbeforeprint

  • 卸载之前调用的事件 onbeforeunload

  • 滚动拦发生变化的事件 onseroll

//加载事件
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').onscroll = function(){
    console.log('div的滚动栏滚动了');
}

 

 表单的事件

  • submit 表单提交事件

  • reset 表单重置事件

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

  • clange 表单的value值发生变化

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

  • blur 失去焦点

  • focus 获取焦点

//表单相关的事件
//加给整个form表单的事件
document.forms[0].onsubmit = function(){
    console.log('提交了');
}
document.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').onselect = function(){
    console.log('选择值了');
}
//失去焦点
document.querySelector('input').onblur = function(){
    console.log('失去焦点了');
}
//聚焦
document.querySelector('input').onfocus = function(){
    console.log('获取焦点了');
}

 

 

event 事件源对象

概念

Event 对象代表事件的状态,当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。)的对象,这个对象就是event(事件对象)。 事件通常与函数结合使用,函数不会在事件发生前被执行!

 

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

 

处理函数中 Arguments

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

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

 

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

可以简写为

//这个地方的e 一般写做 e 或者是 event
btn.onclick = function(e){
    //这个地方的e表示是第一个参数 也就是对应的event对象 这个event在这个里面有兼容问题
    //兼容写法
    e = e || window.event
    //这个e表示的就是第一个参数 那么他也就是我们对应的event对象
    console.log(`e`, e);
}

 

 

特点

1.arguments对象和Function是分不开的。

2.因为arguments这个对象不能显式创建。

3.arguments对象只有函数开始时才可用。

 

使用方法

虽然arguments对象并不是一个数组(类数组),但是访问单个参数的方式与访问数组元素的方式相同

 

event的常用属性

鼠标坐标的相关属性
  • screenX 表示鼠标离屏幕的X距离

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

  • pageX 表示当前的鼠标离页面的X距离(包含卷起部分)

  • pageY 表示当前的鼠标离页面的Y距离(包含卷起部分)

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

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

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

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

 

 

按钮辅助的相关属性

ctrlKey 是否按下了ctrl键 altKey 是否按下了alt键 shiftKey 是否按下shift键

//辅助的按键属性 返回布尔类型值
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(e){
console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母
console.log(e.keyCode);//当前按下键的大写字母 ascii码
console.log(e.charCode); //当前字符的ascii码 keypress里面
console.log(e.key);//表示当前按下的键 (兼容问题)
}

 

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

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

示例
//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
e = e || window.event
//判断当前触发元素是否为li
if (e.target.tagName == 'LI') {
//排他思想
//把所有的li的class清除
for (var item of this.children) {
item.className = ''
}
e.target.className = 'active'
}
}

 

事件委托的运用场景

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

 

多姆标准 (whatwg.org)

posted @ 2022-10-13 23:10  後楓浪  阅读(67)  评论(0)    收藏  举报