-
jQuery表單事件之select事件
當(dāng) textarea 或文本類(lèi)型的 input 元素中的文本被選擇時(shí)，會(huì)發(fā)生 select 事件。
這個(gè)函數(shù)會(huì)調(diào)用執(zhí)行綁定到select事件的所有函數(shù)，包括瀏覽器的默認(rèn)行為?？梢酝ㄟ^(guò)在某個(gè)綁定的函數(shù)中返回false來(lái)防止觸發(fā)瀏覽器的默認(rèn)行為。select事件只能用于<input>元素與<textarea>元素
查看全部 -
<body>
? ? <h2>input、textarea與select</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">input：
? ? ? ? ? ? <input class="target1" type="text" value="監(jiān)聽(tīng)input的改變" />
? ? ? ? </div>
? ? ? ? <div class="aaron1">select：
? ? ? ? ? ? <select class="target2">
? ? ? ? ? ? ? ? <option value="option1" selected="selected">Option 1</option>
? ? ? ? ? ? ? ? <option value="option2">Option 2</option>
? ? ? ? ? ? </select>
? ? ? ? </div>
? ? ? ? <div class="aaron3">textarea：
? ? ? ? ? ? <textarea class="target3" rows="3" cols="20">多行的文本輸入控件</textarea>
? ? ? ? </div>
? ? </div>
? ? 輸出結(jié)果：
? ? <div id="result"></div>
? ? <script type="text/javascript">
? ??
? ? //監(jiān)聽(tīng)input值的改變
? ? $('.target1').change(function(e) {
? ? ? ? $("#result").html(e.target.value)
? ? });
? ? //監(jiān)聽(tīng)select：
? ? $(".target2").change(function(e) {
? ? ? ? $("#result").html(e.target.value)
? ? })
? ? ?//監(jiān)聽(tīng)textarea：
? ? $(".target3").change(function(e) {
? ? ? ? $("#result").html(e.target.value)
? ? })
? ? </script>
</body>
查看全部 -
ocus與blur事件：不支持冒泡，focusin與focusout支持冒泡
查看全部 -
<body>
? ? <h2>.focusin()方法</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? 點(diǎn)擊聚焦：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <div class="right">
? ? ? ? <div class="aaron1">
? ? ? ? ? ? 點(diǎn)擊聚焦并傳遞參數(shù)：<input type="text" />
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? //input聚焦
? ? ? ? //給input元素增加一個(gè)邊框
? ? ? ? $("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>
</body>
查看全部 -
當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候，例如：input元素，用戶在點(diǎn)擊聚焦的時(shí)候，如果開(kāi)發(fā)者需要捕獲這個(gè)動(dòng)作的時(shí)候，jQuery提供了一個(gè)focusin事件
查看全部 -
<body>
? ? <h2>.hover()方法</h2>
? ? <div class="left">
? ? ? ? <div class="aaron1">
? ? ? ? ? ? <p>觸發(fā)hover事件</p>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? // hover()方法是同時(shí)綁定 mouseenter和 mouseleave事件。
? ? // 我們可以用它來(lái)簡(jiǎn)單地應(yīng)用在 鼠標(biāo)在元素上行為
? ? $("p").hover(
? ? ? ? function() {
? ? ? ? ? ? $(this).css("background", 'red');
? ? ? ? },
? ? ? ? function() {
? ? ? ? ? ? $(this).css("background", '#bbffaa');
? ? ? ? }
? ? );
? ? </script>
</body>
查看全部 -
jQuery鼠標(biāo)事件之mouseenter與mouseleave事件
用交互操作中，經(jīng)常需要知道用戶操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部，因此jQuery提供了一個(gè)mouseenter和mouseleave的快捷方法可以監(jiān)聽(tīng)用戶移動(dòng)到內(nèi)部的操作
使用上非常簡(jiǎn)單，三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復(fù)，主要講講區(qū)別，下面以mouseenter為例：
mouseenter JavaScript事件是Internet Explorer專(zhuān)有的。由于該事件在平時(shí)很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時(shí)被觸發(fā)。任何HTML元素都可以接受此事件。
mouseenter事件和mouseover的區(qū)別
關(guān)鍵點(diǎn)就是：冒泡的方式處理問(wèn)題
查看全部 -
mouseenter JavaScript事件是Internet Explorer專(zhuān)有的。由于該事件在平時(shí)很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標(biāo)移入到元素上時(shí)被觸發(fā)。任何HTML元素都可以接受此事件。
查看全部 -
<body>
? ? <h2>mouseover與mouseout事件</h2>
? ? <h4>測(cè)試一</h4>
? ? <button>點(diǎn)擊：指定觸發(fā)mouseover事件</button>
? ? <script type="text/javascript">
? ? ? ? $('h2').mouseover(function(e) {
? ? ? ? ? ? alert('觸發(fā)h2元素綁定的mouseover')
? ? ? ? })
? ? ? ? $("button:eq(0)").click(function(e) {
? ? ? ? ? ? $('h2').mouseover() //指定觸發(fā)綁定的事件
? ? ? ? })
? ? </script>
? ??
? ??
? ? <h4>測(cè)試二</h4>
? ? <div class="left">
? ? ? ? <div class="aaron1">
? ? ? ? ? ? <p>鼠標(biāo)移進(jìn)此區(qū)域觸發(fā)mouseover事件</p>
? ? ? ? ? ? <a>進(jìn)入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：</a>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? var n = 0;
? ? ? ? //綁定一個(gè)mouseover事件
? ? ? ? $(".aaron1 p:first").mouseover(function(e) {
? ? ? ? ? ? $(".aaron1 a").html('進(jìn)入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：' + (++n))
? ? ? ? })
? ? </script>
? ??
? ??
? ? <h4>測(cè)試三</h4>
? ? <div class="right">
? ? ? ? <div class="aaron2">
? ? ? ? ? ? <p>鼠標(biāo)移動(dòng)：不同函數(shù)傳遞數(shù)據(jù)</p>
? ? ? ? ? ? <a>進(jìn)入元素內(nèi)部,mouseover事件觸發(fā)次數(shù)：</a>
? ? ? ? </div>
? ? </div>
? ? <br/>
? ? <script type="text/javascript">
? ? ? ? var n = 0;
? ? ? ? //不同函數(shù)傳遞數(shù)據(jù)
? ? ? ? function data(e) {
? ? ? ? ? ? $(".right a").html('mouseover事件觸發(fā)次數(shù)：' + (++n) + '<br/> 傳入數(shù)據(jù)為 ：'+ e.data)
? ? ? ? }
? ? ? ? function a() {
? ? ? ? ? ? $(".right p:first").mouseover('data = 慕課網(wǎng)', data)
? ? ? ? }
? ? ? ? a();
? ? </script>
</body>
查看全部 -
<body>
? ? <h2>.mousedown()方法</h2>
? ? <h4>測(cè)試一</h4>
? ? <button>彈出回調(diào)中的鼠標(biāo)鍵</button>
? ? <script type="text/javascript">
? ? //this指向button元素
? ? $("button:eq(0)").mousedown(function(e) {
? ? ? ? alert('e.which: ' + e.which)
? ? })
? ? </script>
? ? <h4>測(cè)試二</h4>
? ? <div class="test2">
? ? ? ? <p>$('button:first').mousedown(function(e) {alert(this)})</p>
? ? </div>
? ? <button>指定觸發(fā)事件</button>
? ? <script type="text/javascript">
? ? $('p').mousedown(function(e) {
? ? ? ? ? ? alert(e.target.textContent)
? ? ? ? })
? ? ? ? //this指向button元素
? ? $("button:eq(1)").mousedown(function() {
? ? ? ? $('p').mousedown() //指定觸發(fā)綁定的事件
? ? })
? ? </script>
? ? <h4>測(cè)試三</h4>
? ? <div class="test3">
? ? ? ? <p>$('.right').mousedown(1111, set)</p>
? ? </div>
? ? <button>不同函數(shù)傳遞數(shù)據(jù)</button>
? ? <script type="text/javascript">
? ? //不同函數(shù)傳遞數(shù)據(jù)
? ? function data(e) {
? ? ? ? alert(e.data) //1111
? ? }
? ? function a() {
? ? ? ? $("button:eq(2)").mousedown(1111, data)
? ? }
? ? a();
? ? </script>
</body>
查看全部 -
<body>
? ? <h2>.click()方法</h2>
? ? <h4>測(cè)試一</h4>
? ? <button>元素綁定事件,彈出回調(diào)中的this</button>
? ? <script type="text/javascript">
? ? ? ? //this指向button元素
? ? ? ? ?$("button:eq(0)").click(function() {
? ? ? ? ? ? alert(this)
? ? ? ? })
? ? </script>
? ? <h4>測(cè)試二</h4>
? ? <div class="test2">
? ? ? ? <p>$('button:first').click(function(e) {alert(this)})</p>
? ? </div>
? ? <button>指定觸發(fā)事件</button>
? ? <script type="text/javascript">
? ? ? ? $('p').click(function(e) {
? ? ? ? ? ? alert(e.target.textContent)
? ? ? ? })
? ? ? ? //this指向button元素
? ? ? ? $("button:eq(1)").click(function() {
? ? ? ? ? ? $('p').click() //指定觸發(fā)綁定的事件
? ? ? ? })
? ? </script>
? ? <h4>測(cè)試三</h4>
? ? <div class="test3">
? ? ? ? <p>$('.right').click(1111, set)</p>
? ? </div>
? ? <button>不同函數(shù)傳遞數(shù)據(jù)</button>
? ? <script type="text/javascript">
? ? ? ? //不同函數(shù)傳遞數(shù)據(jù)
? ? ? ? function data(e) {
? ? ? ? ? ? alert(e.data) //1111
? ? ? ? }
? ? ? ? function a() {
? ? ? ? ? ? $("button:eq(2)").click(1111, data)
? ? ? ? }
? ? ? ? a();
? ? </script>
</body>
查看全部 -
keydown/keyup理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類(lèi)型表單元素是最合適的。
查看全部 -
通過(guò)在<form>元素上綁定submit事件，開(kāi)發(fā)者可以監(jiān)聽(tīng)到用戶的提交表單的的行為
具體能觸發(fā)submit事件的行為：
<input type="submit">
<input type="image">
<button type="submit">
當(dāng)某些表單元素獲取焦點(diǎn)時(shí)，敲擊Enter（回車(chē)鍵）
上述這些操作下，都可以截獲submit事件。
這里需要特別注意：
form元素是有默認(rèn)提交表單的行為，如果通過(guò)submit處理的話，需要禁止瀏覽器的這個(gè)默認(rèn)行為 傳統(tǒng)的方式是調(diào)用事件對(duì)象??e.preventDefault()?來(lái)處理，?jQuery中可以直接在函數(shù)中最后結(jié)尾return?false即可
jQuery處理如下：
$("#target").submit(function(data)?{? ???return?false;?//阻止默認(rèn)行為，提交表單 });查看全部 -
div--->是一個(gè)不能聚焦的；
所以你聚焦和失去焦點(diǎn)在div元素是沒(méi)用的；
當(dāng)你設(shè)置focusin focuout的時(shí)候
點(diǎn)擊他的可聚焦子元素就會(huì)冒泡到div綁定的事件
當(dāng)你設(shè)置focus blur時(shí)：
你點(diǎn)擊子元素input，他不會(huì)向上傳，導(dǎo)致div不知道有這個(gè)事件；查看全部 -
triggerHandler與trigger的用法是一樣的，重點(diǎn)看不同之處：
triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit()
.trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素
使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在 DOM 樹(shù)中向上冒泡。 如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它就不會(huì)進(jìn)行任何處理
與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值。如果沒(méi)有觸發(fā)任何事件，會(huì)返回 undefined
?
查看全部
舉報(bào)