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 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
随机推荐
- 一个小故事，玩转Python-while循环
无论是传统编程场景还是当下火爆的人工智能应用场景,循环的应用都是必不可少的,上一篇文章中阐述了如何使用for循环来进行编程,这篇文章将会由一个小朋友经常听的故事来讲Python编程中的while循环. ...
- 使用PostMan测试WebService接口
使用PostMan测试WebService接口 参考资料: 通过XML请求WebServer https://blog.csdn.net/qq_33933408/article/details/53 ...
- unity3d 嵌入iOS的 In App Purchase 应用程序内购买
Unity做东西是快,但是有些功能是需要额外开发的,比如 IAP (In App Purchase,应用程序内购买) 还好unity提供了灵活的扩展功能,允许嵌入原生代码来做一些unity未实现的功能 ...
- CF1183E/H Subsequences
思路: dp好题,dp[i][j]表示到前i个字符为止并且以s[i]为结尾,共有多少个长度为j的不同的子序列. 实现: #include <bits/stdc++.h> using nam ...
- MySQL中的日期和时间：使用和说明，以及常用函数
1.首先需要注意: 1.1 MySQL中把日期和时间是分开的. 以字符串2007-12-31 00:59:59为例: 日期部分:2007-12-31.这部分也可以叫做一个日期表达式. 时间部分:00: ...
- 使用js加载器动态加载外部js、css文件
let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...
- 后端 SpringBoot + 前端 vue 打包发布到Tomcat
近段时间 做了一些前后端的开发 需要在Tomcat里进行发布 把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...
- 解决git rebase操作后推送远端分支不成功的问题
转:解决git rebase操作后推送远端分支不成功的问题 前段时间在工作中同事在rebase时遇到一个问题来问我,今天突然想起来觉得有必要记录一下. 在我们日常工作中,经常使用git座位代码管理工具 ...
- pytorch安装问题
目录 1.版本 2.pytorch调试中出现的Module 'torch' has no 'zero' member如何解决 3.No module named 'numpy.core._multia ...
- javaSE总结（一）-java数据类型和运算符
一.注释 (1)单行注释: // (2)多行注释:/* */ (3)文档注释:/** */ 二.标识符和关键字 (1)分隔符:分号; 花括号{} 方括号[] 圆括号() 空格 圆点(.) ...