目录
一, JS 中的事件
二, JS 中的事件分类:
1. 事件初级:
2. 事件参数 Event
3. 鼠标事件
4. 键盘事件 ***
5. 表单事件 ***
6. 文档事件 *
7. 图片事件 *
8. 页面事件 *****
三, 事件的绑定与取消
三, 事件对象:
四, 事件的冒泡与默认事件 *****
一, JS 中的事件
什么是事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 称之为事件
指定功能: 开发者根据实际需求完成相应的功能实现
钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
点击事件: 明确激活钩子的条件 = 激活钩子后该处理什么逻辑指定完成功能
事件使用简单案例:
- var div = document.querySelector(".div"); // 找到的是第一个. div
- div.onclick = function () {
- // alert(123)
- this.style.backgroundColor = "pink";
- }
- // 明确第一个及第二个
- var divs = document.querySelectorAll('.div');
- divs[1].ondblclick = function () {
- divs[0].style.backgroundColor = "yellow";
- }
事件使用案例:(事件控制标题栏)
首先对网页做架构:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- JS 事件控制标题栏
- </title>
- <style>
- .part1 div { width: 100px; height: 30px; text-align: center; line-height:
- 30px; float: left; cursor: pointer; } .part1 { overflow: hidden; } h2 {
- height: 30px; }
- </style>
- </head>
- <body>
- <div class="part1">
- <div class="b1">
- 标题栏
- </div>
- <div class="b2">
- 标题栏
- </div>
- <div class="b3">
- 标题栏
- </div>
- <div class="b4">
- 标题栏
- </div>
- </div>
- <h2>
- </h2>
- </body>
- </HTML>
第一种方式: 使用事件一步一步实现
- <script>
- var b1 = document.querySelector('.b1');
- // 鼠标悬浮事件
- b1.onmouseenter = function () {
- console.log("鼠标悬浮上了");
- // 悬浮上后, 该标签的字体颜色变化橘色
- this.style.color = "#FF6700";
- }
- // 需求并非为鼠标移走, 去除颜色
- b1.onmouseleave = function () {
- this.style.color = "#000";
- }
- </script>
第二种方式:
使用循环绑定的方式进行多个标题的控制
在这里使用 var 和 let 进行循环绑定时的区别:
var 是没有块级作用域的概念的, 也就是说在这里使用 var 进行循环绑定, i 的值在循环外边也是可以访问的, 在循环的时候就会不断被修改, 在本题中, i 的值最终会被修改为 4.
使用 let 的时候 let 具有块级作用域的概念, 在每次循环都是会产局部作用域的, 在局部作用域中产生的变量, 在外部不能被访问的, 所以使用了 let 之后, 每次循环 i 的值都是新的, 这就简单解决了变量污染的问题
在这里还要注意在 JS 中函数的定义和调用不是严格遵守先定义后调用的原则的, 它交给浏览器解析的时候会有一个编译过程, 会将文档中产生的所有名称存放起来, 所以在函数定义的上边进行函数的调用也是没有问题的, 在编译过程结束之后才会执行函数里边的代码体
- <script>
- // 制作数据
- var data = ["标题 1", "标题 2", "标题 3", "标题 4"];
- var divs = document.querySelectorAll('.part1 div');
- console.log(divs);
- // 循环绑定 => 会出现变量 (i) 污染(在这里使用局部作用域解决)
- for (let i = 0; i <divs.length; i++) {
- divs[i].onmouseenter = function () {
- // 打印自身索引值
- console.log(i);
- // 将自身颜色变为橘色, 其他兄弟颜色变为黑色
- // 就是 i 为橘色, 非 i 为黑色
- changeColor(i);
- // 悬浮内容
- changeContent(i)
- }
- }
- // console.log(i);
- // 自定义的修改颜色的方法
- function changeColor(index) {
- for (let i = 0; i < divs.length; i++) {
- // 先不管三七二十一, 全改成黑色
- divs[i].style.color = "black";
- // 如果是目标选中标签, 它的颜色再重新设置为橘色
- if (i == index) {
- divs[i].style.color = "#FF6700";
- }
- }
- }
- var h2 = document.querySelector('h2');
- // 修改内容
- function changeContent(index) {
- h2.innerText = data[index];
- }
- </script>
二, JS 中的事件分类:
1. 事件初级:
onload: 页面加载完毕事件, 只附属于 Windows 对象
onclick: 鼠标点击事件
ondblclick: 鼠标双击事件
onmouseenter | 鼠标悬浮 (常用)
onmouseleaver | 鼠标移开(常用)
onmouseover: 鼠标悬浮事件
onmouseout: 鼠标移开事件
onfocus: 表单元素获取焦点
onblur: 表单元素失去焦点
2. 事件参数 Event
存放时间信息的回调参数
3. 鼠标事件
onclick: 鼠标点击
ondblclick: 鼠标双击
onmousedown: 鼠标按下
onmousemove: 鼠标移动
onmouseup: 鼠标抬起
onmouseover: 鼠标悬浮
onmouseout: 鼠标移开
oncontextmenu: 鼠标右键
鼠标的事件参数:
ev.clientX : 鼠标点击点 X 坐标
ev.clientY : 鼠标点击点
4. 键盘事件 ***
键盘事件
onkeydown: 键盘按下
onkeyup: 键盘抬起
事件参数 ev
ev.keyCode: 按键编号
ev.altKey:alt 特殊按键
ev.ctrlKey:ctrl 特殊按键
ev.shiftKey:shift 特殊按键
5. 表单事件 ***
onfocus: 获取焦点
onblur: 失去焦点
onselect: 文本被选中
oninput: 值改变
onchange: 值改变, 且需要在失去焦点后才能触发
onsubmit: 表单默认提交事件
6. 文档事件 *
文档事件由 Windows 调用
onload: 页面加载成功
onbeforeunload: 页面退出或刷新警告, 需要设置回调函数返回值, 返回值随意
7. 图片事件 *
onerror: 图片加载失败
8. 页面事件 *****
onscroll: 页面滚动
onresize: 页面尺寸调整
Windows.scrollY: 页面下滚距离
三, 事件的绑定与取消
一, 事件的两种绑定方式
1,on 事件绑定方式与移除
on 事件只能绑定一个方法, 重复绑定保留最后一次绑定的方法
- document.onclick = function() {
- console.log("文档点击");
- }
- // on 事件只能绑定一个方法, 重复绑定保留最后一次绑定的方法
- document.onclick = function() {
- console.log("文档点击");
- }
- // 事件的移除
- document.onclick = null;
2, 非 on 事件绑定方式与移除
该绑定方式可以为一个元素绑定多个事件, 按照绑定顺序依次执行
addEventListener 第三个参数 (true|false) 决定冒泡的方式
- document.addEventListener('click', function() {
- console.log("点击 1");
- })
- document.addEventListener('click', function() {
- console.log("点击 2");
- })
- // 非 on 事件可以同时绑定多个方法, 被绑定的方法依次被执行
- // addEventListener 第三个参数 (true|false) 决定冒泡的方式
- function fn () {}
- document.addEventListener('click', fn);
- // 事件的移除
- document.removeEventListener('click', fn);
三, 事件对象:
什么是事件对象: 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
该函数对象中几乎包含了该对象支持的所用样式的事件设置, 例如: 特殊按键, 鼠标点击点等等
在这里引入一个万物皆为假的说法,(就是在 JS 中事件的设置默认都是为 false 的, 例如默认 cancleBubble(取消冒泡)=false 的)
- // 系统回调事件函数时, 传递了一个 事件(event) 实参
- // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
- box.onclick = function(ev){
- // 使用事件对象
- // 特殊按键 eg: ev.altKey: true | false
- // 鼠标触发点: ev.clientX | ev.clientY
- // 取消冒泡
- ev.cancelBubber = true;
- // 取消默认事件
- return false;
- }
四, 事件的冒泡与默认事件 *****
事件的冒泡: 父子都具有点击事件, 不处理的话, 点击子级父级也会发出相应的点击事件
解释: 子级响应时间后, 会将事件传递给父级, 如果父级有相同事件, 也会被激活, 最终船体给 document
取消冒泡, 当自身处理事件后, 该事件就处理完毕 , 不会再向父级传递
取消冒泡的方式:
- <body id="body">
- <div id="sup">
- <div id="sub"></div>
- </div>
- </body>
- ?
- <script>
- sub.onclick = function (ev) {
- // 方式一
- ev.stopPropagation();
- console.log("sub click");
- }
- sup.onclick = function (ev) {
- // 方式二
- ev.cancelBubble = true;
- console.log("sup click");
- }
- body.onclick = function (ev) {
- console.log("body click");
- }
- </script>
默认事件: 取消默认的事件动作, 如鼠标右键菜单
取消默认事件时可以将返回值设置为 false, 当系统看到函数返回值为 false 的时候, 就不会自动执行默认事件动作了
取消默认的事件动作方式:
- <body id="body">
- <div id="sup">
- <div id="sub"></div>
- </div>
- </body>
- ?
- <script>
- sub.oncontextmenu = function (ev) {
- // 方式一
- ev.preventDefault();
- console.log("sub menu click");
- }
- sup.oncontextmenu = function (ev) {
- console.log("sup menu click");
- // 方式二
- return false;
- }
- body.oncontextmenu = function (ev) {
- console.log("body menu click");
- }
- </script>
- ---------------------
来源: http://www.bubuko.com/infodetail-2896235.html