JQuery 18

事件绑定

第一种方式:直接使用事件名

例:$("#btn").click(function(){  alert(1) })

第二种方式:on(event,function)

例:$('#btn').on('click', function(){ alert(2);})

第三种方式:bind(event, function)

例:$('#btn').bind('click', function(){alert(3);})

第四种方式:利用事件监听来绑定事件

事件移除

.off():通常用于移除通过on方法绑定的事件

ֺ例: $("p").off("click");

2.unbind():移除被选元素的事件

ֺ例: $("p").unbind();

鼠标事件

1:mouseover    鼠标移入(支持事件冒泡)

2:mouseout    鼠标移出  (支持事件冒泡)

3.mouseleave  鼠标移出(不支持事件冒泡)

4.mouseenter  鼠标移入 (不支持事件冒泡)

5:mousedown  鼠标按下

6:mouseup      鼠标抬起

7:mousemove  鼠标移动

8:click              鼠标单击

9:dbclick          鼠标双击

10:contextmenu  鼠标右键

键盘事件

keydown 键盘按下

keyup 键盘抬起

表单事件

blur 失去焦点事件

focus 获取焦点事件

change 内容发生改变

submit 表单提交事件

复合事件

hover方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

例:  $("p").hover(function(){

$("p").css("backgroundColor","yellow");

},function(){

$("p").css("backgroundColor","pink");

});

事件对象属性

Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。

event.type

该属性用于获得触发该事件的类型,对引发事件的不同操作,返回不同结果

例:$("p").click(function(event){alert(event.type);});

该示例返回元素p单机事件的事件类型,结果打印是'click'。

event.target

该属性用于获得触发事件的元素

例:

$("p, button, h1").click(function(event){

$("div").html("通过" + event.target.nodeName + "元素触发");

});

event.pageX 和 event.pageY

用这两个属性可以获得鼠标的相对于页面的当前位置

例:

$(“p").click(function(event){

alert("current mouse location "+event.pageX+" “+event.pageY);

});

event.preventDefault()

阻止默认事件

例: $("a").click(function(event){event.preventDefault();});

使用该属性阻止元素a的默认跳转行为。

event.stopPropagation()

阻止事件冒泡

例:

$('div').click(function(event){

alert('里层点击');

event.stopPropagation();

});

使用stopPropagation()方法阻止div的父元素的click事件被触发。

事件委托

事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

原理:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处:减少事件注册,提高性能。

delegate()

定义和用法:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

语法:$(selector).delegate(childSelector,event,data,function)

delegate/on的参数说明

最新on方法取替了delegate方法

事件命名空间

事件添加命名空间便于事件的管理:删除事件和触发事件。例:

元素绑定多个事件

$("div").bind("click.plugin",function(){alert("click.plugin");}); $("div").bind("click",function(){alert("click");}); $("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");}); $("div").bind("dbclick",function(){alert("dbclick");});

由于使用了命名空间,可以删除指定命名空间中的事件,如移除所有plugin命名空间下的事件函数方法如下:

$(“button”).click(function(){$("div").unbind(".plugin");});

这样就移除了所有命名空间是plugin的事件函数。div中就只剩下click和dbclick绑定事件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 758评论 0 9
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,207评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,404评论 0 2
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,386评论 0 8
  • 刚在楼下带乖乖去玩扭扭车,她不是很愿意用脚前进,把脚顺势搭在了扭扭车的踏脚处,在一个拐角处我回头看着她再拉车,还是...
    Melshow阅读 232评论 0 0