jQ事件监听

引入CDN

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

1. 鼠标事件

<button class="click_btn">按钮</button>

• 鼠标单击

  $(".click_btn").click(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标双击

  $(".click_btn").dblclick(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标按下

  $(".click_btn").mousedown(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标抬起

  $(".click_btn").mouseup(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标悬浮

  $(".click_btn").mouseover(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标离开

  $(".click_btn").mouseout(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标移动

  $(".click_btn").mousemove(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标移进

  $(".click_btn").mouseenter(function(){
      console.log($('.click_btn').html());
  })
  

• 鼠标离开

  $(".click_btn").mouseleave(function(){
      console.log($('.click_btn').html());
  })
  

2. 键盘事件

<input type="text" class="search_txt" placeholder="输入文字">

• 按键按下

  $(".search_txt").keydown(function(){
      console.log($('.search_txt'));
  })
  

• 按键抬起

  $(".search_txt").keyup(function(){
      console.log($('.search_txt'));
  })
  

• 按键按下抬起

  $(".search_txt").keypress(function(){
      console.log($('.search_txt'));
  })
  

3. HTML事件

<input type="text" class="search_txt" placeholder="输入文字">

• 文档加载完成

  window.onload = function () {
      console.log("文档加载完毕！");
  };
  

• 窗口尺寸变化

  window.onresize = function () {
      console.log("窗口变化！")
  };
  

• 滚动条移动

  window.onscroll = function () {
      console.log("滚动");
  }
  

• 内容被改变

  $('.search_txt').change((e) => {
      console.log($('.search_txt').val());
  })
  

• input聚焦

  $('.search_txt').focus((e) => {
      console.log($('.search_txt').val());
  })
  

• input失焦

  $('.search_txt').blur((e) => {
      console.log($('.search_txt').val());
  })