-
理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類型表單元素是最合適的。
在input元素上綁定keydown事件會(huì)發(fā)現(xiàn)一個(gè)問題：
每次獲取的內(nèi)容都是之前輸入的，當(dāng)前輸入的獲取不到
keydown事件觸發(fā)在文字還沒敲進(jìn)文本框，這時(shí)如果在keydown事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤事件前的文本，而keyup事件觸發(fā)時(shí)整個(gè)鍵盤事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤事件后的文本
當(dāng)瀏覽器捕獲鍵盤輸入時(shí)，還提供了一個(gè)keypress的響應(yīng)，這個(gè)跟keydown是非常相似，這里使用請(qǐng)參考keydown這一節(jié)，具體說說不同點(diǎn)
查看全部 -
通過在<form>元素上綁定submit事件，開發(fā)者可以監(jiān)聽到用戶的提交表單的的行為
具體能觸發(fā)submit事件的行為：
<input type="submit">
<input type="image">
<button type="submit">
當(dāng)某些表單元素獲取焦點(diǎn)時(shí)，敲擊Enter（回車鍵）
上述這些操作下，都可以截獲submit事件。
這里需要特別注意：
form元素是有默認(rèn)提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個(gè)默認(rèn)行為 傳統(tǒng)的方式是調(diào)用事件對(duì)象??e.preventDefault()?來處理，?jQuery中可以直接在函數(shù)中最后結(jié)尾return?false即可
jQuery處理如下：
$("#target").submit(function(data)?{? ???return?false;?//阻止默認(rèn)行為，提交表單 });查看全部 -
? ? <h3>事件委托，通過事件對(duì)象區(qū)別觸發(fā)元素</h3>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>點(diǎn)擊：觸發(fā)一</li>
? ? ? ? ? ? ? ? <li>點(diǎn)擊：觸發(fā)二</li>
? ? ? ? ? ? ? ? <li>點(diǎn)擊：觸發(fā)三</li>
? ? ? ? ? ? ? ? <li>點(diǎn)擊：觸發(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">點(diǎn)擊觸發(fā)</div>
? ? </div>
? ? <button>點(diǎn)擊銷毀所有事件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>
查看全部 -
<body>
? ? <h2>on事件委托</h2>
? ? <div class="left">
? ? ? ? <div class="aaron">
? ? ? ? ? ? <a>點(diǎn)擊這里</a>
? ? ? ? </div>
? ? </div>
? ? <script type="text/javascript">
? ? //給body綁定一個(gè)click事件
? ? //沒有直接a元素綁定點(diǎn)擊事件
? ? //通過委托機(jī)制，點(diǎn)擊a元素的時(shí)候，事件觸發(fā)
? ? $('body').on('click', 'a', function(e) {
? ? ? ?alert(e.target.textContent)
? ? })
? ? </script>
</body>
查看全部 -
? ? <h4>測試二</h4>
? ? <div class="left">
? ? ? ? 點(diǎn)擊觸發(fā)：on('mousedown mouseup')
? ? ? ? <div id="test2"></div>
? ? </div>
? ? <script type="text/javascript">
? ? //多事件綁定一
? ? $("#test2").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text('觸發(fā)事件：' + e.type)
? ? })
? ? </script>
查看全部 -
? ? <h4>測試二</h4>
? ? <div class="left">
? ? ? ? 點(diǎn)擊觸發(fā)：on('mousedown mouseup')
? ? ? ? <div id="test2"></div>
? ? </div>
? ? <script type="text/javascript">
? ? //多事件綁定一
? ? $("#test2").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text('觸發(fā)事件：' + e.type)
? ? })
? ? </script>
查看全部 -
? ? <h4>測試三</h4>
? ? <div class="right">
? ? ? ? 點(diǎn)擊觸發(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>
查看全部 -
<script type="text/javascript">
? ? //監(jiān)聽鍵盤按鍵
? ? //獲取輸入的值
? ? $('.target1').keydown(function(e) {
? ? ? ? $("em:first").text(e.target.value)
? ? });
? ? //監(jiān)聽鍵盤按鍵
? ? //獲取輸入的值
? ? $('.target2').keyup(function(e) {
? ? ? ? $("em:last").text(e.target.value)
? ? });
? ? </script>
查看全部 -
?<script type="text/javascript">
? ? //回車鍵或者點(diǎn)擊提交表單
? ? $('#target1').submit(function(e) {
? ? ? ? alert('捕獲提交表達(dá)動(dòng)作,不阻止頁面跳轉(zhuǎn)')
? ? });
? ? //回車鍵或者點(diǎn)擊提交表單,禁止瀏覽器默認(rèn)跳轉(zhuǎn)：
? ? $('#target2').submit(function() {
? ? ? ? alert('捕獲提交表達(dá)動(dòng)作,阻止頁面跳轉(zhuǎn)')
? ? ? ? return false;
? ? });
? ? </script>
通過在<form>元素上綁定submit事件，開發(fā)者可以監(jiān)聽到用戶的提交表單的的行為
具體能觸發(fā)submit事件的行為：
<input type="submit">
<input type="image">
<button type="submit">
當(dāng)某些表單元素獲取焦點(diǎn)時(shí)，敲擊Enter（回車鍵）
上述這些操作下，都可以截獲submit事件。
查看全部 -
? ? //監(jiān)聽input元素中value的選中
? ? //觸發(fā)元素的select事件
? ? $("input").select(function(e){
? ? ? ? alert(e.target.value)
? ? })
查看全部 -
? ?//監(jiān)聽input值的改變
? ? $('.target1').change(function(e) {
? ? ? ? $("#result").html(e.target.value)
? ? });
//文本中的值改變的時(shí)候會(huì)執(zhí)行語句
查看全部 -
<script type="text/javascript">
? ? ? ? //input失去焦點(diǎn)
? ? ? ? //給input元素增加一個(gè)邊框
? ? ? ? $("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>
查看全部 -
<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>
查看全部 -
? $("p").hover(
? ? ? ? function() {
? ? ? ? ? ? $(this).css("background", 'red');
? ? ? ? },
? ? ? ? function() {
? ? ? ? ? ? $(this).css("background", '#bbffaa');
? ? ? ? }
? ? );
查看全部
舉報(bào)