事件(上)
事件概述
用戶在瀏覽器上觸發(fā)一個操作,瀏覽器上會執(zhí)行相關(guān)的函數(shù)進(jìn)行處理? 這個稱為事件
1.用戶點擊注冊按鈕,瀏覽器會完成注冊的操作
事件的兩種模式
內(nèi)聯(lián)模式
腳本模式(常用)
<!-- 內(nèi)聯(lián)模式 -->
<buttononclick="alert(123)">123</button>
<!-- 腳本模式 -->
<!-- 采用對應(yīng)的分離? 將對應(yīng)的事件的處理函數(shù)進(jìn)行分離 -->
<buttononclick="handlerClick()">123</button>
<script>
functionhandlerClick(){
alert(123)
}
</script>
事件劃分
事件的執(zhí)行者? 元素
事件名? on開頭+對應(yīng)的名字
事件處理函數(shù)? function
//執(zhí)行者? 事件名
document.oncilck=function(){
? ? ? ? //處理函數(shù)
}
事件的分類
鼠標(biāo)事件 (mouse)
點擊的事件
click? 點擊
dblclick? 雙擊
mousedown? 鼠標(biāo)按下
mouseup? 鼠標(biāo)抬起
移進(jìn)
mouseenter
mouseover(子元素也會觸發(fā))
移出
mouseleave?
mouseout(子元素也會觸發(fā))
移動
mousemove
//獲取div
vardiv=document.querySelector("div")
//給div加事件
div.onclick=function(){//click點擊事件
console.log("點擊了");
}
//雙擊事件
div.ondblclick=function(){
console.log("雙擊了");
}
//鼠標(biāo)事件? onmouse開頭的事件
//移進(jìn)? 移出
div.onmouseenter=function(){
console.log("移進(jìn)去了");
}
div.onmouseleave=function(){
console.log("移出去了");
}
//over和out子元素也會重新觸發(fā)? 事件冒泡 子類觸發(fā)? 父類也會觸發(fā)
div.onmouseover=function(){
console.log("移進(jìn)");
}
div.onmouseout=function(){
console.log("移出");
}?
//鼠標(biāo)移動事件
div.onmousemove=function(){
console.log("鼠標(biāo)移動事件");
}
//先按下 后彈起? 再點擊
鍵盤事件 (key)
keyup? 彈起
keydown? 按下
keypress(字符鍵才觸發(fā)? 按下)
window.onkeydown=function(){
console.log("鍵盤按下");
}
window.onkeyup=(){
console.log("鍵盤彈起");
}
//字符鍵觸發(fā)的? 只有按字符的時候才觸發(fā)? tab ? ctrl
window.onkeypress=function(){
console.log("字符鍵按下");
}
HTML事件
load? 加載事件
unload? 卸載
select? 選擇
change修改
blur? 失去焦點
focus 獲取焦點
input? 輸入內(nèi)容
scroll? 滾動
submit? 提交
reset? 重置
//窗口加載
window.onload=function(){
console.log("加載");
}
window.onunload=function(){
console.log("卸載");
}
//html元素的一些事件
//表單元素
//獲取焦點事件
document.querySelector("input").onfocus=function(){
console.log("獲取焦點");
//focus方法可以直接獲取焦點
document.querySelector("input:nth-child(2").focus()
}
//失去焦點事件
document.querySelector("input").onblur=function(){
console.log("失去焦點");
}
document.querySelector("#context").onselect=dunction(){
console.log("選擇了");
}
//修改數(shù)據(jù)? 失去焦點
document.querySelector("input:nth-child(2)").oninput=function(){
console.log("修改數(shù)據(jù)了");
}
//vue? 雙向綁定的原理實現(xiàn)
document.querySelector("input:nte-child(2)").oninput=function(){
console.log("輸入數(shù)據(jù)");
}
//表單元素 form
document.querySelector("form").onsubmit=function(){
console.log("數(shù)據(jù)提交了");
}
//重置事件? form
document.querySelector("foem").onreset=function(){
console.log("數(shù)據(jù)重置了");
}
//scroll? 滾動欄? 滾動事件? 任何具備滾動欄的都可以添加
widdow.onscroll=function(){//回到頂部
console.log("滾動了");
}
setTimeout(function(){
//操作滾動欄滾動X軸Y軸
window.scrollTO(0,0)
},5000)
所有的函數(shù)都具備一個參數(shù) arguments(所有傳遞參數(shù)? 他是數(shù)組)
處理函數(shù)也同樣是函數(shù)? 同樣存在這個arguments
通過我們的比對我們發(fā)現(xiàn)這個arguments里面只一個參數(shù) 這個參數(shù)是一個event對象,(事件源對象)
由于我們的arguments[0]是或者對應(yīng)的arguments數(shù)組里面的第一個參數(shù)(第一個形參,所以我們可以在對應(yīng)的處理函數(shù)中直接聲明一個形參來接受我們arguments里面的數(shù)據(jù))
document.querySelector("button").onclick=function(e){
//e其實就是我們對應(yīng)的arguments[0]所以這個e就是我們的event對象
//建議形參的寫法為e或event
//兼容寫法
e=e||window.event//兼容寫法
console.log(e.altkey);
}
event事件源對象(window里面的)
event對象里面的屬性
位置相關(guān)屬性
vardiv=document.querySelector("div")
div.onclick=function(e){
e=e||window.enevt
console.log(e);
//event中的屬性
//位置屬性
console.log(e,x);//當(dāng)前鼠標(biāo)離對應(yīng)的最頂部的距離(不包含滾動欄的距離)不包含不可見距離
console.log(e,y);//與client效果一樣,但是有兼容問題,所以不常用
console.log(e,clientX);//當(dāng)前鼠標(biāo)離對應(yīng)的最頂部的距離(不包含滾動欄的距離)不包含不可見距離
console.log(e,clientY);
console.log(e,offsetX);//對應(yīng)在div里面的鼠標(biāo)位置x
console.log(e,offsetY);//對應(yīng)在div里面的鼠標(biāo)位置y
console.log(e,pageX);//當(dāng)前鼠標(biāo)離對應(yīng)的最頂部的距離(包含滾動欄的距離)包含不可見距離
console.log(e,pageY);
console.log(e,larerX);//在定位的時候基于自己,不定位的時候基于最頂部的距離? 包含不可見距離
console.log(e,larerY);
console.log(e,screenX);//離屏幕最左邊X的距離
console.log(e,screenY);//離屏幕最上邊的Y距離
offsetX 鼠標(biāo)離當(dāng)前元素的x距離
offsetY 鼠標(biāo)離當(dāng)前元素的Y距離
clientX 鼠標(biāo)離網(wǎng)頁最左的距離(不包含不可見部分)
clientY 鼠標(biāo)離網(wǎng)頁最頂部的距離(不包含不可見部分)
pageX 鼠標(biāo)離網(wǎng)頁最左的距離 (包含不可見部分)
pageY鼠標(biāo)離網(wǎng)頁最頂部的距離(包含不可見部分)
screenX 鼠標(biāo)離屏幕最左邊的距離
screenY鼠標(biāo)離屏幕最頂部的距離
按鍵相關(guān)屬性
ctrlKey
altKey
shiftKey
//三個按鍵是否按下(長按)先按下再操作,布爾類型的值
console.log(e,ctrlkey);//是否按下ctrl
console.log(e,shiftKey);//是否按下shift
console.log(e,altKey);//是否按下alt
console.log(e,button);//點擊的鼠標(biāo)的那個鍵
console.log(e,type);//事件觸發(fā)的類型
button(只針對與點擊事件)
左鍵是0 中間滾輪為1 右鍵為2
type 事件觸發(fā)類型
target 當(dāng)前觸發(fā)事件的對象
currentTarget 當(dāng)前加事件的對象
鍵盤輸入的相關(guān)屬性
key獲取對應(yīng)的按下的鍵
keyCode 獲取按下的鍵的ascii碼
charCode獲取keypress事件中的按鍵的ASCII碼
window.onkeydown=function(e){
//兼容? ie
e=e||window.event
//key獲取對應(yīng)的按下的鍵
console.log(e.key);//兼容問題
//keycode? 獲取對應(yīng)按下鍵的ASCII碼
console.log(e.keycode);//不管是大寫還是小寫獲取的都是大寫的ASCII碼
}
//只支持字符
window.onkeypress=function(e){
console.log(e.keycode);
//將ascii轉(zhuǎn)為對應(yīng)的字符串
console.log(String.fromCharCode(e.keycode));
//只在onkeypress里面才有用,也返回是ascii碼
console.log(e.charCode);
}
事件委托機(jī)制
將原本元素需要做的事件? 交給他的父元素
1.將事件給對應(yīng)的父元素
2.在父元素的事件中進(jìn)行判斷e.target
//事件委托(里面有多個相同的元素需要相同的事件)
//獲取父元素? 利用父元素的事件及對應(yīng)的e.target進(jìn)行判斷? 當(dāng)前你操作的元素的是哪一個
doucment.querySelector("ul").onclick=function(e){
e=e||window.event
//獲取當(dāng)前操作的元素li
if(e.target.nodeName=="LI"){
//操作
//排他思想
for(varj=0;j<this.children,length;j++){
this.children[j].style.backgroundColor=""
}
e.target.style.backgroundColor="red"
}
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//選中效果
//先獲取所有的li
varlis=document.querySelectorAll("li")
//再給對應(yīng)的li添加事件
for(vari=0;i<lis.length;i++){
//在事件里面進(jìn)行操作
lis[i].onclick=function(){
//排他思想
for(varj=0;j<this.parentElement.chlidren.length;j++){
this.parentElement.chlidren.length[j].style.backgroundColor=""
}
this.style.backgroundColor="red"
}
}
下面為正常選中效果,不做事件委托
