事件
事件：事件是指可以被JavaScript偵測到的行為，是一種“觸發-回應”的機制，這些行為指的就是頁面的加載、滑鼠單擊頁面、鍵盤輸入等具體的動作，是實作頁面互動的方式，
事件的三要素
- 事件源：觸發事件的元素 (誰觸發了事件)
- 事件型別：如click單擊事件 (觸發了什么事件)
- 事件處理程式: 事件被觸發后所執行的代碼(函式形式)，也稱為事件處理函式
<body>
<button type="button" id="btn">單擊事件</button>
<button type="button" id="btn">單擊</button>
<script>
//獲取按鈕的物件
var btn = document.getElementById('btn');// 事件源
//給按鈕物件系結事件
btn.onclick = function(){// 事件型別為click
alert('單擊了按鈕');// 事件處理程式
}
</script>
</body>
事件注冊
事件注冊又稱為事件的系結，
傳統方式
DOM物件.事件名 = 事件處理程式
btn.onclick = function(){
事件處理程式
}
缺點：同一個物件的同一個事件只能注冊一個事件處理程式，后面注冊的程式會將前面注冊的程式覆寫掉(唯一性)
事件監聽方式
同一個物件的同一個事件可以添加多個事件處理程式
早期瀏覽器
DOM物件.attachEvent(type,callback)
//type引數：表示事件的型別 如click、change、focus等
//callback引數：是回呼函式 表示事件處理程式
標準瀏覽器
DOM物件.addEventListener(type,callback,[capture])
//type引數：表示事件的型別 如click、change、focus等
//callback引數：是回呼函式 表示事件處理程式
//capture引數：可選引數,用來指定事件處理的方式：true表示事件在捕獲階段處理 如果是false表示事件冒泡階段處理 默認為false
洗掉事件
DOM物件.事件名 = null
DOM物件.detachEvent(type,callback) //早期版本瀏覽器的洗掉
DOM物件.removeEventListener(type,callback) // 標準瀏覽器的洗掉
事件物件
事件物件：當事件被觸發后由系統自動生成，它是與事件有關的資料資訊的集合，在標準瀏覽器中會將一個event物件直接傳入到事件處理程式中，而早期版本的IE瀏覽器（IE 6~IE 8）中，僅能通過window.event才能獲取事件物件，
事件物件常用的屬性和方法
<button>事件物件</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function(e){
console.log(e.target)// 事件的觸發物件
console.log(e.type)// 事件的型別
console.log(this)// 事件系結的物件
}
</script>
事件阻止
事件阻止 可以通過事件物件的preventDefault()方法和returnValue屬性進行事件阻止
注意： 只有當cancelable為true才可以呼叫preventDefault()方法
阻止超鏈接跳轉
<body>
<a href="http://www.baidu.com">百度</a>
<script>
// 獲取超鏈接
var a = document.querySelector('a');
// 注冊click事件 阻止a標簽的默認事件 標準瀏覽器的寫法
a.addEventListener('click',function(e){// e在這里代表滑鼠mouseEvent 誰click e就是誰
e.preventDefault();
})
// 早期瀏覽器的寫法 推薦
a.onclick = function(e){
e.preventDefault();
e.returnValue;
}
</script>
</body>
事件委托
事件委托：將事件統一系結給共同的祖先元素，這樣當后代元素上的事件觸發時，會一直觸發到祖先元素從而通過祖先元素的回應函式來處理事件，
優點： 只操作一次DOM，可以提高程式的性能，
事件委托主要原理是事件冒泡
利用事件委托增刪鏈接
<button id="btn">添加鏈接</button>
<button id="btn2">洗掉鏈接</button>
<ul id="ul">
<li><a href="javascript:;" class="n">超鏈接1</a></li>
<li><a href="javascript:;" class="n">超鏈接2</a></li>
<li><a href="javascript:;" class="n">超鏈接3</a></li>
</ul>
<script>
window.onload = function () {
var ul = document.querySelector('#ul')
var btn = document.querySelector('#btn')
var btn2 = document.querySelector('#btn2')
btn.onclick = function () {
var li = document.createElement('li')
li.innerHTML = "<a href='javascript:;'>超鏈接</a>"
ul.appendChild(li)
}
btn2.onclick = function () {
var a = document.querySelectorAll('a')
ul.removeChild(ul.children[0])
ul.onclick = function (e) {
var a = document.querySelectorAll('a')
// 如果觸發事件物件是我們期望的元素 則執行否則不執行
// target 表示觸發事件的物件 this表示事件系結物件ul
for (var i = 0; i < a.length; i++) {
if (e.target == a[i]) {
alert('我是ul的單機回應函式')
}
}
}
}
</script>
滑鼠事件
滑鼠事件物件
滑鼠事件物件常用位置屬性
clientX:瀏覽器可視視窗區域的x坐標
clientY:瀏覽器可視視窗區域的Y坐標
pageX:檔案中x坐標
pageY:檔案中y坐標
screenX:螢屏中的x坐標
screenY:螢屏中的y坐標
CAD坐標練習
<style>
div{
position: absolute;
background-color: #bfa;
}
</style>
</head>
<body>
<div></div>
<script>
var sp = document.querySelector('div')
document.addEventListener('mousemove',function(e){
var x = e.pageX
var y = e.pageY
sp.style.left = x+'px'
sp.style.top = y+'px'
sp.innerHTML = '(x:'+x+',y:'+y+')'
})
</script>
</body>
鍵盤事件
用戶在使用鍵盤時觸發的事件
鍵盤事件物件（KeyBoardEvent ）其屬性keyCode回傳的是按鍵的ASCII碼值，通過ASCII碼值可以判斷出用戶按了哪個鍵
輸出用戶鍵盤按下的鍵
<body>
搜索：<input type="text">
<script>
var search = document.querySelector('input')
document.addEventListener('keyup',function(e){
alert('你按了'+String.fromCharCode(e.keyCode))
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290678.html
標籤：其他
上一篇：呼叫堆疊與執行背景關系------HDDevTeam 20級暑期JavaScript學習（1）
下一篇：react基本使用及其安裝