js 中用Dom2級事件處理函數(改變樣式)

来源:http://www.cnblogs.com/Ziksang/archive/2016/02/13/5188477.html
-Advertisement-
Play Games

下麵這些客戶端 javascript代碼用到了事件,它給一個很重要的事件--“load" 事件註冊了一個事件處理程式。同時展示了註冊”click“事件處理函數更高級的一種方法 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset=


下麵這些客戶端 javascript代碼用到了事件,它給一個很重要的事件--“load" 事件註冊了一個事件處理程式。同時展示了註冊”click“事件處理函數更高級的一種方法

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <script>
 9     //dom2級事件語法是 addEvenLisetener("event","執行函數內容")
10     window.onload = function(){    //設置當頁面載入時執行
11         var btn =document.getElementsByTagName("button") //獲取btn元素
12         for( var i = 0;i<btn.length;i++){   //把每個button元素便利出來
13             var button = btn[i]             
14             if(button.addEventListener){    //判斷游覽器的相容問題,如果是ie8以下的用的是else語用代碼段里的
15                 button.addEventListener("click",change)
16             }
17            else{
18                 button.attachEvent("onclick",change)
19             }
20 
21         }
22     }
23         function change(e){        //執行函數內容       
24             e.target.style.color ="red"     //著重解釋一下e.target什麼意思  ,e代表事件, target代表元素,合起來就是事件元素指的就是被監聽到的事件目標變樣式
25             e.target.style.background ="black"
26         }
27 </script>
28 <button>按鈕一</button>
29 <button>按鈕二</button>
30 <button>按鈕三</button>
31 <button>按鈕四</button>
32 <button>按鈕五</button>
33 </body>
34 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML中包含大量的標簽, 這些標簽在我們使用中發現會有小小的差別, 有的標簽用了之後不會有太大的佈局變化, 只是語義化, 而有的標簽卻會重起一行, 相當於自己回車了一次, 這就是不同標簽元素的分類不同造成的結果. 塊級元素 在HTML中, <div>, <p>, <h1>, <form>, <ul
  • 用Object.definedproperties 一次性添加或修改多個屬性的特性和值。 1 <script> 2 var obj ={} 3 Object.defineProperties(obj,{ 4 x:{value:1,writalbe:true,configurable:true,enu
  • 我從網上收集一個jquery星級插件的,它只支持一個頁面中使用一次,多次使用的話會發生衝突,達不到我項目的需求,沒辦法,只能修改它, 效果圖如下: css所需背景圖片: 二話不說,帖代碼: html代碼 <div class="xing"> <span style="float: left">總體評
  • 前世今生 Git是誰開發的?為什麼要問這個問題,天朝的我們只管用軟體就是了管誰開發幹啥,好了別急,請聽我一一道來。Git是由李納斯·托沃茲(Linus Torvalds),這個英文名還是查渡娘找到的,英語好難呀!大伙兒有沒有發現這個Linus和Linux(Server操作系統)只有一詞之隔,邏輯好的
  • 當人們剛接觸佈局的時候都比較傾向於使用定位的方式。因為定位的概念看起來好像比較容易掌握。錶面上你確切地指定了一個塊元素所處的位置那麼它就會坐落於那裡。可是定位比你剛看到的時候要稍微複雜一點。對於定位來說,有一些東西會絆倒新手,所以在它成為你的慣用技巧前你需要掌握它們。 一旦你更深入地瞭解了它是怎麼運
  • 1.css font的簡寫規則 當我們寫字體樣式的時候,我們也許會這樣子寫 font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family
  • Javascript,是從類型(type)開始,這些類型在JS中分為兩大類:原生類型與對象類型。原生類型包括:number,string, boolean, null, undefined;剩下的非原生類型對象都屬於對象類型,包括:object, array, function等,這裡的object
  • 這裡簡單的寫一些涉及到字體排版中常用到的屬性, 大家可以學習查看, 也可以mark下以後看. font-family: "Micrsoft Yahei"; 設置字體 font-size: 20px; 設置字型大小 color: red; 設置顏色 font-weight: bold; 文字加粗 font
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...