jQuery 事件

event对象

jq中的事件对象 不需要兼容了 直接传参ev就可以了

• ev.clientX/ev.clientY 事件触发的位置到浏览器可视区的上左边的距离
• ev.currentTarget：当前事件触发的元素
• ev.delgateTarget：当前事件绑定的元素
• ev.offsetX/ev.offsetY: 事件触发的位置到元素的上左边的距离
• ev.originalEvent: 元素事件对象
• ev.pageX/ev.pageY:事件触发的位置到文档的上左边的距离
• ev.screenX/ev.screenY:事件触发的位置到屏幕的上左边的距离
• ev.which 类似于 keyCode 可以获取鼠标的键值 左键是1 右键是3 滚轮是2
• 阻止默认事件 ev.preventDefault()
• 阻止冒泡 ev.stopPropagation()
• 阻止默认事件+冒泡 return false

事件绑定 on()

// 基本事件
$('#box').on('click',function(){})

// 一次绑定多个事件对应一个处理函数
$('#box').on('click mouseenter mouseleave',function(){})

// 绑定多个事件对应多个处理函数 对象形式
$('#box').on({
  'click': function(){},
  'dblclick':function(){}
})

// 自定义事件
$('#box').on('hahaha',function(){})

// trigger 触发事件
$('#box').trigger('hahaha');

// 事件委托
$('#list').on('click','li',function(ev){
  console.log($(ev.target).html());
})

// 事件的取消绑定
$('button:eq(0)').on('click', function(){
  console.log(1111);
})

$('button:eq(1)').on('click',function(){
  $('button:eq(0)').off();
  // $('button:eq(0)').off('mouseenter');
  // 传参取消事件类型
})

// 一个事件上绑定多个函数执行---事件的命名空间
$('button:eq(0)').on({
  'click.a':function(){
​    console.log(111);
  },
  'click.b':function(){
​    console.log(222);
  }
})

$('button:eq(1)').on('click',function(){
  $('button:eq(0)').off('click.a');
})

// 只执行一次的事件
$('button').eq(0).one('click',function(){
  console.log('一次就够了');
})

// 模拟执行一次事件
$('button').eq(0).on('click',function(){
  console.log('一次就够了');
  $(this).off();
})

合成事件

mouseenter 和 mouseleave

$('#box').hover(function(){
  // 鼠标移入执行函数
},function(){
  // 鼠标移出执行函数
})