web开发：javascript高级
一、事件案例
二、循环绑定之变量污染
三、事件的绑定与取消
四、事件对象
一、事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件高级</title>
<style>
.box {
width: 350px;
height: 350px;
margin: 100px auto 0;
}
.box div {
width: 70px;
height: 70px;
background-color: yellow;
border-radius: 50%;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var divs = document.querySelectorAll(".box div"); // 需要注意的点: 我们需要修改背景颜色, 背景颜色是计算后样式,
// 那么getComputedStyle()获取颜色的格式需要手动处理, 而行间式不需要处理,
// 且行间式不仅可以设置, 还可以修改 => 将原本计算后样式设置的更改为行间式 // 通过循环利用行间式将所有背景颜色重置
for (let i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "black";
} // 游戏的实现
for (let i = 0; i < divs.length; i++) {
// 循环绑定 (问题: 变量污染)
divs[i].onclick = function () {
console.log(i) // toggle 颜色 => 抽离出toggle颜色的方法 // 修改自身
toggleBGColor(this); // 修改上下左右, 考虑问题, 不存在的兄弟方位
// 上, 关系i-5, 第一排没有上 i < 5 => 对立面 i >= 5均有上
if (i >= 5) {
var topEle = divs[i - 5]
toggleBGColor(topEle);
}
// 下, 关系i+5, 最后一排没有下, 对立面 i < 20
i < 20 && toggleBGColor(divs[i + 5]); // 左, 关系i-1, 第一列没有左, 对立面 i % 5 != 0
i % 5 != 0 && toggleBGColor(divs[i - 1]); // 右, 关系i+1, 最后一列没有右, 对立面 i % 5 != 4
i % 5 != 4 && toggleBGColor(divs[i + 1]);
}
} function toggleBGColor(ele) {
var bgColor = ele.style.backgroundColor;
if (bgColor == 'black') {
ele.style.backgroundColor = "yellow";
} else {
ele.style.backgroundColor = "black";
}
}
</script>
</html>
二、循环绑定之变量污染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环绑定</title>
</head>
<body>
<div class="box">0000000000000000001</div>
<div class="box">0000000000000000002</div>
<div class="box">0000000000000000003</div>
</body>
<script>
var divs = document.querySelectorAll(".box");
/* 存在污染
for (var i = 0; i < divs.length; i++) {
// i = 0 | 1 | 2 | 3
// 循环绑定
divs[i].onclick = function () {
console.log("***", i)
}
}
// i = 3
console.log(">>>", i);
*/ /* 利用块级作用域解决
for (let i = 0; i < divs.length; i++) {
// {i=0 <= i} {i=1 <= i} {i=2 <= i}
// i = 3
// 循环绑定
divs[i].onclick = function () {
console.log("***", i)
}
} // for运行结束, i=3会被销毁
console.log(">>>", i)
*/ // 利用标签的属性解决
/*
for (var i = 0; i < divs.length; i++) {
divs[i].index = i;
divs[i].onclick = function () {
// console.log("###", i)
console.log(this.index)
}
}
*/ // 利用闭包处理循环绑定
for (var i = 0; i < divs.length; i++) {
(function () {
var index = i;
divs[index].onclick = function () {
console.log("###", index)
}
})()
/*
(function (index) {
divs[index].onclick = function () {
console.log("###", index)
}
})(i)
*/
/*
(function (i) {
divs[i].onclick = function () {
console.log("###", i)
}
})(i)
*/
} </script>
</html>
三、事件的绑定与取消
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的绑定与取消</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="begin">开始</div>
<div class="event_on1">事件的绑定1</div>
<div class="event_on2">事件的绑定2</div>
</body>
<script>
// 每一个box点击都会toggle颜色, 当颜色都变成黑色, 取消所有点击事件,
// 点击开始, 重新获得点击事件(所有状态应该重置) var beginBtn = document.querySelector('.begin');
var boxs = document.querySelectorAll('.box'); // 定义一个count计算器,计黑的个数
var count = 0; // 启动服务
beginBtn.onclick = init; // 开始功能
// function beginAction() {
// // 让所有box拥有点击事件
// }
// box点击切换颜色
function toggleColor() {
// console.log(this)
if (this.style.backgroundColor == "orange") {
this.style.backgroundColor = "black";
count++;
} else {
this.style.backgroundColor = "orange";
count--;
}
// 检测是否需要结束
count == 3 && overAction();
}
// 结束功能, 取消所有box点击事件
function overAction() {
for (var i = 0; i < boxs.length; i++) {
boxs[i].onclick = null;
}
}
// 重置功能, 并让所有box拥有点击事件
function init() {
for (var i = 0; i < boxs.length; i++) {
boxs[i].style.backgroundColor = "orange";
boxs[i].onclick = toggleColor;
}
// 计算器重置
count = 0;
}
// 启动服务
// init();
</script>
<script>
var event_on1 = document.querySelector('.event_on1');
// 事件绑定的第一种方式
event_on1.onclick = function () {
console.log(1)
};
event_on1.onclick = function () {
console.log(2)
} // 事件绑定的第二种方式
var event_on2 = document.querySelector('.event_on2');
// 可以为一个元素绑定多个事件, 按绑定顺序依次执行
event_on2.addEventListener('click', function () {
console.log("a")
});
var action = function () {
console.log("b")
}
event_on2.addEventListener('click', action); // 如何取消事件
event_on2.removeEventListener('click', action) </script>
</html>
四、事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
body {
margin: 0;
}
.box {
background-color: pink;
}
.sup {
width: 200px;
height: 200px;
background-color: red;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">12345</div> <div class="sup">
<div class="sub"></div>
</div> <a href="https://www.baidu.com">只想相应点击事件</a>
</body>
<script>
var box = document.querySelector('.box');
// 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
box.onclick = function (ev) { // 回调函数
console.log(ev)
// 特殊按键 altKey | shiftKey | ctrlKey
console.log(ev.altKey)
// 鼠标的点击点
console.log(ev.clientX, ev.clientY)
}
</script>
<script>
var sup = document.querySelector('.sup');
var sub = document.querySelector('.sub'); // 事件默认有冒泡, 子级相应事件后,会将事件传递给父级,如果父级有相同事件,也会被激活, 最终传递给document
sub.onclick = function (ev) {
console.log(ev);
// 取消冒泡, 当自身处理事件后, 该事件就处理完毕, 结束, 不再向上传递
ev.cancelBubble = true;
console.log("子级被点击了")
};
sup.onclick = function () {
console.log("父级被点击了")
};
document.onclick = function () {
console.log("文档被点击了")
}
</script>
<script>
// 默认事件
var aBtn = document.querySelector('a');
aBtn.onclick = function (ev) {
ev.cancelBubble = true;
console.log("a被点击了");
// 手动转跳页面
open('https://www.oldboyedu.com', '_self');
// a标签默认会完成转跳, 如果取消默认事件
return false;
} </script>
</html>
web开发：javascript高级的更多相关文章
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- 从零开始学 Web 之 JavaScript 高级（一）原型，贪吃蛇案例
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 静态Web开发 JavaScript
三章 Javascript 1节javascript基本语法和注意事项 脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.(不需要编译)常见的脚本:批处理 ...
- Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
- 如何实现上下左右键盘控制焦点使之落在相邻文本框或下拉框中-Web开发/JavaScript
我用jquery只实现了文本框的移动(暂时上下移动等同于左右移动) $(function () { var cols = 1;//按一下跳几个控件 var obj = $("input[id ...
- 12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
- 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编 赵静 译 ISBN 978-7-121-21769-2 2 ...
- 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
随机推荐
- SpringBoot： 13.异常处理方式3(使用@ControllerAdvice+@ExceptionHandle注解)（转）
问题:使用@ExceptionHandle注解需要在每一个controller代码里面都添加异常处理,会咋成代码冗余 解决方法:新建一个全局异常处理类,添加@ControllerAdvice注解即可 ...
- Leetcode之并查集专题-684. 冗余连接（Redundant Connection）
Leetcode之并查集专题-684. 冗余连接(Redundant Connection) 在本问题中, 树指的是一个连通且无环的无向图. 输入一个图,该图由一个有着N个节点 (节点值不重复1, 2 ...
- OpenCV.问题&解决
ZC:PDF:D:\_eBook\OpenCV\学习OpenCV(中文版Linuxidc.com).pdf 1.函数cvCaptureFromAVI(...) & cvCreateFileCa ...
- golang的time包：时间字符串和时间戳的相互转换
本博客转自: https://blog.csdn.net/mirage003/article/details/86073046 package main import ( "log" ...
- poj1961（kmp算法next数组应用）
题目链接:https://vjudge.net/problem/POJ-1961 题意:给定一个长为n的字符串(n<=1e6),对于下标i(2<=i<=n),如果子串s(1...i) ...
- Vue.js + Element.ui 从搭建环境到打包部署
一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...
- Linux系列（16）之系统资源的观察
1.系统资源观察 1.观察内存使用情况:free 格式: free //默认显示的单位为KBytes,显示系统的内存容量 free [-b | -k | -m | -g | -h] [-t] [ ...
- 剑指offer34：第一个只出现一次的字符的位置
1 题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 2 思路和方法 ch[ ...
- 【Trie】Nikitosh 和异或
[参考博客]: LOJ#10051」「一本通 2.3 例 3」Nikitosh 和异或(Trie [题目链接]: https://loj.ac/problem/10051 [题意]: 找出两个不相交区 ...
- StorageClass-动态PVC
StorageClass 之前我们部署了PV 和 PVC 的使用方法,但是前面的 PV 都是静态的,什么意思?就是我要使用的一个 PVC 的话就必须手动去创建一个 PV,我们也说过这种方式在很大程度上 ...