JQuery中的事件

JQuery中的事件

一.常见事件

1.加载完成事件

$(function(){
    
})

2.获焦,失焦事件

获焦(focus focusin)

失焦事件(blur focusout)

$('input').focus(function(){})
$('input').focusin(function(){})
$('input').blur(function(){})
$('input').focusout(function(){})

3.按钮点击事件

$('button').click(function(){})

4.鼠标移动事件

$('div').mouseleave(function () {
        console.log('离开');
      }).mouseenter(function () {
        console.log('进入');
      }).mousemove(function () {
        console.log('移动');
      })

二.绑定事件

1.原生JS绑定事件

//鼠标滚轮事件
document.addEventListener('mousewheel', function () {
        console.log(1);
      })
document.onmousewheel = function () {
        console.log(1);
      }

2.JQuery绑定事件

on(可以绑定多个事件),one(一次性事件),bind（基本废除）

$(document).on('mousewheel', function (e) {
        console.log('滑动', e.clientX, e.clientY);
      })

3.事件切换

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

$('.box').hover(function () {
        console.log('进入');
      }, function () {
        console.log('离开');
      });

4.事件移除

事件移除off，unbind(全部移除)
在选择元素上移除一个或多个事件的事件处理函数

$('.info').off('click')
$('.info').unbind()

5.事件委托

$('.bigbox').on('click', '.box', function () {
      console.log(11);
    })

6.事件冒泡

//jq处理冒泡事件
return false;
e.stopPropagation();
e.originalEvent.cancelBubble=true;