一、对象添加、删除使用属性
<div class="ele"></div>
<script>
var ele=document.querySelector(".ele")
console.log(ele.info)
==>undefined //ele对象没有添加该属性
console.log(ele.log.name);
==>报错
//添加属性
ele.info="hello";
console.log(ele.info);
==>hello
//删除属性
del ele.info;
console.log(ele.log)
==>undefined //删除后属性又会消失
</script>
二、js操作标签中的全局属性
<style>
//css全局属性选择器
['alter':"ok"]{
backgroud:black;
}
</style>
<div class="ele" alter="ok"></div>//alter就是标签的全局属性
<script>
var ele=document.querySelector('[alter]');//通过全局属性获取标签对象
//获取全局属性值
var info=ele.getAttribute('alter');
console.log(info)
==>ok
//修改全局属性值
ele.setAttribute('alter','no ok');
var info1=ele.getAttribute('alter');
console.log(info1)
===>no ok
//给标签添加全局属性值，结合从css控制页面
ele.setAttribute('key','value');
</script>
三、事件高级(解决循环绑定产生的变量变质处理的两种方式)
1、第一种(将全局变量i添加到各自标签的属性中)
<style>
.box{
100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<script>
var divs=document.querySelectorAll('.box');
for (var i=0;i<divs.length;i++){
//将全局变量i添加到各自标签的属性中
divs[i].index=i;
divs[i].onclick=function () {
console.log(this.index);
}
}
</script>
2、第二种方式(将i改成块作用域)
<script>
var divs=document.querySelectorAll('.box');
for (let i=0;i<divs.length;i++){
divs[i].onclick=function () {
console.log(i);
}
}
</script>
3、函数闭包解决
//v1
<script>
var divs=document.querySelectorAll('.box');
for (var i=0;i<divs.length;i++){
(function (){
var index=i
divs[index].onclick=function () {
console.log(index);
}
})()
}
</script>
//v2
<script>
var divs=document.querySelectorAll('.box');
for (var i=0;i<divs.length;i++){
(function (index){
divs[index].onclick=function () {
console.log(index);
}
})(i)
}
</script>
//v3
<script>
var divs=document.querySelectorAll('.box');
for (var i=0;i<divs.length;i++){
(function (i){
divs[i].onclick=function () {
console.log(i);
}
})(i)
}
</script>
四、事件的绑定与取消
1、应用
<style>
div{
margin-top: 10px;
}
.box{
100px;
height: 100px;
background:lawngreen;
}
.btn{
height: 20px;
40px;
background: black;
color: white;
text-align: center;
line-height: 20px;
}
</style>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="btn">开始</div>
<script>
var boxs=document.querySelectorAll('.box');
var ele=document.querySelector('.btn');
//初始化给定标签行间式颜色
var count=0;
ele.onclick=init;
function beginColor(){
for (let i =0;i<boxs.length;i++){
boxs[i].style.backgroundColor='red'
}
}
function overInterface() {
for (let i=0;i<boxs.length;i++){
console.log(1111111111)
boxs[i].onclick=null;
count=0;
}
}
function changeDivColoe() {
for(let i =0;i<boxs.length;i++){
boxs[i].onclick=function () {
console.log(22222)
if (boxs[i].style.backgroundColor=="red"){
this.style.backgroundColor='black';
count++;
}else {
this.style.backgroundColor='red';
count--;
}
if (count==3){
overInterface()
//count==3&&overInterface();
}
}
}
}
//开始事件
function init() {
console.log(1);
beginColor();
changeDivColoe();
}
</script>
2、绑定事件的两种方式及取消方式
<style>
div{
50px;
height: 40px;
background: olive;
text-align: center;
line-height: 40px;
color: lawngreen;
margin-top: 10px;
}
</style>
<div class="event_on1">绑定一</div>
<div class="event_on2">绑定二</div>
<script>
//绑定事件的第一种方式（只能绑定一个事件）
var event_on1=document.querySelector('.event_on1');
console.log(event_on1);
event_on1.onclick=function () {
console.log(1)
};
event_on1.onclick=function () {
console.log(2)
};
//取消第一种绑定事件
evet_onclick=null;
//绑定事件的第二种方式(可以同时绑定两个时间)
var event_on2=document.querySelector('.event_on2');
console.log(event_on2);
var action=function () {
console.log("a")
}
event_on2.addEventListener('click',action);
event_on2.addEventListener('click',function () {
console.log("b");
});
//事件的移除,需要讲绑定事件的匿名函数赋值给一个变量，然后移除变量的内存地址
event_on2.removeEventListener('click',action)
</script>
五、事件对象的冒泡现象及解决方法
冒泡：触发子集绑定事件也会触发父集绑定的事件
<style>
.outer{
100px;
height: 100px;
background:paleturquoise;
}
.inner{
height: 50px;
50px;
background: black;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<body>
<script>
var outer=document.querySelector('.outer');
var inner=document.querySelector('.inner');
inner.onclick=function (a) {
//取消事件对象冒泡
a.cancelBubble=true;
console.log('inner')
};
outer.onclick=function () {
console.log('outer')
}