-
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；
event.currentTarget : 在事件冒泡過程中的當前DOM元素
查看全部 -
mark2
查看全部 -
$('body').on('click', 'div', function(e) {
? ? ? ?alert(e.target.textContent)
? ? })
e代表當前事件對象,e.target表示當前觸發(fā)事件的元素。如果點擊a觸發(fā)的事件e.target就表示a元素，如果是點擊div觸發(fā)的事件，e.target就表示div元素
查看全部 -
focus，blur和focusin,focusout的區(qū)別
查看全部 -
事件委托?。。。?/p>
查看全部 -
mouserenter/mouseleave和mouseover/mouseout的區(qū)別
查看全部 -
觸發(fā)元素的事件類型
$("a").click(function(event)?{ ??alert(event.type);?//?"click"事件 });event.pageX 和 event.pageY：獲取鼠標當前相對于頁面的坐標
通過這2個屬性，可以確定元素在當前頁面的坐標值，鼠標相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
event.preventDefault() 方法：阻止默認行為
這個用的特別多，在執(zhí)行這個方法后，如果點擊一個鏈接（a標簽），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調用過了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
event.which：獲取在鼠標單擊時，單擊的是鼠標的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正?；陌粹o按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3
event.currentTarget : 在事件冒泡過程中的當前DOM元素
冒泡前的當前觸發(fā)事件的DOM對象, 等同于this.
this和event.target的區(qū)別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；
.this和event.target都是dom對象
如果要使用jquey中的方法可以將他們轉換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用；
查看全部 -
keydown事件：
當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發(fā)它。使用上非常簡單，與基本事件參數(shù)處理保持一致，這里使用不在重復了，列出使用的方法
//直接綁定事件 $elem.keydown(?handler(eventObject)?) //傳遞參數(shù) $elem.keydown(?[eventData?],?handler(eventObject)?) //手動觸發(fā)已綁定的事件 $elem.keydown()
?
keyup事件：
當用戶在一個元素上第一次松手鍵盤上的鍵的時候，就會觸發(fā)它。使用方法與keydown是一致的只是觸發(fā)的條件是方法的
?
注意：
keydown是在鍵盤按下就會觸發(fā)
keyup是在鍵盤松手就會觸發(fā)
理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對于此事件類型表單元素是最合適的。
查看全部 -
? <h2>submit</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? <form id="target1" action="test.html">
? ? ? ? ? ? ? ? 回車鍵或者點擊提交表單：?
? ? ? ? ? ? ? ? <input type="text" value="輸入新的值" />
? ? ? ? ? ? ? ? <input type="submit" value="Go" />
? ? ? ? ? ? </form>
? ? ? ? </div>
? ? ? ? <div class="aaron">
? ? ? ? ? ? <form id="target2" action="destination.html">
? ? ? ? ? ? ? ? 回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉：?
? ? ? ? ? ? ? ? <input type="text" value="輸入新的值" />
? ? ? ? ? ? ? ? <input type="submit" value="Go" />
? ? ? ? ? ? </form>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? //回車鍵或者點擊提交表單
? ? $('#target1').submit(function(e) {
? ? ? ? alert('捕獲提交表達動作,不阻止頁面跳轉')
? ? });
? ? //回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉：
? ? $('#target2').submit(function() {
? ? ? ? alert('捕獲提交表達動作,阻止頁面跳轉')
? ? ? ? return false;
? ? });
? ? </script>
查看全部 -
當 textarea 或文本類型的 input 元素中的文本被選擇時，會發(fā)生 select 事件。
這個函數(shù)會調用執(zhí)行綁定到select事件的所有函數(shù)，包括瀏覽器的默認行為?？梢酝ㄟ^在某個綁定的函數(shù)中返回false來防止觸發(fā)瀏覽器的默認行為。select事件只能用于<input>元素與<textarea>元素
查看全部 -
<input>元素，<textarea>和<select>元素的值都是可以發(fā)生改變的，開發(fā)者可以通過change事件去監(jiān)聽這些改變的動作
input元素
監(jiān)聽value值的變化，當有改變時，失去焦點后觸發(fā)change事件。對于單選按鈕和復選框，當用戶用鼠標做出選擇時，該事件立即觸發(fā)。
?
select元素
對于下拉選擇框，當用戶用鼠標作出選擇時，該事件立即觸發(fā)
?
textarea元素
多行文本輸入框，當有改變時，失去焦點后觸發(fā)change事件
?
change事件很簡單，無非就是注意下觸發(fā)的先后行為
//監(jiān)聽input值的改變 $('.target1').change(function(e) { $("#result").html(e.target.value) }); //監(jiān)聽select： $(".target2").change(function(e) { $("#result").html(e.target.value) }) //監(jiān)聽textarea： $(".target3").change(function(e) { $("#result").html(e.target.value) })查看全部 -
在之前2.8與2.9節(jié)我們學過了表單處理事件focusin事件與focusout事件，同樣用于處理表單焦點的事件還有blur與focus事件
它們之間的本質區(qū)別:
是否支持冒泡處理
舉個簡單的例子
<div> ??<input?type="text"?/> </div>
其中input元素可以觸發(fā)focus()事件
div是input的父元素，當它包含的元素input觸發(fā)了focus事件時，它就產生了focusin()事件。
focus()在元素本身產生，focusin()在元素包含的元素中產生
blur與focusout也亦是如此
focus不觸發(fā)冒泡事件
blur不觸發(fā)冒泡事件
查看全部 -
? ? <h2>.focusout()方法</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? 點擊觸發(fā)失去焦點：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <div class="right">
? ? ? ? <div class="aaron1">
? ? ? ? ? ? 點擊觸發(fā)失去焦點并傳遞參數(shù)：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? //input失去焦點
? ? ? ? //給input元素增加一個邊框
? ? ? ? $("input:first").focusout(function() {
? ? ? ? ? ? ?$(this).css('border','2px solid red')
? ? ? ? })
? ? </script>
? ? <script type="text/javascript">
? ? ? ? //不同函數(shù)傳遞數(shù)據(jù)
? ? ? ? function fn(e) {
? ? ? ? ? ? ?$(this).val(e.data)
? ? ? ? }
? ? ? ? function a() {
? ? ? ? ? ? $("input:last").focusout('慕課網(wǎng)', fn)
? ? ? ? }
? ? ? ? a();
? ? </script>
查看全部 -
?<h2>.focusin()方法</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? 點擊聚焦：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <div class="right">
? ? ? ? <div class="aaron1">
? ? ? ? ? ? 點擊聚焦并傳遞參數(shù)：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? //input聚焦
? ? ? ? //給input元素增加一個邊框
? ? ? ? $("input:first").focusin(function() {
? ? ? ? ? ? ?$(this).css('border','2px solid red')
? ? ? ? })
? ? </script>
? ? <script type="text/javascript">
? ? ? ? //不同函數(shù)傳遞數(shù)據(jù)
? ? ? ? function fn(e) {
? ? ? ? ? ? ?$(this).val(e.data)
? ? ? ? }
? ? ? ? function a() {
? ? ? ? ? ? $("input:last").focusin('慕課網(wǎng)', fn)
? ? ? ? }
? ? ? ? a();
? ? </script>
查看全部 -
jq自定義事件
triggerHandler
trigger事件還有一個特性：會在DOM樹上冒泡，所以如果要阻止冒泡就需要在事件處理程序中返回false或調用事件對象中的.stopPropagation() 方法可以使事件停止冒泡
triggerHandler與trigger不同之處
triggerHandler不會觸發(fā)瀏覽器的默認行為，.triggerHandler( "submit" )將不會調用表單上的.submit()
.trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
使用 .triggerHandler() 觸發(fā)的事件，并不會在 DOM 樹中向上冒泡。 如果它們不是由目標元素直接觸發(fā)的，那么它就不會進行任何處理
與普通的方法返回 jQuery 對象(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最后一個處理的事件的返回值。如果沒有觸發(fā)任何事件，會返回 undefined
?
查看全部
舉報