一、焦點事件
焦點:使瀏覽器能夠區分用戶輸入的對象,當一個元素有焦點的時候,那么他就可以接收用戶的輸入
設置焦點方式:點擊、tab、js
onfocus:當元素獲取到焦點的時候觸發
onblur:當元素失去焦點的時候觸發
obj.focus();給指定的元素設置焦點
obj.blur();取消指定元素的焦點
obj.select();選擇制定元素里面的文本內容(用戶輸入的內容,可以操作可交互性元素的內容,例如P,div內的內容是無法全選的)
oText.onfocus=function(){
if(this.value=="請輸入內容"){
this.value="";
}
}
oText.onblur=function(){
if(this.value==""){
this.value="請輸入內容";
}
}
二、event事件對象
定義:當一個事件發生的時候,和當前這個對象發生的這個事件有關的一些詳細信息都會被臨時保存到一直指定地方——event對象,供我們在需要的時候調用
事件函數:事件調用的函數,一個函數是不是事件函數,不在定義的時候決定,而是取決於這個函數調用的時候
ie/chrome:event是內置全局對象
標准下:事件對象是通過事件函數的第一個參數傳入
如果一個函數是被事件調用的,那么 這個函數定義的第一個參數就是事件對象
兼容處理:vav ev=ev||event;
clientX:當一個事件發生的時候,鼠標到頁面可視區的距離
clientY:當一個事件發生的時候,鼠標到頁面可視區的頂部距離
onmousemove:當鼠標在一個元素上面移動的時候觸發
觸發的頻率不是像素,而是間隔時間,在一個指定的時間內(很短),如果鼠標的位置和上一次的位置發生了變化,那么就會觸發一次
三、事件流
1、事件冒泡:當一個元素接收到事件,會吧他接收到的所有傳播給他的父級
阻止冒泡:當前要阻止冒泡的事件函數中調用event.cancelBubble=true;
2、時間捕獲:當一個元素接收到事件
3、事件綁定
(1)給一個對象綁定一個事件處理函數:obj.onclick=fn; 會覆蓋前面綁定的函數,屬於賦值形式
(2)給一個對象的同一個事件綁定多個不同的函數:
ie:obj.attachEvent(事件名稱,事件函數) document.attachEvent("onclick",fn1);
-
- 沒有捕獲
- 事件名稱有on
- 事件函數執行的順序:標准ie——正序 非標准ie——倒序
- this指向window
標准:obj.addEventListener(事件名稱,事件函數,是否捕獲) document.addEventListener("click",fn2) //默認是false false:冒泡 true:捕獲
-
- 有捕獲
- 事件名稱沒有有on
- 事件函數執行的順序:正序
- this指向觸發該事件的對象
call()函數下的一個方法,call方法的第一個參數可以改變函數執行過程中的內部this的執行
調用函數:fn1()=fn1.call();
4、取消事件綁定
(1)第一種事件綁定取消方法:document.onclick=null;
(2)第二種事件綁定取消方法:
ie:obj.detachEvent(事件名稱,事件函數);
標准:obj.removeEventListener(事件名稱,事件函數,是否捕獲);
四、鍵盤事件
1、onkeydown:當鍵盤按鍵按下的時候觸發,如果按下不抬起,那么會連續觸發
onkeyup:當鍵盤按鍵抬起的時候觸發
2、event.keyCode:數字類型 鍵盤按鍵的值 鍵值
ctrlKey,shiftKey,altKey 布爾值
當一個事件發生的時候,如果ctrl||shift||alt是按下的狀態,返回true
不是所有元素都能夠接收鍵盤事件,能夠響應用戶輸入的元素,能夠接收焦點的元素就能夠接收鍵盤事件
3、如何取消連續輸入時間間隔
五、事件默認行為
1、定義:當一個事件發生的時候,瀏覽器自己會默認做得事情
2、如何阻止?
(1)當前這個行為是什么事件觸發的,然后在這個事件處理函數中使用return false;
(2)oncontextmenu:右鍵菜單事件,當右鍵菜單(環境菜單)顯示處理的時候觸發
六、拖拽事件
1、setCapture //設置全局捕獲,當我們給一個元素設置全局捕獲以后,那么這個元素就會監聽后續發生的所有事件,當有事件發生的時候,就會被當前設置了全局捕獲的元素所觸發
ie:有,並且有效果
ff:有,但是沒有效果
chrome:沒有
釋放全局捕獲:releaseCapture
七、鼠標滾輪
ie/chrome : onmousewheel
event.wheelDelta(數字類型的值)
上:120
下:-120
firefox : DOMMouseScroll 必須用addEventListener
event.detail(數字類型的值)
上:-3
下:3
return false阻止的是 obj.on事件名稱=fn 所觸發的默認行為
addEventListener綁定的事件需要通過event下面的preventDefault();
八、cookie存儲數據
定義:當用戶訪問某個網站(網頁)的時候,我們可以通過cookie來像訪問者電腦上存儲數據
1、不同的瀏覽器存放cookie的位置不一樣,也是不能通用的
2、cookie的存儲是以域名形式進行區分的
3、cookie的數據可以設置名字的 document.cookie=“名字=值”——可讀可寫的屬性
4、一個域名下存放的cookie的個數是有限制的,不同的瀏覽器存放的個數不一樣
5、每個cookie存放的內容大小也是有限制的,不同的瀏覽器存放的大小不一樣
我們通過document.cookie來獲取當前網站下的cookie的時候,得到的字符串形式的值,他包含了當前網站下所有的cookie,他會把所有的cookie通過一個分號+空格的形式串聯起來
var oDate=new Date();
oDate.setDate(oDate.getDate()+5);
oDate.toGMTSring();
如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的時間:document.cookie = '名稱=值;expires=' + 字符串格式的時間;
cookie默認是臨時存儲的,當瀏覽器關閉進程的時候自動撤銷
內容最好編碼存放,encodeURI,解碼讀取:decodeURI
