jquery 事件監聽

阿新 • • 發佈：2019-01-21

事件分類：

表單事件
鍵盤事件
滑鼠事件

先來看錶單事件

blur 失去焦點
focus 得到焦點
change 值改變
submit提交

例項參考

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

    <form class="" action="index.html" method="post">
      <input type="text" name="" value="">
      <select class="" name="">
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      <input type="text" name="" value="">
      <input type="submit" name="" value="提交">
    </form>

    <script type="text/javascript">
    //對所有匹配的dom物件都監聽
      $("input").focus(event=>console.log("input get focus"))
      .blur(event=>console.log("input 失去焦點"))
      .change(event=>console.log("input value changeto"+$("input").val()))

      $("form").submit(function(event){
        event.preventDefault();//中止預設提交行為 不會重新整理頁面
        console.log("提交了");
      })

    </script>

  </body>
</html>

鍵盤事件

keydown
keyup

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <input type="text" name="" value="">
    <input type="text" name="" value="">
    <input type="text" name="" value="">

    <script type="text/javascript">
    //jquery物件可以一次拿到所有，每次都返回自身
      $("input")
      .keydown(event=>console.log("keydown"))
      .keyup(e=>console.log("keyup",e.which))
      // e.which可以獲取鍵盤值

    </script>

  </body>
</html>

滑鼠事件

click 單擊
dblclick雙擊
contextmenu 右擊下拉選單
mousedown 滑鼠按下
mouseup 滑鼠鬆開
mouseenter 滑鼠進入到某區域
mousemove 滑鼠移動
mouseout 滑鼠離開進入子區域或離開也是out，選擇用mouseleave
mouseleave 是jquery模擬出來的，解決mouseout缺陷，沒有子的情況下和mouseout一致。
hover 同mouseleave,其type也是mouseleave。

再說一下事件物件

event.pageX 滑鼠相對文件的左邊位置
event.pageY 。。。頂部位置
event.which 可以拿到滑鼠或鍵盤的輸入編號key

event.preventDefault()用於右擊的contextmenu的阻止預設事件
event.target

直接例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style media="screen">
      .box{
        background-color: #888;
        color:red;
        width:300px;
        height:200px;
        padding:20px;
      }

      .sub{
        width:50%;
        background-color: yellow;
        height: 50%;
      }

      .menu{
        background-color: #789;
        padding: 20px;
        display: none;
        position:fixed;
      }
    </style>
  </head>
  <body>

    <div class="box">
      box
      <div class="sub">
        sub
      </div>

    </div>

    <div class="menu">
      <input type="text" name="" value="">
      <input type="text" name="" value="">
      <input type="submit" name="" value="提交">

    </div>

    <script type="text/javascript">
    const log = console.log;
    const menu = $(".menu");

    menu.
    mouseenter(function(){
      clearTimeout(clearId);
    })
    .mouseleave(function(){
      delcontext();//鼠標出來要消失
    })

    let clearId;

    function delcontext(){
      clearId = setTimeout(function(){
        menu.css({display:"none"});
      },1000)
    }



      $(".box")
      // .click(e=>log(e.type))
      // .dblclick(e=>log(e.type))
      .contextmenu(e=>{
        clearTimeout(clearId);
        e.preventDefault();//屏掉預設的右鍵彈出對話menu
        //彈出自己建立的 menu
        let left = e.pageX;
        let top = e.pageY;
        menu.css({
          left,top,display:"block"
        });
        delcontext();//無動作也消失
        // clearId = setTimeout(function(){
        //   menu.css({display:"none"});
        // },2000)
      })
      // .mousedown(e=>log(e.type))
      // .mouseup(e=>log(e.type))
      // .mouseenter(e=>log(e.type))
      // .mousemove(e=>log(e.type))

      //leave是在整體離開box後觸發，out進到子元素，出來都會產生，一般不用。

      // .mouseout(e=>log(e.type))

      .mouseleave(e=>log(e.type))

      // .hover(e=>log(e.type+"hover..."))

      //mouseleave hover是模擬出來的產生的效果和條件一致 type都是mouseleave



    </script>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


  </head>
  <body>




    <script type="text/javascript">
    滑鼠事件的輸入編號
      $(document).mousedown(function(event){
        console.log(event.which);
      })




    </script>
  </body>
</html>

哦了。

jQuery事件監聽

monitorEvents() 瀏覽器事件監聽控制或右鍵單擊元素並選擇“檢查 (Inspect)”。在 javaScript 控制檯標籤中輸入： monitorEvents($0) 現在，將滑鼠懸停在該元素上時，關注或單擊它，將顯示觸發事件的名稱及其資料。要停止

jquery 事件監聽

事件分類：表單事件鍵盤事件滑鼠事件先來看錶單事件blur 失去焦點focus 得到焦點change 值改變submit提交例項參考<!DOCTYPE html> <html> <head> <meta charset="u

Jquery resize監聽事件

使用監聽事件 out trigge this and 直接 div length (function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"

jquery on監聽click事件在 ios無效Android沒事

<div class='center-popWindow-closeBtn'>關閉</div> $('body').on('click', '.center-popWindow-closeBtn', function(){ c

jquery中四種事件監聽的區別

我們知道jquery提供了四種事件監聽方式，分別是bind、live、delegate、on,下面就分別對這四種事件監聽方式分析。已知有4個列表元素: 　　列表元素1 　　列表元素2 　　列表元素

jquery ajax監聽事件

var oldComparePeriod = ""; var newComparePeriod = ""; $(function(){ //將新的期數值放進去 newComparePeriod = $('#comparePeriod').combobox('get

基於jquery的監聽某個元素高度變化resize事件

//一個jquery的外掛，用於監聽元素寬度高度變化，呼叫方式： //$("classname").bind('resize',function(){ //callback //... //... //}

javascript事件監聽機制（二）——jquery的Event物件

jQuery封裝了瀏覽器的事件監聽方法，相容了各個瀏覽器的區別，對外提供一套適合於jquery物件的事件監聽介面。Event物件的核心方法主要有三個，add，remove和trigger。 elem對於事件的維護，是通過在elem的內部空間裡（_data訪問的），用一個ev

【JQuery】用JQuery來監聽瀏覽器改變視窗大小事件

做web開發的時候會遇到需要監聽瀏覽器視窗大小改變事件，而進行相關操作。這裡像大家介紹一下 JQuery瀏覽器視窗改變事件。$(window).resize(); 這裡需要注意這個事件不要寫在頁面載入完成事件（ $(function(){…} ）內部，而需要寫在他外面。

jQuery的on()方法的兩種用法（委託給父元素進行事件監聽代理）

/* 6. 增加刪除元素*jQuery: * */ var li=$('<li class="item">content</li>');//建立子節點 $('ul').append(li);//在父節點後面新增子節點 $(li

JS 事件綁定、事件監聽、事件委托詳細介紹

兼容性 log 查看 and == 常用提高監聽 live 事件綁定要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操作的函數，不同的操作對應不同的名稱。在JavaScript中，有三種常用的

JS中的事件監聽與事件流

pan 交互 ack 其他獲得發生 listen 監聽器 pre 事件監聽：　　使用監聽器（eventListener）來預定事件，在傳統軟件工程中稱成為觀察者模式　　執行某種操作時（特定的交互瞬間），會產生對象，對象會沿事件流的方向傳播。事件流: 　　事件流有

java中的key事件監聽機制

com java.awt imp package 時間 ext javax .get pri package com.at221; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; im

Java 中的事件監聽機制

add import userdata 開發人員 util ner dns pre sta 看項目代碼時遇到了好多事件監聽機制相關的代碼。現學習一下： java事件機制包含三個部分：事件、事件監聽器、事件源。 1.事件：繼承自java.util.EventO

Java中的事件監聽機制

void 初始化 release vax 輸入 logs p s get location 鼠標事件監聽機制的三個方面： 1.事件源對象：　　事件源對象就是能夠產生動作的對象。在Java語言中所有的容器組件和元素組件都是事件監聽中的事件源對象。Java中根據事件的動作來區

NavigationView的頭部的事件監聽

navig現在App的UI設計中Drawerlayout+NavigationView是一個比較常用的設計了，而以前我一般只是在Navigation中的menu（即下部的item中）添加事件監聽，而今天碰到一個需要是要在header中增加事件監聽。　　需求如下：點擊圖片，在底部彈出一個彈出窗口。　　　　　側邊

EventFiringWebDriver網頁事件監聽（一）

sna system function tac hcl 通過 events att 腳本執行 Selenium提供了很多的event listening functions來跟蹤腳本執行過程中的events. How it works? 在註冊了listener的webDr

Jquery滾動監聽和附加導航

jquery 導航滾動監聽初學jquery,多多指教導航思路：設定nav導航的類。設定索引值。點擊導航內容，導航的索引和內容的索引一一對應。點擊導航欄，內容滑動一段距離。監聽： 1.滑動內容文檔時，索引值變動。 2.導航對應的索引所在內容高亮。下面是代碼$(doc

[轉]addEventListener() 方法，事件監聽

傳遞參數調用參數 spa 默認 mouse 可選 als http 轉載白楊-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法，事件監聽你可以使用 r

時間綁定和事件監聽！

func 控制綁定更新 cti jquery on() function 代碼塊一般在網頁上回有不少節點的數據是根據數據庫進行更新的，這種節點都是由js代碼控制動態生成的，那麽綁定各種事件比如點擊事件的代碼塊會比生成節點的代碼塊先執行，那後生成的節點就不會被綁定上事件

jquery 事件監聽

相關推薦