webAPI-day03
※:回顾
- 事件相关：完成 最为基础交互；
- 添加事件监听语法；
- 事件类型：click dblclick 表单元素：focus blur
- 节点样式
- 作用：js的方式操作样式
- 应用：
- 单个样式：
**dom.style.css属性名** - 多个样式：
- 建议把多个样式写为一个类名，操作名：
dom.class="aaa" 把之前类名覆盖（之前没有类名，添加某个新的类名，可以用下）
- 建议把多个样式写为一个类名，操作名：
- 单个样式：
- 获取DOM节点：
- getElementByid(“id字符串，没有#”)
- getEementByTagName（”标签”） getElemmentByClassName(“类名，没有”) 为数组，如果没有，空数组
- querySelectorAll(“习惯的css选择器” ) 伪数组，如果没有，空为数组
- 伪数组：由下标、由长度、可遍历
- this:
- 一般出现在函数内部
- this内置变量：存了个啥？代表啥？指向啥？
- 规则
- 谁调用就是谁！
- 添加事件监听，事件执行函数内部this代表谁？dom节点，
dom.onclick=functinon()
- 自定义属性：
- 作用：减少代码
- 需求：点按钮1—->盒子红色
- 理解程序封装在开发中的意义
- 掌握移除 DOM 事件监听的方法
- 能够能过事件对象获取事件相关信息
- 能够实现基础 DOM 操作的封装
函数相关
1.1-函数表达式
将函数赋值给变量，即函数表达式。函数分为具名函数和匿名函数，具名函数是指函数要有具体的名称，匿名函数是指没有名字的函数。
-上课讲解-01函数相关*
//*******局部变量function fn() {let aab = "张三";};fn()console.log(aab);//****全局变量的小知识let aaa;function fn() {aaa = 10;}fn();//函数体内部 aa=10；aa是全局变量被赋值为10console.log(aaa);//意义:后面写很多代码功能，防止变量污染(function () {let aaa = 10;})();(function () {let aaa = 20;})();
函数
<script>// 1. 具名函数function foo() {console.log('foo 函数被执行...');}// 将函数 foo 赋值给变量 anotherFoolet anotherFoo = foo;anotherFoo(); // 相当在于调用 foo 函数// 2. 匿名函数let bar = function () {console.log('声明函数时没有名字...');}// 调用函数bar();</script>
函数表达式和普通函数并无本质上的区别：
<script>// 函数表达式与普通函数本质上是一样的let counter = function (x, y) {return x + y;}// 调用函数let result = counter(5, 10);console.log(result);</script>
1.2-自执行函数
- 函数是最基本的封装形式，使用函数时分为声明和调用两个步骤，今天学习一种可以将声明和调用合并在一起的方法，我们称其为自执行函数或立即执行函数。
function foo() {}; // 普通函数foo(); // 声明和调用分开执行// 将普通函数用小括号 () 包裹，然后再用 () 直接调用(function bar() {console.log('函数立即被执行了...');})();// 自执行函数一般都采用匿名函数(function () {console.log('自执行函数...');})();// 自执行函数也普通函数并无本质的区别，同样具有形参与实参。(function (name, age) {console.log(`大家好，我叫${name}, 我今年${age}岁了。`);})('小明', 18);
1.3-回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
1.2-回调函数———上课讲解
//※----回调函数------上课讲解// 声明 foo 函数function foo(arg) {console.log(arg);}// 普通的值做为参数foo(10);foo('hello world!');foo(['html', 'css', 'javascript'])// 函数也可以做为参数！！！！function bar() {console.log('函数也能当参数...');}foo(bar);--------------------------------------------------------------------------------//参数：是个函数，这个函数叫回调函数// 外面:fnfu(function () {console.log("****************")})let bth = document.querySelector("button")//回调函数：A函数作为参数传入别的函数B内部：A叫回调函数；B叫高阶函数// 回调：回头（未来才会）调用bth.addEventListener("click", function () { })
- 函数
bar做参数传给了foo函数，bar就是所谓的回调函数了！！！ - 我们回顾一下间歇函数
setInterval
function fn() {console.log('我是回调函数...');}// 调用定时器setInterval(fn, 1000);
fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
<script>// 调用定时器，匿名函数做为参数setInterval(function () {console.log('我是回调函数...');}, 1000);</script>
事件级别
2.1-介绍
事件级别：事件的发展历程
- DOM L0 ：是 DOM 的发展的一个版本；
document.getElementById("myButton").onclick = function () {alert('thanks');}
- DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
- DOM L2：使用
注册事件：有三个参数。（第三个参数未来讲）
let dom=document.getElementById("bth");dom.addEventListener("click",function(){aler('thanks');},false)
- DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。
- 焦点事件，当元素获得或者失去焦点时触发；
- 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
- 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
- 文本事件，当在文档中，输入文本时触发；
- 键盘事件，当用户通过键盘在页面上执行操作时触发；
2.2-L0与L2区别
- 注册：
- L0级别相当于是给dom节点这个对象上添加一个属性名和 方法，多次注册同一个事件类型会覆盖；
- L2注册同一个事件类型不会覆盖；
-上课讲解-事件级别-L0和L2的区别
button>点击</button><script>//L0:添加事件let btn = document.querySelector("button")//对DOM注册多次 同样事件btn.onclick = function () {console.log(1);}btn.onclick = function () {console.log(2);}btn.onclick = function () {console.log(3);}//btn对象： btn.onclick 给对象上onclick方法名 添加一个方法；// 给同一个名添加了多次// L2：对dom注册多次同样事件，不会被覆盖！btn.addEventListener("click", function () {console.log(1);})btn.addEventListener("click", function () {console.log(1);})</script>
移除：当为 DOM 元素添加了事件监听后，浏览器会【一直等待】着事件的触发，大量的事件监听是会有较大的性能耗费，如果确定某个 DOM 元素不再需要事件监听了，将事件监听移除可以提升浏览器的性能。
- L0：事件赋值为
null即可将事件移除 - L2：移除事件监听时要求回调函数必须为具名函数
- L0：事件赋值为
-上课讲解-事件级别-L0和L2移除的区别
//*事件级别-L0与L2移除的区别//需求：页面按钮，抽奖动作只有一次let get = document.querySelector("#get")get.onclick = function () {alert('你中将了！');//移除事件get.onclick = null;}-----------------------------------------------------------------------------//L2：添加事件监听，不会覆盖的// 事件移除，，最好在添加事件的时候，给函数取名字！方便用于移除；let btn = document.querySelector("button")//函数表达式let fn1 = function () {console.log(1);}let fn2 = function () {console.log(2);}btn.addEventListener("click", fn1);btn.addEventListener("click", fn2);//移除事件监听：let remove = document.querySelector("remove");remove.addEventListener("click", function () {btn.removeEventListener("click", fn1)});
// 获取按钮元素let btn1 = document.querySelector('.btn1');let btn2 = document.querySelector('.btn2');// 为 btn1 添加事件监听btn1.addEventListener('click', handler);// 为 btn2 添加事件监听btn2.addEventListener('click', function () {// 移除 btn1 按钮的点击合件btn1.removeEventListener('click', handler);})
鼠标事件1
- 将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。
3.1-mouseover
- 监听鼠标是否移入某个 DOM 元素
box.addEventListener(‘mouseover’, function () {
console.log(1)
});
3.2-mouseout
mouseout监听鼠标是否移出 DOM 元素
3.3-案例：焦点图
- 鼠标移入时，显示对应图片
for (let i = 0; i < lis.length; i++) {// 给每个小li绑定鼠标经过事件lis[i].addEventListener('mouseover', function() {// 样式for (let j = 0; j < lis.length; j++) {lis[j].classList.remove("active")}this.classList.add("active");// 对应数据img.src = this.dataset.src;h3.innerHTML = this.dataset.info;})}
for (let i = 0; i < lis.length; i++) {// 给每个小li绑定鼠标经过事件lis[i].addEventListener('mouseover', function() {// 样式this.classList.add("active");// 对应数据img.src = this.dataset.src;h3.innerHTML = this.dataset.info;})lis[i].addEventListener('mouseout', function() {// 样式this.classList.remove("active");})}
鼠标事件2
4.1-mousemove
- 监听鼠标是否在 DOM 元素上移动
box.addEventListener('mousemove', function () {});
- 在文档上移动时
document.addEventListener('mousemove', function () {});
4.2-鼠标位置
//事件：mousemove// 事件对象：把用户某次出发行为操作当作一个对象处理，比如：获取用户触发操作位置// 1.必须在事件执行函数内先写个形参 e event ev// 2.属性// e.offsetX 以当前事件源dom节点左上角为原点// e.pageX 以页面左上角为原点（可能会被卷入到上面）// e.clientX 以可视区域左上角为原点；----------------------------------------------------------------------------DOM节点.on+事件类型 = function(e){};DOM节点.addEventListener(事件类型,function(e){// 可视区域坐标系 - 以浏览器的可视区域的左上角为原点的e.clientXe.clientY// body页面坐标系 - 以body的左上角作为原点e.pageXe.pageY});// 坐标系：定位；// 页面写一个盒子，绝对定位，参考bodybody的左上角作为原点// 固定定位的时候 浏览器的可视区域的左上角为原点的
课堂小案例-鼠标移动
<div></div>//步骤：//1.添加事件监听let div = document.querySelector("div");//鼠标位置：e.pageX E.pageYdocument.addEventListener("mousemove", function (e) {div.style.top = e.pageY + 'px'div.style.left = e.pageX + 'px'});
4.3-案例：鼠标跟随
- 步骤：
- 鼠标移动：给document注册事件，mousemove;
- 跟着移动：给img盒子设置：pageX,pageY;
document.onmousemove = function(e) {// 鼠标在当前窗口的位置var x = e.clientX;var y = e.clientY;// 鼠标相对于 body 左上角的位置；// var x = e.pageX;// var y = e.pageY;img.style.top = y + 'px';img.style.left = x + 'px';};
鼠标事件3
5.1-mousedown
- 监听鼠标按键是否按下
box.addEventListener('mousedown', function () {this.innerText = '按下了鼠标键...'})
5.2-mouseup
监听鼠标按键是否抬起
box.addEventListener('mouseup', function () {this.innerText = '按下了鼠标键...'})
-案例：选中文字动态效果
- 分析：
- 鼠标落下时，才有注册鼠标移动事件
- 鼠标谈起时，无移动事件；
let img = document.querySelector("img");document.onmousedown = function() {document.onmousemove = function(e) {img.style.display = 'block';img.style.left = e.clientX + 10 + "px";img.style.top = e.clientY + 10 + "px";};}document.onmouseup = function() {document.onmousemove = null;img.style.display = 'none';};
事件对象e
- 任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
- e：到底是什么？把用户的一次行为也看做对象！万物皆对象！
// 可视区域坐标系 - 以浏览器的可视区域的左上角为原点的// 可视区域：就是元素用来显示内容的区域事件对象.clientX事件对象.clientY// 页面坐标系 - 以body的左上角作为原点事件对象.pageX事件对象.pageY// 事件的目标对象，用户点击到谁上面了事件对象.target// 事件的绑定对象，就是是绑定在哪个DOM节点上 和 this一样// 前面说的事件源，e.currentTarget this
若有收获，就点个赞吧
0 人点赞
