js高级方法(循环绑定变量变质、绑定与取消事件、冒泡现象)

时间:2019-06-17
本文章向大家介绍js高级方法(循环绑定变量变质、绑定与取消事件、冒泡现象)，主要包括js高级方法(循环绑定变量变质、绑定与取消事件、冒泡现象)使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、对象添加、删除使用属性

<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{
    width: 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{
        width: 100px;
        height: 100px;
        background:lawngreen;
    }
    .btn{
        height: 20px;
        width: 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{
        width: 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{
    width: 100px;
    height: 100px;
    background:paleturquoise;
}
.inner{
    height: 50px;
    width: 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')
    }

原文地址：https://www.cnblogs.com/chuwanliu/p/11042462.html

随机文章
Javascript知识点必读
最近更新