JavaScript-⑧程式碼
一.Event繫結事件
- 在html繫結
<!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</
點選按鈕：
- 物件給onclick賦值，這兩個都是DOM0級別。
注意：這次繫結事件會覆蓋之前在html繫結的事件
<!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"
點選之後只出現一個2click，說明這次事件將前面一次覆蓋
- DOM2繫結事件
<!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>
// 繫結事件1
//冒泡階段
function fn(){
alert("clicked");
}
// 繫結事件2,物件給onclick賦值，這兩個都是DOM0級別。
//這次繫結會覆蓋前一次（在html呼叫onclick的這種）
window.onload=function(){
let btn=document.getElementById("btn");
btn.onclick=function(){
alert("2clicked");
}
// 繫結事件3冒泡階段
btn.addEventListener("click",function(){
alert("3click");
})
}
</script>
</head>
<body>
<div>
<p id="p">
<button id="btn" onclick="fn()">點我</button>
</p>
</div>
</body>
</html>
點選按鈕之後：
完整原始碼：
<!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>
// 繫結事件1
//冒泡階段
function fn(){
alert("clicked");
}
// 繫結事件2,物件給onclick賦值，這兩個都是DOM0級別。
//這次繫結會覆蓋前一次（在html呼叫onclick的這種）
window.onload=function(){
let btn=document.getElementById("btn");
btn.onclick=function(){
alert("2clicked");
}
// 繫結事件3冒泡階段
btn.addEventListener("click",function(){
alert("3click");
})
//冒泡階段
let p=document.getElementById("p");
p.addEventListener("click",function(){
alert("p is clicked");//冒泡階段處理
})
}
// 問題：到底先點選什麼事件？形成兩個事件處理機制
// 下降：捕獲階段，目標階段，上傳：冒泡階段
</script>
</head>
<body>
<div>
<p id="p">
<button id="btn" onclick="fn()">點我</button>
</p>
</div>
</body>
</html>
效果：
依次彈出對話方塊
二.阻止事件event.stopPropagation（）;
<!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>
// 繫結事件1
//冒泡階段
function fn(){
alert("clicked");
}
// 繫結事件2,物件給onclick賦值，這兩個都是DOM0級別。
//這次繫結會覆蓋前一次（在html呼叫onclick的這種）
window.onload=function(){
let btn=document.getElementById("btn");
btn.onclick=function(event){
alert("2clicked");
}
// 繫結事件3冒泡階段
btn.addEventListener("click",function(){
alert("3click");
//阻止傳播
event.stopPropagation();
},true)
//冒泡階段
let p=document.getElementById("p");
p.addEventListener("click",function(){
alert("p is clicked");//冒泡階段處理
},true)
}
//事件是一個物件，有自己的屬性
</script>
</head>
<body>
<div>
<p id="p">
<button id="btn" onclick="fn()">點我</button>
</p>
</div>
</body>
</html>
效果：
三.阻止連結跳轉
- 第一種
<!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(){
let link=document.getElementById("link");
//冒泡事件
link.addEventListener("click",function(event){
alert("here");
//不執行事件的預設行為
event.preventDefault();
})
}
</script>
</head>
<body>
<a href="http://www.neusoft.edu.cn" id="link">東軟</a>
<!-- 不希望做預設的事件（跳轉a連結） -->
</body>
</html>
效果：點選連結後
- 第二種
<!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(){
let link=document.getElementById("link");
// dom0通過事件返回值false阻止事件
link.onclick=function(){
return false;
}
}
</script>
</head>
<body>
<a href="http://www.neusoft.edu.cn" id="link">東軟</a>
<!-- 不希望做預設的事件（跳轉a連結） -->
</body>
</html>
效果就是點選連結沒有反應
四.滑鼠移動 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 type="text/css">
#show{
width: 200px;
height: 200px;
background-color: blueviolet;
position: absolute;
}
</style>
<script>
window.onload=function(){
let show =document.getElementById("show");
show.addEventListener("mousemove",function(event){
event.target.style.left=(event.clientX-100)+"px";
event.target.style.top=(event.clientY-100)+"px";
// 事件處理的第一個引數必須是事件
})
}
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>
五.keyboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=
相關推薦
JavaScript （三）在HTML頁面上寫JavaScript程式碼
前面做了那麼多的鋪墊其實就是小試牛刀，看看JavaScript程式碼是什麼樣的。但是我們平時寫前端程式碼的時候又不是在瀏覽器的控制檯上寫的，而是寫在我們的HTML程式碼裡，那應該怎麼去寫呢?下面我們就來使用HBuilder這個軟體寫一下JS的程式碼吧。 首先呢，開啟HBuilder，然後
ESLint（JavaScript程式碼校驗）
概要
關於JavaScript的程式碼校驗，2016年5月以來大家一直使用jswatchdog，
2018年4月以後，從運維的角度上來說，我們更推薦使用ESLint。
關於ESLint的設定，我們更推薦有利於kintone自定義開發的eslint-config-kintone。
這篇
使用原生javascript程式碼寫node的上傳
服務端使用nodejs獲取客戶端傳遞的圖片和檔案資料 涉及模組：http,FileSystem,querystring,url等模組，還有get,post請求處理模組和靜態檔案管理模組 檔案上傳和圖片上傳到前端頁面原則上都是一致：主要通過post file資料 /* 首先require 載入兩個模組
JavaScript-⑧程式碼
一.Event繫結事件
在html繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="vie
JavaScript-⑤程式碼
陣列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devi
編寫可維護的javascript程式碼-讀書心得
開文抄襲一段原文: 程式設計風格和編碼規範是什麼？程式設計風格是編碼規範的一種，用來規約單檔案中程式碼的規劃。編碼規範還包含程式設計最佳實踐、檔案和目錄的規範及註釋等方面。
下面按照書的目錄進行整理一些心得
1. 基本格式化
縮排層級
分為兩種，使用製表符和空格符進行縮排，縮
JavaScript程式碼執行--下篇
客戶端JS時間線
Web瀏覽器建立Document物件,並且開始解析Web頁面,解析HTML元素和他們的文字內容後新增Element物件和Text節點到文件中.document.readystate屬性的值是"loading"
當HTML解析器遇到沒有async和def
精心收集的 95 個超實用的 JavaScript 程式碼片段（ ES6+ 編寫）
目錄
Array 陣列
Array concatenation (陣列拼接)
Array difference (陣列比較)
Array includes (陣列包含)
Array intersection (陣列交集)
Array remove (移除陣列中的
7個高效能JavaScript程式碼高亮外掛
對於喜歡寫技術部落格的同學來說，一定對程式碼高亮元件非常熟悉。一款優秀的JavaScript程式碼高亮外掛，將會幫助你渲染任何一種程式語言，包括一些關鍵字的著色，以及每行程式碼的縮排等。今天我們要來分享一些高效能的JavaScript程式碼高亮外掛，這些JavaScript程式碼高亮外掛將非常有效地
我怎麼能貶低Gitlab CI的Javascript程式碼?
我為web,我通常編寫Javascript程式碼使變小在上傳之前。 我在本地做一個專用工具(如UglifyJS),但我想稍微使用過程自動化Gitlab持續整合(因為我使用Gitlab這個專案)。
我的目標很簡單:某些事件上使用Gitlab CI貶低程式碼和輸出這些檔案我在一個方便的方式讓
湯姆大叔的部落格 -【1】編寫高質量JavaScript程式碼的基本要點
1、最小全域性變數(Minimizing Globals)
（1）JavaScript通過函式管理作用域。在函式內部宣告的變數只在這個函式內部，函式外面不可用。 （2）全域性變數就是在任何函式外面宣告的或是未宣告直接簡單使用的。 （3）每個JavaScript環境有一個全域性物件，當
谷歌瀏覽器除錯JavaScript程式碼
谷歌瀏覽器除錯JavaScript程式碼
由於在前端是一個弱型別語言，雖然現在增加了ESLint，Flow等靜態檢查，但是這些檢查工具只能幫你檢查出一些程式碼的顯式問題，很多隱藏的邏輯性問題我們只能通過console去輸出，但是有些時候打印出來的結果不盡人意，於是，我便找阿里的前輩學習瞭
幾維安全Javascript程式碼混淆（js加密）線上使用說明
幾維安全Javascript程式碼混淆是一項線上加密服務，使用者只需將JS檔案打包成zip包，提交到加密平臺，即可完成程式碼混淆、字串加密、屬性加密、呼叫轉換等多項保護措施，提高攻擊者分析Javascript程式碼邏輯的難度，從而保護核心程式碼。
功能一、程式碼混淆
Javascript程式
精心收集的48個JavaScript程式碼片段，僅需30秒就可理解
源文連結 ：https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates
該專案來自於 Github 使用者 Chalarangelo，目前已在 Github 上獲得了 50
測試把javascript程式碼放在網頁的底部，測試放在底部的js方法能否正常呼叫
測試把javascript程式碼放在網頁的底部，測試放在底部的js方法能否正常呼叫，看下執行效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試把java
30 行 Javascript 程式碼搞定智慧家居系統
本文首發於『阿里雲 IoT 開發者社群』，更多精彩物聯網內容歡迎前往瀏覽。
智慧家居可謂是今年物聯網的熱門領域，通過智慧單品和智慧音箱，人們已然把『智慧』兩個字變成了生活的理所應當。搭建雲上之家除了買買買，還能 DIY。依託阿里雲物聯網平臺，我們用 30 行程式碼來搞定一套智慧
高質量JavaScript程式碼基本要點彙總（持續更新）
本博文包括一些與程式碼不太相關的習慣，但對整體程式碼的建立息息相關，包括撰寫API文件、執行同行評審以及執行JSLint。這些習慣和最佳做法可以幫助你寫出更好的，更易於理解和維護的程式碼，這些程式碼在幾個月或是幾年之後再回過頭看看也是會覺得很自豪的。所以將不斷從專案中，日常累
三維圖形 ---- 三角形與直線碰撞原理（包含 JavaScript 程式碼）
//碰撞的三角形
var triangleVertices = new Float32Array([-1.9, 0.1, -0.1, -0.4, 1.9, 0.5, 0.6, 0.1, 4.7]);
//碰撞的直線
var lineVertices
改善javascript程式碼結構
首先看下常規開發中javascript非結構化組織程式碼
function appInit () {
//程式初始化操作
}
function appModule1 () {
//程式功能模組1
}
function appModule2 () {
//程式功能模組2
}
JavaScript-⑦程式碼
// 繫結事件1
//冒泡階段
function fn(){
alert("clicked");
}
// 繫結事件2,物件給onclick賦值，這兩個都是DOM0級別。
//這次繫結會