當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

發布時間：2025/3/15 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

transitionend過渡監聽事件：

過渡監聽事件transitionend指的是CSS3中過渡效果執行一次后觸發事件處理函數，如下案例：

<!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事件監聽類型為checked的input變化：
當input的checked屬性值發生改變時觸發事件函數。

classList屬性操作類名：

classList屬性是用來操作一個元素的類名的，element.classList返回的是一個類名的偽數組，其屬性還有幾個常用方法：
element.classList.add(‘類名’)添加一個類名；
element.classList.remove(‘類名’)移除某個類名；
element.classList.toggle(‘類名’)有則刪，無則加；

框架/對象事件：

指Frame/Object事件，

元素的創建：

1.document.write(‘標簽代碼及內容’)，如果在頁面加載完在創建的，頁面之前的內容會被覆蓋掉;
2.element.innerHTML=‘標簽代碼及內容’，這里還可以是innerText或textContent；3.document.createElement(‘標簽名’)等方式創建，如下文創建節點；得到一個對象；
4.利用element.insertAdjacentHTML()把字符串格式元素添加到父級元素中，括號中可以傳入兩個參數，第一個參數表示位置，第二個參數表示要插入的元素，第一個參數有：beforebegin元素自身前面、afterbegin元素內部第一個子節點前、beforeend元素內部最后一個子節點之后、afterend元素自身的后面

操作元素內容：
改變元素的內容：element.innerText 和element.innerHTML及element.textContent可以改變元素的內容，innerText僅僅改變的是元素的文本內容,IE8支持，而innerHTML還可以改變標簽：

<body><div id="box">鼠標移入</div><script>var box = document.getElementById('box');box.onmouseenter = function() {box.innerText = '鼠標移除';alert(box.textContent);};box.onmouseleave = function() {box.innerHTML = '<h1>innerHTML</h1>';};</script></body>

兼容代碼：

很多API在不同的瀏覽器存在兼容性問題，為了兼容更多的瀏覽器，通常會把可以實現相同功能的不同API通過條件語句都運用上，如果某瀏覽器不兼容某個API，那么就會返回undefined，因此可以通過判斷是否是undefined來實現兼容代碼：

<body><div id="testdiv"></div><script>function getEleById(iD) {return document.getElementById(iD);};// 設置文本的兼容代碼：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>

操作元素的樣式屬性：

操作元素的屬性有兩種方式：修改行內樣式：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自定義屬性操作：

實際開發中會給標簽添加很多自定義的屬性，特別是html5和css3中，但是自定義屬性的值是不能通過this.屬性名拿到的，同樣也是無法設置的，這里有特殊的方法：.getAttribute(‘屬性名’)拿到屬性值，.setAttribute(’屬性名‘，屬性值)設置屬性,.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')); //對應div的score值};};</script></body>

return false阻止跳轉:

超鏈接href屬性中有地址的話會跳轉，有的時候僅僅是點擊不需要跳轉，此時可以使用return false來阻止跳轉：

元素綁定相同事件：
給元素綁定事件的方式有三種：
1.element.on事件名=function(){}微軟特有；
2.element.addEventListener(‘事件名’,function(){},布爾值目前寫false);
3.element.attachEvent(‘on事件名’,function(){});

addEventListener和attachEvent可以給同一個元素綁定相同事件不同處理函數的多個事件，而element.on事件名=function(){}的方式只能綁定相同事件中一個：

它們在不同的瀏覽器存在兼容性，其兼容代碼如下：

元素解綁事件：

1.element.事件類型=null;可以把之前事件的指向重新設為null，null代表沒有事件處理函數，則事件不處理。

2.element.removeEventListener(‘事件類型’,命名函數名,布爾值一般用false)；需要注意的是：第二個參數傳入的是一個命名函數的名字，否則解綁事件不成功。

3.element.detachEvent(‘on事件類型’,命名函數名)；同樣第二個參數任然使用命名函數的名字。

上面方法中依然各自有兼容問題，為了兼容更多瀏覽器，其兼容代碼如下：

事件冒泡：

事件冒泡指多個元素嵌套有層次關系，且元素都注冊了相同事件，如果最里面的元素的事件被觸發，那么外面元素的事件也會自動觸發，但是里面的元素的事件不會被觸發。

阻止事件冒泡：window.event.cancelBubble = ‘true’；給事件添加此代碼后，事件冒泡到有此代碼的元素(包括此代碼的元素)，但是它也有兼容問題，另一種方法是在事件處理函數中傳入一個參數，這個參數調用.stopPropagation()方法,window.event可以用這里的參數代替：

<!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.事件目標階段：事件被觸發的事件元素，e.eventPhase的值為2表示目標階段；

3.事件冒泡階段：從里面的元素到外面的元素，e.eventPhase的值為3表示冒泡階段；

添加事件的方法中第三個參數布爾值就是控制事件的階段的，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>

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：求两条轨迹间的hausdorff距离_题
下一篇： ReactNative简介、开发环境、调