transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend過渡監(jiān)聽事件：
過渡監(jiān)聽事件transitionend指的是CSS3中過渡效果執(zhí)行一次后觸發(fā)事件處理函數(shù)，如下案例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {width: 200px;height: 200px;background: rgb(185, 9, 9);}div:hover {transform: translateX(500px);transition: all 10s;}</style></head><body><div></div></body><script>var divs = document.querySelector('div');divs.addEventListener('transitionend', function(e) {console.log(e);});</script></html>change事件監(jiān)聽類型為checked的input變化：
當(dāng)input的checked屬性值發(fā)生改變時(shí)觸發(fā)事件函數(shù)。
classList屬性操作類名：
classList屬性是用來操作一個(gè)元素的類名的，element.classList返回的是一個(gè)類名的偽數(shù)組，其屬性還有幾個(gè)常用方法：
element.classList.add(‘類名’)添加一個(gè)類名；
element.classList.remove(‘類名’)移除某個(gè)類名；
element.classList.toggle(‘類名’)有則刪，無(wú)則加；
框架/對(duì)象事件：
指Frame/Object事件，
元素的創(chuàng)建：
1.document.write(‘標(biāo)簽代碼及內(nèi)容’)，如果在頁(yè)面加載完在創(chuàng)建的，頁(yè)面之前的內(nèi)容會(huì)被覆蓋掉;
2.element.innerHTML=‘標(biāo)簽代碼及內(nèi)容’，這里還可以是innerText或textContent；3.document.createElement(‘標(biāo)簽名’)等方式創(chuàng)建，如下文創(chuàng)建節(jié)點(diǎn)；得到一個(gè)對(duì)象；
4.利用element.insertAdjacentHTML()把字符串格式元素添加到父級(jí)元素中，括號(hào)中可以傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)表示位置，第二個(gè)參數(shù)表示要插入的元素，第一個(gè)參數(shù)有：beforebegin元素自身前面、afterbegin元素內(nèi)部第一個(gè)子節(jié)點(diǎn)前、beforeend元素內(nèi)部最后一個(gè)子節(jié)點(diǎn)之后、afterend元素自身的后面
操作元素內(nèi)容：
改變?cè)氐膬?nèi)容：element.innerText 和element.innerHTML及element.textContent可以改變?cè)氐膬?nèi)容，innerText僅僅改變的是元素的文本內(nèi)容,IE8支持，而innerHTML還可以改變標(biāo)簽：
兼容代碼：
很多API在不同的瀏覽器存在兼容性問題，為了兼容更多的瀏覽器，通常會(huì)把可以實(shí)現(xiàn)相同功能的不同API通過條件語(yǔ)句都運(yùn)用上，如果某瀏覽器不兼容某個(gè)API，那么就會(huì)返回undefined，因此可以通過判斷是否是undefined來實(shí)現(xiàn)兼容代碼：
<body><div id="testdiv"></div><script>function getEleById(iD) {return document.getElementById(iD);};// 設(shè)置文本的兼容代碼：function setText(elements, texts) {if (elements.innerText) {elements.innerText = texts;} else if (elements.innerHTML) {elements.innerHTML = tests;} else {elements.textContent = texts;};};setText(getEleById('testdiv'), 'hello');</script></body>操作元素的樣式屬性：
操作元素的屬性有兩種方式：修改行內(nèi)樣式：element.style.屬性 = ‘屬性值’；修改類名改變樣式：element.calssName = ‘類名’
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#box {width: 200px;height: 200px;background: pink;}.red {color: red;font-size: 30px;}</style></head><body><div id="box">hello</div><script>var box = document.getElementById('box');console.dir(box);box.onmouseenter = function() {this.style.backgroundColor = 'skyblue';};box.onmouseleave = function() {this.className = 'red';};</script></body></html-Attribute自定義屬性操作：
實(shí)際開發(fā)中會(huì)給標(biāo)簽添加很多自定義的屬性，特別是html5和css3中，但是自定義屬性的值是不能通過this.屬性名拿到的，同樣也是無(wú)法設(shè)置的，這里有特殊的方法：.getAttribute(‘屬性名’)拿到屬性值，.setAttribute(’屬性名‘，屬性值)設(shè)置屬性,.removeAttribute(‘屬性名’)移除屬性，這兩種方法都是在DOM上操作的;
<body><div score='10'>明明</div><div score='20'>小花</div><div score='30'>阿杰</div><script>var divScore = document.getElementsByTagName('div');for (var i = 0; i < divScore.length; i++) {divScore[i].setAttribute('sx', i);divScore[i].onclick = function() {// alert(this.score); //undefinedthis.removeAttribute('sx'); //移除sx屬性console.log(this.getAttribute('score')); //對(duì)應(yīng)div的score值};};</script></body>return false阻止跳轉(zhuǎn):
超鏈接href屬性中有地址的話會(huì)跳轉(zhuǎn)，有的時(shí)候僅僅是點(diǎn)擊不需要跳轉(zhuǎn)，此時(shí)可以使用return false來阻止跳轉(zhuǎn)：
<script>var aId = document.getElementById('aid');aId.onclick = function() {alert('renter false阻止超鏈接跳轉(zhuǎn)');return false;};</script>元素綁定相同事件：
給元素綁定事件的方式有三種：
1.element.on事件名=function(){}微軟特有；
2.element.addEventListener(‘事件名’,function(){},布爾值目前寫false);
3.element.attachEvent(‘on事件名’,function(){});
addEventListener和attachEvent可以給同一個(gè)元素綁定相同事件不同處理函數(shù)的多個(gè)事件，而element.on事件名=function(){}的方式只能綁定相同事件中一個(gè)：
<script>element.addEventListener('click', function() {console.log('這是addEventListener事件的處理函數(shù)1');}, false);element.addEventListener('click', function() {console.log('這是addEventListener事件的處理函數(shù)2');}, false);element.attachEvent('onclick', function() {console.log('這是attachEvent事件的處理函數(shù)1');});element.attachEvent('onclick', function() {console.log('這是attachEvent事件的處理函數(shù)2');});</script>它們?cè)诓煌臑g覽器存在兼容性，其兼容代碼如下：
<script>// element為事件源，type為事件名，fn為事件處理函數(shù)function elementAddevent(element, type, fn) {if (element.addEventListener) {element.addEventListener(type, fn, false);} else if (element.attachEvent) {element.attachEvent('on' + type, fn);} else {element['on' + type] = fn;};};</script>元素解綁事件：
1.element.事件類型=null;可以把之前事件的指向重新設(shè)為null，null代表沒有事件處理函數(shù)，則事件不處理。
2.element.removeEventListener(‘事件類型’,命名函數(shù)名,布爾值一般用false)；需要注意的是：第二個(gè)參數(shù)傳入的是一個(gè)命名函數(shù)的名字，否則解綁事件不成功。
3.element.detachEvent(‘on事件類型’,命名函數(shù)名)；同樣第二個(gè)參數(shù)任然使用命名函數(shù)的名字。
上面方法中依然各自有兼容問題，為了兼容更多瀏覽器，其兼容代碼如下：
<script>function removeEvent(element, type, fname) {if (element.removeEventListener) {element.removeEventListener(type, fname, false);} else if (element.detachEvent) {element.detachEvent('on' + type, fname);} else {element['on' + type] = null;};};</script>事件冒泡：
事件冒泡指多個(gè)元素嵌套有層次關(guān)系，且元素都注冊(cè)了相同事件，如果最里面的元素的事件被觸發(fā)，那么外面元素的事件也會(huì)自動(dòng)觸發(fā)，但是里面的元素的事件不會(huì)被觸發(fā)。
阻止事件冒泡：window.event.cancelBubble = ‘true’；給事件添加此代碼后，事件冒泡到有此代碼的元素(包括此代碼的元素)，但是它也有兼容問題，另一種方法是在事件處理函數(shù)中傳入一個(gè)參數(shù)，這個(gè)參數(shù)調(diào)用.stopPropagation()方法,window.event可以用這里的參數(shù)代替：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;}#box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);}#box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);} #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').onclick = function() {console.log(this.id)};getEs('box2').onclick = function(e) {console.log(this.id);window.event.cancelBubble = 'true';e.stopPropagation();};getEs('box3').onclick = function() {console.log(this.id)};</script></html>事件三階段(事件流)：
1.事件捕獲階段：從外面的元素到里面的元素，e.eventPhase的值為1表示的是捕獲階段；
2.事件目標(biāo)階段：事件被觸發(fā)的事件元素，e.eventPhase的值為2表示目標(biāo)階段；
3.事件冒泡階段：從里面的元素到外面的元素，e.eventPhase的值為3表示冒泡階段；
添加事件的方法中第三個(gè)參數(shù)布爾值就是控制事件的階段的，false則為冒泡事件，true則表示的是捕獲事件：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;} #box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);} #box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);} #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box2').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box3').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);</script></html>提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求两条轨迹间的hausdorff距离_题
- 下一篇： ReactNative简介、开发环境、调