jquery鼠标离开事件 jquery 鼠标移出

转载

技术领航舵手 2023-08-10 15:20:51

文章标签 jquery鼠标离开事件 jQuery 常用事件事件绑定事件冒泡 文章分类 jQuery 前端开发

注意：jQuery是一个集合，所有很多时候返回值也是一个集合

1.鼠标事件

$ele.click() 单击
 $ele.click( function(e) )
 $ele.click( [eventData ],function(e)) e.data=eventData
 ——————————————————————————————
 下列均有上面三种方式：
 $ele.dbclick() 双击
 $ele.mousedown() 鼠标按下
 $ele.mouseup() 鼠标松开
 $ele.mousemove() 鼠标移动
 $ele.mouseover() 鼠标移入
 $ele.mouseout() 鼠标移出
 $ele.mouseenter() 鼠标移入，不会进行冒泡
 $ele.mouseleave()鼠标移出，不会进行冒泡
 ——————————————————————————————
 $(selector).hover(handlerIn（function), handlerOut(function))

2.表单事件

下面均有开头的那三种方式：

$ele.focusin() 元素获取焦点时触发，不会进行冒泡处理
 $ele.focusout() 元素失去焦点时触发，不会进行冒泡处理
 $ele.focus() 元素获取焦点时触发
 $ele.blur() 元素失去焦点时触发
 $ele.change(function) 元素内容改变时触发
 $ele.select() 选择事件只能用于<inpuy>元素与<textarea>的元素
 $ele.submit() 表单提交时触发。

3.键盘事件

如在input中输入时：
$elem.keydown() 键盘按下，可以扑获组合键，问题每次获取的内容都是之前输入的，当前输入的获取不到
$elem.keyup() 键盘松开
$elem.keypress() 和keydown()，可以扑获到，常用这个

keypress事件与keydown和keyup的主要区别:
只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符

4.事件的绑定和解绑：

$ele.on( events ,[selectors],[ data ], function(event) ))

data 参数位置看清楚，event.data=data;data如果是对象则 event.data.value
selectors是元素，可以使用委托机制，例如$("div").on("click","p",fn)

一个事件绑定一个函数
$("#elem").on('click',function(){}) 
多个事件绑定一个函数
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定多个函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

$(“elem”).one(type,[data],fn) 绑定一个一次性的事件处理函数

$("p").one("click", function(){
  alert( $(this).text() );
});

$(“elem”).off([eventname]) 没有参数则将事件全部销毁

5.事件对象的使用

event.target 代表当前触发的元素
event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键,左键报告1，中间键报告2，右键报告3
event.currentTarget : 在事件冒泡过程中的当前DOM元素，等同于this
this和event.target的区别：