JS简单事件复习（1）

最新推荐文章于 2022-06-29 23:03:15 发布
最新推荐文章于 2022-06-29 23:03:15 发布
阅读量188 收藏
点赞数
分类专栏： JS学习 文章标签： JS事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43955202/article/details/90548641
版权

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>

未完

七月是我的生日
关注
专栏目录
JS基础知识复习（持续更新）
qq_66193208的博客
04-20 2872
前端必备技能JavaScript知识点汇总（根据哔哩哔哩视频学习总结的 纯手打），建议在学完html+css后进行学习，这部分代码量不是很多，如之前学过python、java语言等，在js中也会发现很多相通的东西。这部分是js中比较基础的东西，学过其他语言的可以快速过一下。后续也会更新高阶部分。
Javascript — 简单事件处理
weixin_42436355的博客
08-06 253
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...
简单的JS事件
zs1206986774的博客
10-13 139
简单的JS制作 1.开关灯 2.灯绳 3.获取时间 4.显示
JS 简单的事件
weixin_43220796的博客
05-12 139
实现鼠标滑过按钮时显示文本，滑出时隐藏文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> </style> </head> <body> <p id="text" style="width:100px;border: 1px soli
js简单事件
夜影鬼手的专栏
07-19 315
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>体验事件</title> <style type="text/css"> div{ color: red; font-size: 20px; /*鼠标
javascript简单事件
qa60014359的博客
07-22 271
绑定事件  为一个元素绑定事件，比如一个按钮，&lt;input type="button" id="btn" value="点击"/&gt;；通常我们的做法可以是： (1)、document.getElementById('btn').onclick = function(){} (2)、document.getElementById('btn').addEventListener('c...
node.js基础简单复习内容
03-28
以下是对Node.js基础的一些简单复习内容： 1. **事件驱动模型**： Node.js的核心设计是基于事件驱动的非阻塞I/O模型。这种模型使得Node.js能够高效地处理大量并发连接，特别适合于构建高并发、实时的网络应用，如...
CSS和Javascript简单复习资料
10-29
这里我们将对这两个主题进行简单的复习。 **CSS复习：** 1. **样式表类型**： - **内联样式表**：在HTML元素内部通过`style`属性直接设置样式，如`;">`。 - **嵌入式样式表**：放在`<head>`标签内的`<style>`...
JavaScript知识点复习.docx
最新发布
11-19
JavaScript知识点复习 JavaScript是一种广泛应用于互联网的直译式脚本语言，主要由ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）三大部分组成。ECMAScript是JavaScript的核心，它定义了语言的语法、类型...
js_简单事件处理
HZPHYT的博客
07-18 177
&lt;div onclick="clickD(this)"&gt;点我试试&lt;/div&gt; &lt;div onmouseover="overD(this)" onmouseout="outD(this)"&gt;鼠标移动试试&lt;/div&gt; function clickD(obj){ alert(obj.innerHTML); } function over
JS中简单的点击事件
m0_50266751的博客
09-14 7235
一.点击后弹出事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1" onclick="fun()">单击事件测试</p> </body> <script type="text/javascript">
简单的事件
萌萌程序员的博客
12-15 393
需求： 为三个按钮分别绑定点击事件，切换body样式 html代码： form onsubmit="" action=""> input type="button" value="1" name="start" id="one"> input type="button" value="2" name="stop" id="two"> input type=
简单事件
weixin_30657541的博客
11-24 110
<html><head><title>confirm</title><script type="text/javascript"> function confirmdemo(){ if(confirm("是否继续")){ alert("继续"); }else{...
Javascript 事件简单学习
weixin_46441425的博客
02-14 104
绑定事件的两种方式
JS的几个简单事件
Rjahty大漠
05-07 181
location="href" --&gt;发起一个连接(可以用按钮来做一个提交或请求) onmouseover="jsinfo" --&gt;当鼠标进入某区域时（在表格中应用于改变TR的颜色很实用） onmouseout="jsinfo" --&gt;当鼠标离开某一区域时 onblur="jsinfo" --&gt;当某控件失去焦点时触法...
简单事件处理
slb18220570825的博客
03-29 261
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;简单事件处理&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css"&gt;#info{ height:50px; widt
常见的事件
weixin_39427688的博客
04-17 654
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
JS事件汇总
von_ming的博客
06-29 4929
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
js一些简单的事件
Ant_tiny的博客
09-27 201
onClick 单击事件 onMouseOver 鼠标经过事件 onMouseOut 鼠标移出事件 onChange 文本内容改变事件 onSelect 文本框选中事件 onFocus 光标聚集事件 onBlur 移开光标事件 onLoad 网页加载事件 onUnload 关闭网页事件
SSD1信息 systems基础复习要点
"SSD1复习资料，是武汉大学国际软件学院王立威教授制作的一份关于《信息系统的导论》课程的复习材料，旨在帮助学生掌握基础的互联网技能、编程概念，为后续的Java课程及更高级的编程课程做好准备。这份资料以PPT的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值