JS简单事件复习（1）

最新推荐文章于 2022-06-29 23:03:15 发布

七月是我的生日

最新推荐文章于 2022-06-29 23:03:15 发布

阅读量175

点赞数

分类专栏： JS学习文章标签： JS事件

本文链接：https://blog.csdn.net/qq_43955202/article/details/90548641

版权

JS学习专栏收录该内容

30 篇文章 1 订阅

订阅专栏

JS简单事件复习（一）

一：如何绑定一个事件类型；
1.on 加一个事件类型 (基本等同于写在行间）

var oDiv = document.getElementsByClassName('box')[0];

oDiv.onclick = function(){
oDiv.style.background = "green";
}

优点：兼容性好
缺点：但是一个元素的同一个事件只能绑定一个事件处理函数。

var oDiv = document.getElementsByClassName('box')[0];

oDiv.onclick = function(){
console.log('a');
}
oDiv.onclick = function(){
console.log('b');
}

第二个事件处理函数覆盖了第一个。

2.obj.addEventListener(type,fn,false);(事件监听)

oDiv.addEventListener('click',function (){
alert('a');
},false)

可以为一个事件绑定多个处理程序。

oDiv.addEventListener('click',function (){
console.log('a');
},false)
oDiv.addEventListener('click',function(){
console.log('b');
},false)

根据事件出现先后打印a和b

oDiv.addEventListener('click',function (){
console.log('a');
},false)
oDiv.addEventListener('click',function(){
console.log('a');
},false)
// a a
//因为对象使用的函数地址不同所以两个事件处理程序同时打印a，会先后出现两个a
//当函数一样时，即设置外置的函数 test（），则只会打印一个a

3.IE9独有attachEvent

oDiv.attachEvent('onclick',function(){
consloe.log('a');
})

可以为一个事件绑定多个函数，而且同一个函数可以绑定多个事件。
小练习：
在这里插入图片描述

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i ++)
{
aLi[i].addEventListener('click',function(){
console.log(i);
},false)
}
// 打印 4 4 4 4 for循环执行完后i为4，形成了闭包

怎么解决呢？
1.用ES6的let

var aLi = document.getElementsByTagName('li');
for(let i = 0; i < aLi.length; i ++)
{
aLi[i].addEventListener('click',function(){
console.log(i);
},false)
}

2.使用立即执行函数

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++)
{
(function(j){
aLi[j].addEventListener('click',function(){
console.log(j);
},false)
}(i))
}

4.事件处理程序的运行环境
在这里插入图片描述
封装兼容性的addEvent方法：给一个dom元素添加任意类型的任意处理函数。

function addEvent(elem,type,handle){
if(elem.addEventListener)
{
elem.addEventListener(type,handle);
}
else if(elem.attachEvent)
{
elem.attachEvent('on'+ type,function(){
handle.call(elem);
})
}
else
{
elem['on'+type] = handle;
}
}

解除事件：
1.On型

oDiv.onclick = function(){
console.log('a');
}

oDiv.onclick = null;
//只能执行一次的事件：
oDiv.onclick = function(){
console.log('a');
oDiv.onclick = null;
}

2.addEvent型

var oDiv = document.getElementsByClassName('box')[0];
oDiv.addEventListener('click',test(),false)
function test(){
console.log('a');
} 
oDiv.removeEventListener('click',test(),false)

3.addattch型同上；

二：事件处理模型
事件冒泡和事件捕获：
事件冒泡：结构上嵌套关系的元素，会存在事件冒泡的功能，即同一事件，从子元素冒泡向父元素。（自底而上）

事件捕获：结构上嵌套关系的元素，会存在事件捕获的功能，即同一事件，从父元素捕捉到子元素。（自顶而下）
(IE没有捕获事件)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.box{
height: 300px;
width: 300px;
background: red;
}
.box1{
height: 200px;
width: 200px;
background: yellow;
}
.box2{
height: 100px;
width: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
<script>
var box = document.getElementsByClassName('box')[0];
var box1 = document.getElementsByClassName('box1')[0];
var box2 = document.getElementsByClassName('box2')[0];

box.addEventListener('click', function(){
console.log("box");
},false) //将false更改为true，为事件捕获
box1.addEventListener('click', function(){
console.log("box1");
},false) //将false更改为true，为事件捕获
box2.addEventListener('click', function(){
console.log("box2");
},false) //将false更改为true，为事件捕获
</script>
</body>
</html>

触发顺序，先捕获，后冒泡
（同一个元素绑定两个事件处理程序，一个捕获一个冒泡，则先执行事件捕获，或执行事件冒泡）
2.阻止事件冒泡
W3C标准：evevt.stop.Propagation();
IE独有：event.cancelBubble = true；
封装函数阻止事件冒泡：

function stopButtle(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancleButtle = true;
}
}

3.阻止默认事件
①return false
②evevt.preventDefault
③evevt.returnValue
封装方法：

function cancerHandler(event)
{
if(event.preventDefault)
{
evevt.preventDefault;
}
else{
evevt.returnValue = false;
}
}

4.事件源对象和事件委托

var box = document.getElementsByClassName('box')[0];
var box1 = document.getElementsByClassName('box1')[0];
//事件源对象

box.onclick = function(e)
{
var event = e || event;
var target = evevt.target || event.srcElement;
console.log(target);
}

运用事件源对象；
创建10个li，实现点击li打印吃li中的内容：

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function(e){
var evevt = e || event;
var target = evevt.target || event.srcElement;
console.log(target.innerText);
}
</script>
</body>

这种形式叫做事件委托：
事件委托：
利用事件冒泡，和事件源对象进行处理；
优点：不需要循环所有的元素一个个邦迪那事件。
当有新的子元素时不需要重新绑定事件。

索例小测试1：实现控制div属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .anniu{
        text-align: center;
    }
    .anniu input{
        width: 100px;
        height: 50px;
    }
    #box{
        width: 100px;
        height:100px;
        margin: 100px auto;
        background: black;
    }
    </style>
    <script>
    window.onload = function(){
        var oDiv = document.getElementById('box');
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oBtn3 = document.getElementById('btn3');
        var oBtn4 = document.getElementById('btn4');
        var oBtn5 = document.getElementById('btn5');

        oBtn1.onclick = function(){
            oDiv.style.width = "200px";
        }
        oBtn2.onclick = function(){
            oDiv.style.height = "200px";
        }
        oBtn3.onclick = function(){
            oDiv.style.background = "red";
        }
        oBtn4.onclick = function(){
            oDiv.style.display = "none";
        }
        oBtn5.onclick = function(){
            oDiv.style.cssText = "";
        }
    }
    //封装方法
    // var ChangeTheStyle = function(elem,attr,value){
    //         elem.style[attr] = value;    //1.元素；2.元素属性；3.属性的值  
    //                                      //把属性的值赋给相应元素的属性
    // }
    // window.onload = function(){
    //     var oDiv = document.getElementById('box');  //id获取元素 div
    //     var oBtn = document.getElementsByTagName('input');  //标签获取按钮
    //     var aAttr = ["width","height","background","display","display"];  //设置的元素属性
    //     var aValue = ["200px","200px","red","none","block"];  //设置元素属性的值

    //     for(var i = 0;i < oBtn.length; i++)
    //     {
    //        oBtn[i].index = i;  //给个索引来标记每一个按钮
    //        oBtn[i].onclick = function(){
    //            if(this.index == oBtn.length-1)
    //            {
    //                oDiv.style.cssText = "";  //相当于初始化元素的style
    //            }
    //            else{
    //                ChangeTheStyle(oDiv,aAttr[this.index],aValue[this.index]);  //调用函数
    //            }
    //        }
            
    //     }  
    // }
    </script>
</head>
<body>
    <div class="anniu">
        <input type="button" id="btn1" value="变宽">
        <input type="button" id="btn2" value="变高">
        <input type="button" id="btn3" value="变色">
        <input type="button" id="btn4" value="隐藏">
        <input type="reset" id="btn5" value="重置">
    </div>
    <div id="box">

    </div>
</body>
</html>

索例子小测试2：网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    window.onload = function(){
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oBtn3 = document.getElementById('btn3');
        var aLi = document.getElementsByTagName('li');
        var oBody =document.body;
    
    oBtn1.onclick = function(){
       for(var i =0;i < aLi.length; i++)
       {
       aLi[i].style.background = "red";
       }
       oBody.style.background = "pink";
    }
    
    oBtn2.onclick = function(){
        for(var i = 0; i <aLi.length; i++)
        {
            aLi[i].style.background = "green";
        }
        oBody.style.background = "lightgreen";
    }
    oBtn3.onclick = function(){
        for(var i = 0; i < aLi.length;i++)
        {
            aLi[i].style.background = "black";
        }
        oBody.style.background = "lightgray";
    }
    }
     
   
     
    
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            
        }
        body{
            background: pink;
        }
    .anniu1{
        position: absolute;
        left: 100px;
        width: 40px;
        height: 40px;
        background: red;
    }
    .anniu2{
        position: absolute;
        left: 180px;
        width: 40px;
        height: 40px;
        background: green;
    }
    .anniu3{
        position: absolute;
        left: 260px;
        width: 40px;
        height: 40px;
        background: black;
    }
    input{
        width: 40px;
        height: 40px;
        background: none;
    }
    #nav{
        position: absolute;
        left: 100px;
        top: 100px;
        width: 995px;
        height: 60px;       
    }
    #nav ul li{
       width: 160px;
       height: 60px;
       float: left;
       text-align: center;
       line-height: 60px;
       margin-left: 5px;
       background: red;
    }
    a{
      color:white;
      font-size: 20px;  
    }
    </style>
</head>

<body>
    <div class="anniu1"><input type="button" id="btn1"></div>
    <div class="anniu2"><input type="button" id="btn2"></div>
    <div class="anniu3"><input type="button" id="btn3"></div>
    <div id="nav">
        <ul id="ou1">
            <li><a href="#">新闻</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">旅游</a></li>
        </ul>
    </div>
</body>
</html>

小测试3：循环控制div变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bigbox{
            width: 460px;
            height: 150px;
            margin: 0 auto;
        }
        .small{
            width: 200px;
            height: 50px;
            margin: 0 auto;
            margin-top: 50px;
        }
    .box,.box1,.box2{
        width: 150px;
        height: 150px;
        background: black;
        display: inline-block;
        text-align: center;
    }
    input{
        width: 200px;
        height: 50px;    
    }
    </style>
    <script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        var oBtn = document.getElementById('btn1');
        var flag = 0;
        oBtn.onclick = function (){
            if(flag == 0)
            {
            for(var i = 1;i < aDiv.length;i++)
            {
                aDiv[i].style.background = 'red';
                flag = 1;
            }
        }
            else if(flag == 1)
                {
                for(var i = 1;i < aDiv.length;i++)
                {
                    aDiv[i].style.background = 'black';
                    flag = 0;
                }
            }
        }
    }
    </script>
</head>
<body>
    <div class="bigbox">
    <div class="box">

    </div>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</div>
<div class="small">
    <input type="button" id="btn1" value="点击更改div颜色">
</div>

</body>
</html>

未完

七月是我的生日

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS简单事件复习（1）

JS简单事件复习（一）一：如何绑定一个事件类型；1.on 加一个事件类型 (基本等同于写在行间）var oDiv = document.getElementsByClassName('box')[0];oDiv.onclick = function(){oDiv.style.background = "green";}优点：兼容性好缺点：但是一个元素的同一个事件只能绑定一个事...
复制链接

扫一扫

专栏目录