第六天的课
文章目录
事件添加
事件的添加
- 将事件添加到元素事件属性上
<button class="btn" onclick="console.log(this.textContent)">Click1</button>
- 使用 js 脚本动态添加事件属性的方式
- 取消事件使用 null
补充:使用 js 脚本时,onclick 这样的事件属性不允许重复定义同一个事件到同一个元素上
<button>Click2</button>
<button>Click3</button>
<script>
const btn2 = document.querySelector("button:nth-of-type(2)");
btn2.onclick = function () {
console.log(this.textContent);
};
btn2.onclick = function () {
this.style.color = "red";
};
// 控制台没有输出textcontent,说明第一个点击事件没有执行
btn2.onclick = null;
//取消事件
</script>
- 事件监听器/注册器
-
可以让同个元素拥有多个事件,添加多个效果
-
addEvenListener(“事件类型”,“事件回调(异步回调)”)
-
click 事件名称,不能有 on, onclick 是事件属性
-
移除事件监听器
通过回调函数添加的事件方法是不能被移除的
使用 removeEventListener
<button>Click3</button>
<script>
btn3.addEventListener("click", (ev) => console.log(ev.target.textContent));
btn3.addEventListener("click", (ev) => console.log(ev.target.textContent, 2));
const handle = () => console.log(btn3.textContent, 3);
btn3.addEventListener("click", handle);
//点击一次上面三个效果均有
btn3.removeEventListener("click", handle);
</script>
- 事件派发
- 将一个自定义的事件派发给指定的元素
- addEventListener(“事件类型”,“事件回调(异步回调)”)
<button>Click4</button>
<script>
const btn4 = document.querySelector("button");
//将一个自定义的事件派发给指定的元素
let i = 0;
btn4.addEventListener("click", function () {
console.log("点击了广告,你已经赚了:" + i + "元");
i++;
});
const ev = new Event("click");
// 每派发一次click,就会自动点击这个按钮
btn4.dispatchEvent(ev);
//创建一个定时器---定义在window窗口中的
setInterval("btn4.dispatchEvent(ev)", 1000); //每一秒钟
setInterval(() => btn4.dispatchEvent(ev), 1000); //每一秒钟
</script>
事件传递
- 捕获:从最外层元素逐级向内知道事件的绑定者
- 目标:到达事件目标
- 冒泡: 从目标由内向外逐级向上直到最外层元素
补充:addEventListener 的第三个参数是事件的传递机制:true 捕获阶段,flase,冒泡阶段(默认值)
// 在html中打印列表:ul>li{item$}*5
const items = document.querySelectorAll("li");
items.forEach(
(item) =>
(item.onclick = (ev) => {
console.log(ev.type);
//当前事件的触发者
console.log(ev.target);
// 当前事件的绑定者
console.log(ev.currentTarget);
console.log(ev.target === ev.currentTarget); //true
})
);
// 捕获: window, document html。。。
//window
window.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
//document
document.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
// html
document.documentElement.addEventListener(
"click",
(ev) => console.log(ev.currentTarget),
true
);
//body
document.body.addEventListener(
"click",
(ev) => console.log(ev.currentTarget),
true
);
//ul
document
.querySelector("ul")
.addEventListener("click", (ev) => console.log(ev.currentTarget), true);
// 冒泡
window.addEventListener("click", (ev) => console.log(ev.currentTarget), false);
//document
document.addEventListener(
"click",
(ev) => console.log(ev.currentTarget),
false
);
// html
document.documentElement.addEventListener(
"click",
(ev) => console.log(ev.currentTarget),
false
);
//body
document.body.addEventListener(
"click",
(ev) => console.log(ev.currentTarget),
false
);
//ul
document
.querySelector("ul")
.addEventListener("click", (ev) => console.log(ev.currentTarget), false);
事件委托
- 根据事件冒泡原理,子元素上的同名事件会自动传递到父元素上的同名事件
如果将事件直接绑定到父元素上,那么在子元素上点击是,会自动出发父元上的同名事件
// 在html中打印列表:ul>li{item$}*5
<script>
//第一步先获取全部的li
const items = document.querySelectorAll("li");
// 循环给所有li添加点击事件
items.forEach((item) => (item.onclick = (ev) => console.log(ev.currentTarget)));
// 此时事件的绑定者与事件的触发者不相同
// 事件的绑定者:父元素ul
// 事件的触发者: 子元素li
document.querySelector("ul").onclick = (ev) => {
console.log(ev.currentTarget); //--ul
console.log(ev.target); //--li
};
</script>
字符串方法
concat() 拼装
let str = "html".concat("css", "js", "php", "!", 888);
console.log(str); //htmlcssjsphp!888
slice(start,end)取子串
let res = "hello php.cn";
console.log(res.slice(0, 5));
//hello
res = str.slice(0);
// 从零开始读取
console.log(res);
//htmlcssjsphp!888
res = str.slice(6);
//从第六个开始读取
console.log(res); //sjsphp!888
// -1 是反向的第一个字符
res = str.slice(-6);
console.log(res);
//hp!888
res = str.slice(-2);
console.log(res); //88
substr(start,size):取子串
let str = "html".concat("css", "js", "php", "!", 888);
let res = "hello php.cn";
res = str.substr(0, 5);
console.log(res); //htmlc
res = str.substr(-6, 3);
console.log(res); //hp!
trim() 删除字符串两边的空白字符
let psw = " rot888 ";
console.log(psw.length); //13
console.log(psw.trim().length); //6
将字符串打散成数组 split()
let str = "html".concat("css", "js", "php", "!", 888);
res = str.split("");
console.log(res);
//(16) ['h', 't', 'm', 'l', 'c', 's', 's', 'j', 's', 'p', 'h', 'p', '!', '8', '8', '8']
//从一个邮箱中解析出用户名和邮箱地址
let email = "admin@php.cn";
res = email.split("@");
// 通过@来切割
console.log(res);
//['admin', 'php.cn']
数组常用方法
栈方法
-
栈:只允许在数组一端进行增减操作
-
push():尾部添加 入栈
-
pop():尾部删除: 出栈
-
unsift():在头部添加
-
shift():从头部删除
// push()
let arr = [];
console.log(arr.push(1, 2, 3));
4; //3
console.log(arr);
//(3) [1, 2, 3]
console.log(arr.push(4)); //4
console.log(arr); //(4) [1, 2, 3, 4]
// pop()
console.log(arr.pop()); //4
console.log(arr); //(3) [1, 2, 3]
console.log(arr.pop()); //3
console.log(arr); //(2) [1, 2]
// unsift() 和shift()
arr = [];
arr.unshift("a", "b", "c");
console.log(arr);
//['a', 'b', 'c']
arr.unshift("d");
console.log(arr);
//['d', 'a', 'b', 'c']
console.log(arr.shift()); //d
console.log(arr); //(3) ['a', 'b', 'c']
console.log(arr.shift()); //a
console.log(arr);
//(2) ['b', 'c']
join():与字符串 split()相反
- 参数:字符串连接符,默认是“,”逗号。
let arr = ["电脑", "西瓜", "外套"];
res = arr.join(",");
console.log(res);
//电脑,西瓜,外套-- ,是字符串连接符
concat() 拼接
- 和字符串的 concat 相同
console.log("hello".concat("php.cn")); //hellophp.cn
console.log("hello".concat(["php.cn"])); //hellophp.cn
slice()
- 取部分成员
let arr = [1, 2, 3, 4, 5];
let res = arr.slice(0, 3);
console.log(res);
//(3) [1, 2, 3]
res = arr.slice(-2);
console.log(res);
//(2) [4, 5]
splice()增删改
-
三个参数
- 第一个:删除从第几个数开始
- 第二个:决定删除的个数,若为 0 则不删除,默认删除
- 第三个:用来替换掉被删除的元素,若删除数为 0,则为传入
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
//删除
res = arr.splice(5); //打印删除的元素--删除从5开始到后面的部分
console.log(res); //(3) [6, 7, 8]
console.log(arr); //(5) [1, 2, 3, 4, 5]
res = arr.splice(2, 1);
console.log(res); //[3]
console.log(arr); //(4) [1, 2, 4, 5]
//新增--第三个参数
arr = [1, 2, 3, 4, 5];
//不删除元素,将第二个参数设置为0,但是要传入第三个参数
res = arr.splice(1, 0, 88, 99);
console.log(arr);
//(7) [1, 88, 99, 2, 3, 4, 5]
// 当要新增多个时,使用并归
res = arr.splice(1, 0, ...[88, 99, 66]);
console.log(arr);
//(10) [1, 88, 99, 66, 88, 99, 2, 3, 4, 5]
//更新
//删除元素,将第二个参数设为删除数量,但是要传入第三个参数,用来替换掉被删除的元素
arr = [1, 2, 3, 4, 5, 6, 4];
res = arr.splice(1, 3, ...[88, 99, 66]);
console.log(arr);
//(7) [1, 88, 99, 66, 5, 6, 4]