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 事件相关笔记的更多相关文章

  1. js 事件对象相关笔记

    事件对象     event就是一个事件对象 写到我们的监听函数的括号里面 当形参来看     事件对象只有有了事件才存在,他是系统给我们自动创建的 不需要我们传递参数     事件对象是我们事件的一 ...

  2. 《JS高程》事件学习笔记

    事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...

  3. C#委托与事件学习笔记

    委托事件学习笔记 本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...

  4. JQuery事件机制笔记

    一.事件绑定及移除 1.bind() bind()为每个匹配的元素绑定一个或多个事件处理函数: 语法:bind(event,fn)//不能给未来元素添加事件: bind(event,fn); bind ...

  5. javascript 事件相关使用总结01

    javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍 注册事件最基础的函数是这个 target.addEventListener(t ...

  6. HTTPS证书申请相关笔记

    申请免费的HTTPS证书相关资料 参考资料: HTTPS 检测 苹果ATS检测 什么是ECC证书? 渠道2: Let's Encrypt 优点 缺点 Let's Encrypt 的是否支持非80,44 ...

  7. UE4事件相关总结

    转自:http://blog.ch-wind.com/ue4-event-overview/ 事件机制是实现游戏内逻辑的重要部分,在开始进行游戏逻辑的设计和实现之前,对UE4的事件机制进行理解是非常必 ...

  8. Vue 事件相关实例方法---on/emit/off/once

    一.初始位置 平常项目中写逻辑,避免不了注册/触发各种事件 今天来研究下 Vue 中,我们平常用到的关于 on/emit/off/once 的实现原理 关于事件的方法,是在 Vue 项目下面文件中的 ...

  9. JNI相关笔记 [TOC]

    JNI相关笔记 目录 JNI相关笔记 1 生成native code所需要的头文件 2 JNI提供的一些函数和方法 3 局部引用,全局引用,全局弱引用. 4 异常 1 生成native code所需要 ...

  10. redis相关笔记(三.redis设计与实现(笔记))

    redis笔记一 redis笔记二 redis笔记三 1.数据结构 1.1.简单动态字符串: 其属性有int len:长度,int free:空闲长度,char[] bur:字符数组(内容) 获取字符 ...

随机推荐

  1. 聊一聊HTTPS双向认证的简单应用

    目录 背景 准备工作 ASP.NET Core nginx 反向代理 IIS 部署 总结 参考资料 背景 在三方接口对接中,偶尔会遇到需要传递证书的情况,这种方式其实是在SSL握手过程中会同时验证客户 ...

  2. 读写wav格式文件

    读写wav格式文件 本文所有相关代码(包括未来的)均可在该代码库找到 https://gitcode.net/PeaZomboss/learnaudios 本文代码在MinGW-w64 gcc/g++ ...

  3. Zstack EPICS Archiver在小课题组的使用经验

    https://www.zstack.io/product/portfolio_comparison/ https://epics-controls.org/resources-and-support ...

  4. ChatGPT调研分析与应用场域结合构想

    作者:京东科技 胡骏 摘要 1. ChatGPT调研分析 2022年11月30日,ChatGPT横空出世,在全球范围内形成了热烈的讨论.根据Similarweb的数据,今年1月,平均每天约有1300万 ...

  5. JZOJ 5351. 【NOIP2017提高A组模拟9.7】简单无向图

    题目大意 给定 \(n\) 个度数为 \(\in [1,2]\) 之间的点,求能组成多少种简单无向图(可不连通,点与点之间有别) 分析 显然答案只与 \(n1,n2\) 有关 那么 \(dp\)?(我 ...

  6. PHP封装自定义函数function

    最近一直在看PHP教程,毕竟懂点PHP语言还是不错的选择,起初是准备制作一个三文件夹内关键词组合长尾关键词,然后用PHP做一个全站的动态聚合页面的一个PHP插件,不负有心人啊!已写好,稍晚整理会在资源 ...

  7. 推荐系统[八]算法实践总结V0：腾讯音乐全民K歌推荐系统架构及粗排设计

    1.前言:召回排序流程策略算法简介 推荐可分为以下四个流程,分别是召回.粗排.精排以及重排: 召回是源头,在某种意义上决定着整个推荐的天花板: 粗排是初筛,一般不会上复杂模型: 精排是整个推荐环节的重 ...

  8. JS结束时间与当前时间间隔

    实现内容: 1.时间戳 1587024986952 转成年月日时分秒 2020-04-16 16:16:46 2.当前时间new Date()转成年月日时分秒2019-04-17 10:27:27 3 ...

  9. 快速删除 node_modules

    node_modules 文件夹很大,不推荐右键通过回收站删除,通过 rimraf 来删除速度很快: # 安装 rimraf npm i -g rimraf # 删除 node_modules rim ...

  10. 微软出品自动化神器【Playwright+Java】系列（十）元素定位详解

    一.写在前面 又有很久没更文了,真的是被催婚搞的整个人情绪特别不好,如果硬要形容的话,那就是没法跟人正常沟通,一点就着,做什么都没耐心,看什么都烦,简直没救了... 也是偶然发现的,自己居然没写关于P ...