-
event.pageX 和 event.pageY:獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo)
通過這2個屬性,可以確定元素在當(dāng)前頁面的坐標(biāo)值,鼠標(biāo)相對于文檔的左邊緣的位置(左邊)與 (頂邊)的距離,簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
event.preventDefault() 方法:阻止默認行為
這個用的特別多,在執(zhí)行這個方法后,如果點擊一個鏈接(a標(biāo)簽),瀏覽器不會跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調(diào)用過了
event.stopPropagation() 方法:阻止事件冒泡
事件是可以冒泡的,為防止事件冒泡到DOM樹上,也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
event.which:獲取在鼠標(biāo)單擊時,單擊的是鼠標(biāo)的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。event.which也將正?;陌粹o按下(mousedown 和 mouseupevents),左鍵報告1,中間鍵報告2,右鍵報告3
event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素
冒泡前的當(dāng)前觸發(fā)事件的DOM對象, 等同于this.
this和event.target的區(qū)別:
js中事件是會冒泡的,所以this是可以變化的,但event.target不會變化,它永遠是直接接受事件的目標(biāo)DOM元素;
.this和event.target都是dom對象
如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用;
查看全部 -
<div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>點擊:觸發(fā)一</li>
? ? ? ? ? ? ? ? <li>點擊:觸發(fā)二</li>
? ? ? ? ? ? ? ? <li>點擊:觸發(fā)三</li>
? ? ? ? ? ? ? ? <li>點擊:觸發(fā)四</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? //多事件綁定一
? ? ? ? $("ul").on('click',function(e){
? ? ? ? ? ?alert('觸發(fā)的元素是內(nèi)容是: ' + e.target.textContent)
? ? ? ? })
? ? </script>
查看全部 -
<h4>測試一</h4>
? ? <div class="left">
? ? ? ? on('mousedown mouseup')
? ? ? ? <div class="aaron">點擊觸發(fā)</div>
? ? </div>
? ? <button>點擊刪除mousedown事件</button>
? ? <script type="text/javascript">
? ? var n? = 0;
? ? //綁定事件
? ? $(".aaron:first").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text( '觸發(fā)類型:' +? (e.type) + ",次數(shù)" + ++n)
? ? ? ? ++n;
? ? })
? ? //刪除事件
? ? $("button:first").click(function() {
? ? ? ? $(".aaron:first").off('mousedown')
? ? })
? ?
? ? </script>
? ? <h4>測試一</h4>
? ? <div class="left">
? ? ? ? on('mousedown mouseup')
? ? ? ? <div class="aaron">點擊觸發(fā)</div>
? ? </div>
? ? <button>點擊銷毀所有事件off</button>
? ? <script type="text/javascript">
? ? var n? = 0;
? ? //綁定事件
? ? $(".aaron:last").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text( '觸發(fā)類型:' +? (e.type) + ",次數(shù)" + ++n)
? ? ? ? ++n;
? ? })
? ? //刪除事件
? ? $("button:last").click(function() {
? ? ? ? $(".aaron:last").off()
? ? })
? ?
? ? </script>
查看全部 -
<div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? <a>點擊這里</a>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? //給body綁定一個click事件
? ? //沒有直接a元素綁定點擊事件
? ? //通過委托機制,點擊a元素的時候,事件觸發(fā)
? ? $('body').on('click', 'a', function(e) {
? ? ? ?alert(e.target.textContent)
? ? })
? ? </script>
查看全部 -
<script type="text/javascript">
? ? //多事件綁定一
? ? $("#test2").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text('觸發(fā)事件:' + e.type)
? ? })
? ? </script>
? ? <h4>測試三</h4>
? ? <div class="right">
? ? ? ? 點擊觸發(fā):on(mousedown:fn1,mouseup:fn2)
? ? ? ? <div id="test3"></div>
? ? </div>
? ? <script type="text/javascript">
? ? //多事件綁定二
? ? $("#test3").on({
? ? ? ? mousedown: function(e) {
? ? ? ? ? ? $(this).text('觸發(fā)事件:' + e.type)
? ? ? ? },
? ? ? ? mouseup: function(e) {
? ? ? ? ? ? $(this).text('觸發(fā)事件:' + e.type)
? ? ? ? }
? ? })
? ? </script>
查看全部 -
//監(jiān)聽textarea元素中value的選中
? ? $('textarea').select(function(e) {
? ? ? ? alert(e.target.value);
? ? });
查看全部 -
event.pageX 和 event.pageY:獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo)
通過這2個屬性,可以確定元素在當(dāng)前頁面的坐標(biāo)值,鼠標(biāo)相對于文檔的左邊緣的位置(左邊)與 (頂邊)的距離,簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
event.preventDefault() 方法:阻止默認行為
這個用的特別多,在執(zhí)行這個方法后,如果點擊一個鏈接(a標(biāo)簽),瀏覽器不會跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調(diào)用過了
event.stopPropagation() 方法:阻止事件冒泡
事件是可以冒泡的,為防止事件冒泡到DOM樹上,也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
event.which:獲取在鼠標(biāo)單擊時,單擊的是鼠標(biāo)的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。event.which也將正?;陌粹o按下(mousedown 和 mouseupevents),左鍵報告1,中間鍵報告2,右鍵報告3
event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素
冒泡前的當(dāng)前觸發(fā)事件的DOM對象, 等同于this.
this和event.target的區(qū)別:
js中事件是會冒泡的,所以this是可以變化的,但event.target不會變化,它永遠是直接接受事件的目標(biāo)DOM元素;
.this和event.target都是dom對象
如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用;
查看全部 -
.on綁定事件?$("elem").off() 銷毀事件
查看全部 -
KeyPress主要用來接收字母、數(shù)字等ANSI字符,而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
查看全部 -
keydown是在鍵盤按下就會觸發(fā)
keyup是在鍵盤松手就會觸發(fā)
理論上它可以綁定到任何元素,但keydown/keyup事件只是發(fā)送到具有焦點的元素上,不同的瀏覽器中,可獲得焦點的元素略有不同,但是表單元素總是能獲取焦點,所以對于此事件類型表單元素是最合適的。
查看全部 -
select 選中事件
查看全部 -
change事件 監(jiān)聽改變
input元素
監(jiān)聽value值的變化,當(dāng)有改變時,失去焦點后觸發(fā)change事件。對于單選按鈕和復(fù)選框,當(dāng)用戶用鼠標(biāo)做出選擇時,該事件立即觸發(fā)。
?
select元素
對于下拉選擇框,當(dāng)用戶用鼠標(biāo)作出選擇時,該事件立即觸發(fā)
?
textarea元素
多行文本輸入框,當(dāng)有改變時,失去焦點后觸發(fā)change事件
查看全部 -
div是input的父元素,當(dāng)它包含的元素input觸發(fā)了focus事件時,它就產(chǎn)生了focusin()事件。
focus()在元素本身產(chǎn)生,focusin()在元素包含的元素中產(chǎn)生
blur與focusout也亦是如此
查看全部 -
focusout 失去焦點 事件
查看全部 -
方法一:$ele.focusin()
綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,一般用的比較少
<div id="test">點擊觸發(fā)<div>
$("ele").focusin(function(){
? ?alert('觸發(fā)指定事件')
})
$("#test").mouseup(function(){ ? ? $("ele").focusin() ?//指定觸發(fā)事件 });?
方法二:$ele.focusin( handler )
綁定$ele元素,每次$ele元素觸發(fā)點擊操作會執(zhí)行回調(diào)?handler函數(shù)
這樣可以針對事件的反饋做很多操作了
<div id="test">點擊觸發(fā)<div>
$("#test").focusin(function() {
? ?//this指向 div元素
});?
方法三:$ele.focusin( [eventData ], handler )
使用與方法二一致,不過可以接受一個數(shù)據(jù)參數(shù),這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題
<div id="test">點擊觸發(fā)<div>
$("#test").focusin(11111,function(e) {
? ?//this指向 div元素
? ?//e.data ?=> 11111 傳遞數(shù)據(jù)
});查看全部
舉報