JS简单事件复习（1）

xiaoxiao2023-11-01 28

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元素添加任意类型的任意处理函数。

解除事件： 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变色

未完

最新回复(0)