Fork me on GitHub

jquery事件基础

(一)

1.mousemove(监听用户的操作)

用法:$ele.mousemove()

$ele.mousemove(hander(eventObject))每次触发点击操作都会回调执行函数hander()
$ele.mousemove([eventData],hander(eventObjet))不同作用域下传递数据的问题

2.mouseover和mouseout事件,基本的用法和上面的mousemove一样

3.mouseenter和mouseleave可以让我们知道鼠标是否在元素内部或者元素外部。mouseover和mouseenter的区别,关键点:冒泡的方式处理问题。mouseenter只会在它绑定的元素上有效,而不会在后代结点上有效

4.hover可以传递两个回调函数,会很方便的使用$(selector).hover(handerIn,handerOut)第一个参数是鼠标移入时触发的 ,第二个参数是鼠标移出时触发的

5.focusin事件,捕获某一个元素或者其内部某一个元素获得焦点的时候的动作,而focusout是捕获失去焦点的动作,使用方法和第一点提到的类似

6.focus()在元素本身产生,focusin()在元素包含的元素中产生

7.change事件监听\<input>,\<textarea>,\<select>的改变动作

8.当textarea或者文本类型的input元素的文本被选择时,会发生select事件(也只用于这两个了)

9.form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可

1
2
3
$("#target").submit(function(data) { 
return false; //阻止默认行为,提交表单
});

10.keydown和keyup(每次的内容都是之前输入的,当前的获取不到)

(二)

1.on()的多事件绑定 .on(event[,selector][,data])
Paste_Image.png

2.on的委托机制
Paste_Image.png

3.通过.on()绑定的事件处理程序,通过off()方法移除该绑定

4.事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有在事件发生时才会产生,并且只能是事件处理函数内部访问,在所有的事件处理函数运行结束后,事件对象就被销毁

5.event.target可以是注册时候的属性,或者它的子元素。通常通过比较event.target和this来确定是不是由于冒泡出发的。经常用于事件冒泡时处理事件委托

6.简而言之,event.target代表当前触发事件的元素, 可以通过当前元素的一系列属性来判断是不是我们想要的元素

7.jQuery事件对象的属性和方法
event.type:获取事件的类型
event.pageX和event.pageY:获取鼠标当前相对于页面的坐标
event.preventDefault()方法:阻止默认行为
event.stopPropagation方法:阻止事件冒泡
event.which:获取鼠标单击时,单击的是鼠标的哪个键
this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换,为jquery对象:$(this)和$(event.target);比如:event.target和$(event.target)的使用

8.原生事件:浏览器提供的,需要有交互才能被触发

9.trigger:根据绑定到匹配元素的给定事件类型执行所有的处理程序和行为,支持自定义事件,并且定义时间还支持传递参数

-------------本文结束感谢您的阅读-------------