1 事件
事件添加
3个方法
1
<!-- 1 添加到元素的属性上面 --><button onclick="console.log(this.innerHTML)">按钮1</button>
2
<!-- 2 通过脚步添加到事件属性上面 --><script>const btn2 = document.querySelector('body button:nth-of-type(2)');// 添加事件btn2.onclick = function () {console.log(this.innerHTML);}// onclick 不能重复定义同一事件. 第3中的事件监听器可以// 移除事件// bth2.onclick=null;
3 （重要）
// 3 通过事件监听器添加事件// addEventListener(事件类型，事件回调方法，触发阶段)const btn3 = document.querySelector('body button:nth-of-type(3)')btn3.addEventListener('click', function () {console.log(this.innerHTML, '第一次');})btn3.addEventListener("click", function () {console.log(this.innerHTML, "第二次");});// 3.1 移除事件，通过回调添加的事件无法移除// 事件方法函数const handle = () => console.log(btn3.innerHTML, "第三次");btn3.addEventListener("click", handle);// 3.2 事件派发const btn4 = document.querySelector("body button:nth-of-type(4)");// 自定义事件const ev = new Event("click");let i = 0;btn4.addEventListener("click", function () {console.log("点击了广告, 共计: " + i + "元");i += 0.5;});// 分配dispatchEvent// btn4.dispatchEvent(ev);// 使用间歇式定时器来自动点击广告setInterval("btn4.dispatchEvent(ev)", 1000);
事件传递
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
// 事件传递:// 1. 捕获: 从最外层元素逐级向内直到事件的绑定者// 2. 目标: 到达事件目标// 3. 冒泡: 从目标再由内向外逐级向上直到最外层元素const lis = document.querySelectorAll("li");lis.forEach(li =>(li.onclick = ev => {// console.log(ev); 事件默认参数，默认事件对象// 事件对象: 保存着当前事件的所有信息// 事件类型// console.log(ev.type);// 事件绑定者console.log(ev.currentTarget);// 事件触发者// console.log(ev.target);// console.log(ev.currentTarget === ev.target);// 事件传递的路径console.log(ev.path);// 阻止事件冒泡ev.stopPropagation();}));// on+event: 不支持捕获,只有冒泡// li.onclick = function () {};// 捕获, 第三个参数是true表示事件在捕获阶段触发,false是冒泡(默认)
事件冒泡与事件代理
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>// 事件代理: 也叫"事件委托"const lis = document.querySelectorAll("li");// 遍历每个li,并逐个为它添加点击事件// lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));// 通过父节点添加点击事件（常用 重要） document.querySelector("ul").addEventListener("click", ev => {// 事件绑定者console.log(ev.currentTarget);// 事件触发者,通常是"事件绑定者"的子元素console.log(ev.target.innerHTML);});</script>
2 留言板
// 获取元素const msg = document.querySelector("input");const list = document.querySelector("#list");msg.onkeydown = ev => {// 键盘事件中,key表示按下的键名// console.log(ev.key);if (ev.key === "Enter") {// 非空判断if (ev.currentTarget.value.length === 0) {alert("内容不能为空");} else {// 将留言内容添加到列表中// 创建留言let str = `<li>${ev.currentTarget.value}</li>`;// 应该将最新的信息永远放在第一条list.insertAdjacentHTML("afterbegin", str);// 清空上一条留言ev.currentTarget.value = null;}}};
3 字符串常用函数
```javascript
// 1. concat()拼装let str = "html".concat(" css ", "php !", 888);console.log(str);// 2. slice(start, end):取子串const strs = "123456789"//strs.slice(2,4)// 34// 支持负数strs.slice(-3, -1)// 78// 3. substr(start(开始位置), length（数量）)res = strs.substr(0, 5);console.log(res); //12345// 4. trim():删除二端空格let psw = " root888 ";console.log(psw.length);// 14psw = " root888 ";console.log(psw.trim().length);// 7// 5. split() 将字符串打成数组res = strs.split("");console.log(res);// (9) ["1", "2", "3", "4", "5", "6", "7", "8", "9"]// 6. charAt(序号) 。返回序号位置上的字符res = strs.charAt(0)console.log(res); // 1// 7. indexOf() 定位字符串中某一个指定的字符首次出现的位置res= strs.indexOf(4)console.log(res);// 3// 8.lastIndexOf() 与indexOf方法类似，只不过它是从该字符串的末尾开始查找而不是从开头。// 9. replace(要替换的，替换成) 在字符串中用某些字符替换另一些字符。res =strs.replace(5,0)console.log(res);// 123406789// 10. match() 查找字符串中特定的字符，并且如果找到的话，则返回这个字符res = strs.match(23)console.log(res);// ["23", index: 1, input: "123456789", groups: undefined]
```