一.javascript事件
事件传递：
冒泡：最具体元素最先捕捉到事件，传递给最不具体的元素
捕获：最不具体的元素先捕获到事件，传递给最具体的元素
默认都是冒泡，使用捕获
elem.addEventlistener(事件类型，响应函数，是否为捕获)
elem.addEventlistener("click",doit,true)
event.stopPropagation();阻止事件传递
event.preventDefaule();阻止默认事件
例:
var son = document.querySelector(".son");
var parent = document.querySelector(".parent");
var container = document.querySelector(".container");
var a = document.querySelector("a");
a.addEventListener("click",function(e){
e.stopPropagation(); //阻止事件冒泡
e.preventDefault();//阻止默认事件
alert("哇,中奖了");
})
son.addEventListener("click",function(){
alert("son被点击了")
},false)
parent.addEventListener("click",function(){
alert("parent被点击了")
},false)
container.addEventListener("click",function(){
alert("container被点击了")
},false)
// addEventListener(事件类型,响应的函数,是否使用捕获)
// 捕获:事件最不具体的元素捕捉事件,传递给最具体的元素
/* son.onclick = function(e){
e.stopPropagation();
// 阻止事件传递
alert("son被点击了")
}
parent.onclick = function(){
alert("pare
nt被点击了")
}
container.onclick = function(){
alert("container被点击了")
} */
// 最小的元素先监听到事件,然后传递给父元素监听:事件的冒泡机制鼠标事件
mouseover 鼠标移入 mouseout 鼠标移出 mousedown 鼠标按下 mouseup 鼠标弹起
mousemove 鼠标移动 click 鼠标单击 dblclick鼠标双击
键盘事件
keypass 当用户按下键盘上的字符键触发，如果按住不放，会重复触发
keyup 键盘松开
keydown 键盘按下
event.keycode 键盘对应数字编码
event.which 等于keycode
例：
<body>
<h1>留言板</h1>
<div class="container">
<p>我是第一条默认留言</p>
<p>我是第二条留言</p>
</div>
<input type="text" placeholder="请留言" id="inp">
<script>
var inp = document.getElementById("inp");
var container = document.querySelector(".container");
// inp添加键盘事件keyup,如果是回车键
inp.addEventListener("keyup",function(event){
console.log(event,event.keyCode,event.key);
// 如果是enter键
if(event.keyCode==13){
// 创建个p
var p = document.createElement("p");
// 设置文本
p.innerText = inp.value;
// 插入到container
container.appendChild(p);
// 请求inpt
inp.value = '';
}
})
// 创建一个p标签,把inp文本放入p
// 让container插入p标签
</script>
</body>表单事件
change 值发生变化 inpu 真在输入
页面事件
load 加载 resize 窗口变化 scroll 滚动
事件代理
把事件注册到其共有的父元素上，通过事件的冒泡机制 event-target实现目标（本来注册给每个元素注册）
例：
<body>
<h1>留言板</h1>
<div class="container">
<p>我是第一条默认留言</p>
<p>我是第二条留言</p>
</div>
<input type="text" placeholder="请留言" id="inp">
<script>
var inp = document.getElementById("inp");
var container = document.querySelector(".container");
// 单击container里面的p标签弹出内容
/* var ps = container.querySelectorAll("p");
// 遍历ps 添加事件
ps.forEach(item=>{
item.onclick = function(){
// 弹出item的文本
alert(this.innerText);
}
}) */
container.addEventListener("click",function(event){
alert(event.target.innerText);
})
// 动态添加的p元素没办法绑定事件
// inp添加键盘事件keyup,如果是回车键
inp.addEventListener("keyup",function(event){
console.log(event,event.keyCode,event.key);
// 如果是enter键
if(event.keyCode==13){
// 创建个p
var p = document.createElement("p");
// 设置文本
p.innerText = inp.value;
// 插入到container
container.appendChild(p);
// 请求inpt
inp.value = '';
}
})
// 创建一个p标签,把inp文本放入p
// 让container插入p标签
</script>
</body>二.js和css常见错误
js常见错误：
Uncaught TypeError: Cannot read properties of null (reading 'classList')
Uncaught 没有捕捉到
TypeError类型错误
Cannot 不能
read 读
properties 属性
of null null的
不能读取null的属性（reading ‘classList’）
reading读
classList 类列表
当读取null的classList属性了发送了类型错误
引起的原因: swiper选择适合没有选择到值就null（选择器填错了）
swiper.js出错了,还在第1行
uncaught没有捕捉到
SyntaxError 语法错误
Unexpected 不希望，不应该的
token符号
‘<’ 不应存在
引起原因:script的src 地址填错了,hbuilderx默认返回一个404的网页
js文件是个html待'<' 报错
未捕捉到引用错误:b 没有定义
（没有定义就去使用它了）
25行发生的错误
Uncaught 没有捕捉到
SyntaxError:语法错误
Invalid不合法的
or或者
Unexpected 不应该出现的
token字符
第25行语法错误,标点符号错误
script写过src属性的不能在里面放入代码
常见错误.html:20 Uncaught TypeError: swiper.clone is not a function
20行发生了错误
uncaught TypeError没有捕捉到类型错误
: swiper.clone is not a function
.swiper.clone不是一个函数
swiper没有clone方法 大概率方法名写错了
css常见错误
-
css //注释不管用
-
上一行发生错误,下一行css也不管用
-
如果审查元素,没有发现你的的css
-
css引入发生错误
-
css选择器发生错误
如果审查元素发现你写的css,被划掉了
被划掉带感叹号,css语法错误
单纯比划掉,选择器权限不够
2693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
