day11 事件上

事件的概述

事件是指代一个东西的操作被另外一个东西监听以后的一个过程（事件），这个过程可以完成对应的操作（处理函数）事件监听器是一个标准的观察者模式（observer）也被称为订阅者模式

事件的模式

内联模式（嵌入到标签中的）以浏览器本身来执行的 window来执行的可直接看到调用的函数
脚本模式（分离于标签的）把对应的onclick当成一个属性把元素当成一个对象看不见调用函数

<body>
    <!-- 内联模式 -->
    <button onclick="alert('111')">点击弹窗</button>
    <button onclick="hlc()">点击弹窗</button>
    <!-- 脚本模式 -->
    <button class="btn">脚本模式</button>
    <button class="btn">脚本模式</button>
    <script>
        function hlc(){
            alert('aaa')
            console.log(this);// 指向window
        }
        // 触发匿名函数方式
        var btn=document.querySelector('.btn')
        console.log(typeof btn);// 对象 object
        btn.onclick=function(){
            console.log('aaaa');
            console.log(this);// 指向btn
        }
        // 触发具名函数方式  推荐 可以复用
        document.querySelectorAll('.btn')[1].onclick=sayHello 
        function sayHello(){
            alert('bbb')
        }
    </script>
</body>

事件分类

事件的构成

触发的对象+.on+事件名 = 处理函数

事件名的分类

鼠标事件

点击事件 click
双击事件 dblclick
鼠标按下 mousedown
鼠标弹起 mouseup
鼠标移入 mouseenter
鼠标移出 mouseleave
鼠标移入 mouseover
鼠标移出 mouseout
鼠标右键 contextmuen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div>
    <button>按钮</button>
  </div>
  <script>
    var div = document.querySelector('div')
    //点击事件
    div.onclick = function () {
      console.log('点击事件')
    }
    //双击会触发俩次点击
    div.ondblclick = function () {
      console.log('双击')
    }
    //按下
    div.onmousedown = function () {
      console.log('按下')
    }
    //弹起
    div.onmouseup = function () {
      console.log('弹起')
    }
    //先按下 -- 再弹起  -- 再点击
    // 并不会向下执行  冒泡 从下到上 (从里到外)  捕获 从上到下(从外到里)
    div.onmouseenter = function () {
      console.log('移入 enter')
    }
    div.onmouseleave = function () {
      console.log('移出 leave')
    }
    //向下执行 冒泡
    div.onmouseover = function () {
      console.log('移入 over')
    }
    div.onmouseout = function () {
      console.log('移出 out')
    }
    div.oncontextmenu = function(){
      console.log('鼠标右键')
    }
    //鼠标移动 (动画之类的)
    div.onmousemove = function(){
      console.log('鼠标移动')
    }
    //在移动端 没有点击 只有触发 touch
  </script>
</body>

</html>

注意事项

执行顺序 mousedown --- mouseup --- click
mouseenter/mouseleave 及 mouseover/mouseout的区别，前置不会发送事件冒泡（也就是子元素不会触发）后置会发生事件冒泡（子元素会触发）

键盘事件（key）

按下 keydown
弹起 keyup
按下非功能键 keypress （功能不会执行）

window.onkeydown = function(){
    console.log('按下')
}
window.onkeyup = function(){
    console.log('弹起')
}
window.onkeypress = function(){
    console.log('非功能键按下')
}

非功能键触发的过程 keydown -- keypress --- keyup

HTML事件

window窗口相关事件

load 加载事件
unload 卸载事件
close 关闭
beforeunload 卸载之前
beforeprint 打印之前
error 错误
resize 重新设置大小
reset 重新设置位置
scroll 滚动栏滚动
hashchange hash值变化
popstate history的state发生变化
...

window.onload = function(){
    console.log('窗口加载的时候触发的')
}
window.onunload = function(){
    console.log('窗口卸载的时候触发的')
}
window.onclose = function(){
    console.log('窗口关闭的时候触发的')
}
//页面关闭之前
window.onbeforeunload = function(){
    console.log('在卸载之前触发的')
}
window.onbeforeprint = function(){
    console.log('打印之前触发的')
}
window.onerror = function(){
    console.log('窗口出错的时候触发的')
}
window.onresize = function(){
    console.log('窗口可操作空间大小发生变化的时候触发的')
}
window.onreset = function(){
    console.log('窗口重新设置位置的时候触发的')
}
window.onscroll = function(){
    console.log('窗口滚动栏发生变化的时候触发的')
}
window.onhashchange = function(){
    console.log('hash值发生变化的时候触发的')
}
window.onpopstate = function(){
    console.log('history中的state发生变化的时候触发的')
}

表单相关事件

input 输入
change value值发生变化
focus 获取焦点
blur 失去焦点
select 内容被选择
submit 提交
reset 重置
- ...

//输入事件
inp.oninput = function () {
    console.log('表单输入')
}
//必须先失去焦点
inp.onchange = function () {
    console.log('值变化')
}
//value改变事件
select.onchange = function () {
    console.log('value发生变化')
}
//获取焦点事件
inp.onfocus = function () {
    console.log('获取焦点')
}
//失去焦点事件
inp.onblur = function () {
    console.log('失去焦点')
}
//选中内容触发的事件
inp.onselect = function () {
    console.log('内容被选中触发')
}
//form表单的事件 reset submit
document.forms[0].onsubmit = function(){
    console.log('提交')
}
document.forms[0].onreset = function(){
    console.log('重置')
}

....

event

概述

event是一个事件源对象，他包含了事件触发过程的内容，以及对应的元素的内容。他会默认传入给对应的事件的处理函数。

处理函数的arguments

var btn = document.querySelector('button')
btn.onclick = function (e) { //这个参数e就相当于接收的第一个实参
    console.log(arguments)
    console.log(arguments.length) //1 当前的这个处理函数内容只有一个参数 这个参数是一个event对象
    //pointerEvent对象 这个对象就是一个事件源对象 
    console.log(arguments[0]) //传入的第一个实参
    // 这个地方的e就相当于是arguments[0]
    console.log(e)
    console.log(e == arguments[0])
    //这个接收的event对象是存在兼容问题 所以为了防止兼容问题的产生 我们一般会在里面先写对应的兼容
    e = e || window.event //兼容写法
}
//从上述可以得到对应的处理函数会被默认传递一个参数这个参数就是对应的事件源对象
//所以我们就可以直接用对应的形参接收实参的方法 通过形参e来接收这个对应的实参event

对应的处理函数的arguments会传递一个参数而这个参数就是对应的事件源对象
这个事件源对象一般使用形参e来表示一般的兼容写法为 e = e || window.event

event对象里面的相关属性

type 触发事件的类型 *
target 触发的目标元素 *
currentTarget 当前加事件的元素 *
button 鼠标点击的按钮
screenX screenY 获取当前鼠标在屏幕上的位置
pageX pageY 获取当前鼠标在页面上的位置（包含滚动栏位置）
clientX clientY 获取当前鼠标在可视区的位置（不包含滚动栏）
offsetX offsetY 获取当前鼠标在目标元素上的位置
altKey shiftKey ctrlKey 是否按下对应的功能键 *
cancelBubble 取消冒泡 *
returnValue 是否执行对应的默认行为 *
bubbles 是否冒泡 *

//对应的属性
console.log(e.type) //获取对应的事件名
console.log(e.target) //获取对应的事件的目标元素 你当前执行事件的目标元素
console.log('按钮触发了')
console.log(e.currentTarget) //获取当前加事件的元素
//位置 鼠标点击的坐标
//获取鼠标点击位置的页面坐标 包含滚动栏
console.log(e.pageX)
console.log(e.pageY)
//获取鼠标在页面可视区的位置 不包含滚动栏的
console.log(e.clientX)
console.log(e.clientY)
//获取鼠标在对应的盒子里面的位置 也就是在按钮中的位置
console.log(e.offsetX)
console.log(e.offsetY)
//获取鼠标处在屏幕的位置 不包含滚动栏
console.log(e.screenX) 
console.log(e.screenY) //加上导航栏的位置
//ctrlKey  shiftKey  altKey 是否按照ctrl键 是否按照shift键 是否按着alt键
console.log(e.ctrlKey,e.shiftKey,e.altKey)
//按那么键 0 1 2
console.log(e.button)
//取消冒泡
console.log(e.cancelBubble) //默认值为false
//返回的value值 返回true就可以走 返回false就不能走 走不走对应的默认行为
console.log(e.returnValue) //默认值为true
//是否冒泡
console.log(e.bubbles)

键盘相关的event属性

key 按下的键返回键的字符串
keyCode 按下键的ascii码（返回大写的ascii码如果是keypress事件那么返回是对应的）
charCode 字符键按下才有的 ascii 如果是给keypress事件那么对应的keyCode和charCode是一致的

//属于键盘事件源的属性
console.log(e.key) //按下的键 返回键的字符串
console.log(e.keyCode) //按下键的ascii码 返回大写的ascii码
console.log(e.charCode) //字符键按下才有的 ascii 如果是给keypress事件那么对应的keyCode和charCode是一致的

事件委托机制（事件代理）

概述

事件委托机制就是将自己的事件委托给对应的父元素去添加，在内部利用对应的target来指向执行元素的特性来进行相关的操作。

示例

给所有的li添加一个点击事件点击添加背景颜色

//原本的做法 获取所有的li 遍历添加点击事件
//利用事件委托 将对应的点击事件委托给对应的父元素 ul
var ul = document.querySelector('ul')
ul.onmouseover = function(e){
    e = e || window.event
    //利用e.target来获取对应的执行的元素
    if(e.target.tagName = 'LI'){
        //排他思想
        //将所有的li颜色变为白色
        for(var li of ul.children){
            li.style.backgroundColor = '#fff'
        }
        //给他添加背景颜色
        e.target.style.backgroundColor = '#f00'
    }
}
//应用场景 如果有多个共同的元素要添加一个事件 那么可以委托给他的父元素来进行代理
//注意事项 如果需要使用事件委托 那么对应的事件一定要支持事件冒泡(利用事件冒泡来完成操作的)

注意事项

如果需要使用事件委托那么对应的事件一定要支持事件冒泡(利用事件冒泡来完成操作的)
如移入移出功能需要添加事件委托那么必须使用mouseover/mouseout 不能使用mouseenter/mouseleave

day11 事件相关笔记的更多相关文章

js 事件对象相关笔记
事件对象 event就是一个事件对象写到我们的监听函数的括号里面当形参来看事件对象只有有了事件才存在,他是系统给我们自动创建的不需要我们传递参数事件对象是我们事件的一 ...
《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
C#委托与事件学习笔记
委托事件学习笔记本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...
JQuery事件机制笔记
一.事件绑定及移除 1.bind() bind()为每个匹配的元素绑定一个或多个事件处理函数: 语法:bind(event,fn)//不能给未来元素添加事件: bind(event,fn); bind ...
javascript 事件相关使用总结01
javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍注册事件最基础的函数是这个 target.addEventListener(t ...
HTTPS证书申请相关笔记
申请免费的HTTPS证书相关资料参考资料: HTTPS 检测苹果ATS检测什么是ECC证书? 渠道2: Let's Encrypt 优点缺点 Let's Encrypt 的是否支持非80,44 ...
UE4事件相关总结
转自:http://blog.ch-wind.com/ue4-event-overview/ 事件机制是实现游戏内逻辑的重要部分,在开始进行游戏逻辑的设计和实现之前,对UE4的事件机制进行理解是非常必 ...
Vue 事件相关实例方法---on/emit/off/once
一.初始位置平常项目中写逻辑,避免不了注册/触发各种事件今天来研究下 Vue 中,我们平常用到的关于 on/emit/off/once 的实现原理关于事件的方法,是在 Vue 项目下面文件中的 ...
JNI相关笔记 [TOC]
JNI相关笔记目录 JNI相关笔记 1 生成native code所需要的头文件 2 JNI提供的一些函数和方法 3 局部引用,全局引用,全局弱引用. 4 异常 1 生成native code所需要 ...
redis相关笔记(三.redis设计与实现(笔记))
redis笔记一 redis笔记二 redis笔记三 1.数据结构 1.1.简单动态字符串: 其属性有int len:长度,int free:空闲长度,char[] bur:字符数组(内容) 获取字符 ...

随机推荐

elasticsearch之日期类型有点怪
一.Date类型简介 elasticsearch通过JSON格式来承载数据的,而JSON中是没有Date对应的数据类型的,但是elasticsearch可以通过以下三种方式处理JSON承载的Date数 ...
JDBC工具类，减少代码冗余好帮手
首先要在scr下创建一个file文件当然需要初始的注册驱动和数据库操作都可以实现,才可以用jdbc工具类进行减多少代码冗余~可以看前面一篇的博客,就是写如何连接jdbc哈~代码运行成功的快乐真的好 ...
安装CUDA
https://developer.nvidia.com/cuda-toolkit-archive 使用deb安装的话,有时会报错: dpkg: 处理软件包 nvidia-driver-450 (-- ...
C++_关键字explicit
首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数 ...
nuxt+vant+rem项目构建
原文链接:https://blog.csdn.net/Young_Gao/article/details/93605428 一.创建项目 1.使用如下命令生成项目 vue init nuxt-comm ...
一文搞懂秒杀系统，欢迎参与开源，提交PR，提高竞争力。早日上岸，升职加薪。
前言秒杀和高并发是面试的高频考点,也是我们做电商项目必知必会的场景.欢迎大家参与我们的开源项目,提交PR,提高竞争力.早日上岸,升职加薪. 知识点详解秒杀系统架构图秒杀流程图秒杀系统设计这篇 ...
ps抠图小技巧
1.背景橡皮擦工具适合分离单一背景. 中括号键可以调整大小. 2.调整边缘抠图(也叫选择并遮住) 适合扣毛发丝. 套索工具框选出大概: 点击选择并遮住后出来一个面板: 视图选择叠加,输出设置勾上净化 ...
从零实现在线云相亲APP｜程序员脱单神器（内附源码Demo)
实时音视频通话涉及到的技术栈.人力成本.硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用.本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲 ...
c语言以及高级语言中的float到底是什么以及IEEE754
对内存里float4字节的好奇初学计算机都要学那个什么二进制十进制什么补码反码那些玩意儿哈,由于最近要做一个单片机往另外一个单片机发数据的需求,直接c语言指针然后float4字节传过去不就得了吗 ...
Mybatis连接数据库
从零开始Mybatis连接数据库创建Maven文件 File-->new-->project-->maven,点击next 配置在出现的pom.xml文件中<project ...

day11 事件相关笔记

day11 事件上

事件的概述

事件的模式

事件分类

事件的构成

事件名的分类

鼠标事件

注意事项

键盘事件 （key）

HTML事件

window窗口相关事件

表单相关事件

event

概述

处理函数的arguments

event对象里面的相关属性

键盘相关的event属性

事件委托机制（事件代理）

概述

示例

注意事项

day11 事件相关笔记的更多相关文章

随机推荐

热门专题

键盘事件（key）