首页 > 其他分享 >10 .事件

10 .事件

时间：2022-10-27 20:23:12浏览次数：39  
标签：function 10 console 鼠标 事件 处理函数 log

事件

概述：

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

事件的组成

  • 事件名 （内置的）

  • 执行对象 （元素对象）

  • 处理函数 （自定义函数）

  • 观察者 （js的事件引擎）

例子

我去便利店买包华子、老板告诉我没货。我跟老板说等有货通知我。货来了老板就通知我了，我去就买了。

分析

事件名 ---- 买华子

执行者 ---- 我

观察者 --- 老板

处理 --- 买了

示例
<button>点击</button>
button.onclick = function(){
    console.log('点击了')
}

事件名 click（内置的）

执行对象 button （元素对象）

处理函数 后续的函数 （自定义函数）

观察者 （js引擎 事件引擎）

在js内书写的事件，他的观察者都是事件引擎。 我们需要关注就是前面的三个内容（事件名、执行对象、处理函数）

事件的声明书写方式

内联模式（在标签内部）
<!-- 内联模式就是在onclick书写中设置对应的代码 -->
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
    function fn(arg){
        alert('我是函数执行'+arg);
    }
</script>
脚本模式 （在script中 常用）
//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
    console.log('你好');
}
function handler(){
    console.log('处理函数执行了');
}
btn.onclick = handler
内联模式和脚本模式的区别

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

  • 内联模式里面的函数调用的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
    <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 字符串（除功能键的其他键）

<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>
注意事项

  • 执行顺序 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').onscroll = function(){
    console.log('div的滚动栏滚动了');
}
表单的事件

  • submit 表单提交事件

  • reset 表单重置事件

  • select 内容被选中（只针对于输入框和文本域）

  • change 表单的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('获取焦点了');
}
相关聚焦和失焦的方法

  • focus 聚焦的方法

  • blur 失焦的方法

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

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);
}

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'
    }
}
事件委托的运用场景

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

标签：function,10,console,鼠标,事件,处理函数,log
From： https://www.cnblogs.com/xfuuhmx/p/16833580.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99