JQuery事件的基本使用

1.事件的基本 使用

on() off()
bind() unbind()
快捷绑定 click()等

在jQue ry中，大多数DOM事件都有一个等效都jQue ry 方法

$("p").click();

下一步是定义触发事件的内容：

¥$("p").click(function(){
  //动作触发后执行都代码！！
})
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;01-事件的基本使用.html</title&gt;
</head&gt;
<body&gt;
  <button>新增</button>
  <button>修改</button>
  <div>标题</div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数
       /*
       $('button').bind('click', '123', function (event) {
         console.log('button点击');
         console.log(event);
         console.log(event.data);//123
       })
       */
      // 点击新增或者修改按钮，改变div内部的内容
      $('button').bind('click', function (event) {
        // 通过event.target(DOM节点，可以拿到内部的内容) 来判断当前是哪个按钮点击
        // console.log(event.target);
        // console.log(event.target.innerHTML);
        if($(event.target).html() === '新增'){
          $('div').html('新增学生信息')
        }else{
          $('div').html('修改学生信息')
        }
      })
      // 解绑 unbind() 无参时 解除绑定的所有事件
      // $('button').unbind()
      // 解绑 unbind('click') 传递参数->事件类型
      // $('button').unbind('click')
      // 解绑 unbind() 解绑click对应的事件
      function clickEvent() {
        console.log('我是click事件');
      }
      $('button').click(clickEvent)
      // 第一个参数 事件类型 第二个参数 事件名称
      $('button').unbind('click', clickEvent)
    })
  </script>
</body>
</html>

2.事件代理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-事件代理.html</title>
</head>
<body>
  <button>点我啊</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    // 点击body
    // 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
    // $('body').on('click', function (event) {
    //   console.log(event);
    // })
    // button做代理
    $('body').on('click','button', [1,2], function (event, a, b) {
      console.log(event, a, b);
    })
    // 事件解绑 移除代理 使用off
    // $('body').off('click', 'button')
    // 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
    $('button').trigger('click', [1, 2])
  </script>
</body>
</html>

3.事件类型

常用**的jQuery事件快速绑定方法**

1.$(document).ready()

$(document).ready()方法允许我们在文档完全加载完后执行函数

2.click()

click()方法是当按钮点击事件被触发时会调用一个函数

3.dbclick()

当双击元素时，会发生dbclick事件

4.mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件

5.mous eleave()

当鼠标指针离开元素时，会发生mouseleave事件

6.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

7.mouseup()

当元素上松开鼠标按钮时，会发生mouseup事件

8.hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

9.blur()

当元素失去焦点时，发生blur事件

10.keydown()

键盘事件：按键按下事件

11.keyup()

键盘事件：按键抬起事件

12.表单事件等等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-事件类型方法.html</title>
</head>
<body>
  <p>一段文字</p>
  <button>点我啊</button><br>
  输入一些东西: <input type="text">
  <form action="">
    name:
    <input type="text" value="zhangsan">
    <span style="display: none;">请输入你的名字</span>
    <br>
    <input type="submit" value="提交">
  </form>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      //click() 鼠标单击事件
      //当点击事件在某个<p>元素上触发时，隐藏当前当<p>元素
      $("p").click(function(){
        $(this).hide();
      });
      // dblclick()   鼠标双击事件
      $('button').dblclick(function () {
        alert('dblclick')
      })
      // mouseenter() 鼠标进入事件  不支持子元素
      $('button').mouseenter(function () {
        console.log('mouseenter：你的鼠标移到了button的元素上！');
        $('button').css('background', 'red')
      })
      // mouseleave() 鼠标离开事件  不支持子元素
      $('button').mouseleave(function () {
        console.log('mouseleave:再见，你的鼠标离开了该button');
        $('button').css('background', 'blue')
      })
      // mousedown()  当鼠标指针移动到元素上方，并按下鼠标按键时
      $('button').mousedown(function () {
        console.log('mousedown:鼠标在该按钮上按下');
      })
      // mouseup()  当元素上松开鼠标按钮时，会发生mouseup事件
      $('button').mouseup(function () {
        console.log('mouseup:鼠标在button上松开');
      })
      // hover()    鼠标悬停事件
      $('button').hover(function () {
        console.log('hover');
        $(this).css("background-color","#cccccc");
      })
      //blur() 失去焦点
      $("input").blur(function(){ 
        $(this).css("background-color","#ffffff"); 
      });
      // 键盘事件
      // keydown 按键按下事件
      $('input').keydown(function () {
        $('input').css('background', 'blue')
      })
      // keyup 按键抬起事件
      $('input').keyup(function () {
        $('input').css('background', 'yellow')
      })
      // submit()
      $('form').submit(function () {
        alert('submit')
        return false;
      })
      // focus
      $('input:text').focus(function () {
        // 动画
        $('span').css('display','inline').fadeOut(3000)
      })
    })
  </script>
</body>
</html>