jQuery基础总结–jQuery事件(六)

继续接上篇jQuery基础总结–JSON(五)

事件的概念

1、“事件”是触发文档或者文档的某些元素发生变化或操作的动作

2、浏览器通过引发事件来完成JavaScript和HTML之间的交互

3、浏览器器装载完一个文档后,会生成事件

加载DOM

1、Javascript通过window.onload方法来加载

2、jQuery中则通过$(document).ready方法加载

jQuery基础总结--jQuery事件(六)

绑定事件

文档加载完成后,可以使用bind方法来对匹配元素进行特定事件绑定

语法如下:

bind(type [ ,data ] , fn );

type:事件类型,包括click、blur、focus、load、change等

data:可选参数,作为属性值传递给事件对象的额外数据对象

fn:绑定事件的处理函数

事件对象的属性

jQuery在遵循W3C规范的情况下对事件对象的常用属性进行了封装。

envnt.type  获取事件类型

event.target   获取触发事件的元素

event.pageX  event.pageY 获取光标相对于页面的坐标

event.which  获取鼠标左中右键或者键盘按键

event.metakey 获取ctrl键

event.originalEvent  指向原始的事件对象

移除事件

文档中一个元素可以绑定多个事件,一个事件也可以被多个元素绑定,我们可以使用unbind来移除事件

语法:

unbind( [ type ],[ fn ] );

type:事件类型

fn:将以移除的函数

 

除了使用unbind外,我们可以使用one来为元素绑定一次性事件

语法:one(  type [ ,data ],fn );

$("#tsp").one("click",{uname:"admin"},function(event){

alert(event.data.uname);

} );

One绑定的事件在整个文档中,只会执行一次。

合成事件

jQuery有两个合成事件hover()方法和toggle()方法

hover:用于模拟光标悬停事件。语法:hover(enter,leave);

toggle:用于模拟鼠标连续单击事件。语法:toggle(fn1,fn2,…fnN);

事件冒泡

在页面上一个元素同时被多个外层事件响应,这种触发多个事件的行为称之为“事件冒泡”。

如何防止事件冒泡?

方法一:停止事件冒泡event.stopPropagation();

方法二:阻止默认行为event.preventDefault();

$("#tsp").bind("click",{uname:"admin"},function(event){

alert(event.data.uname);

event.stopPropagation();

//或者

event.preventDefault();

} );

也可以用return false;代替上述两种方法

未完待续...

下篇传送阵:jQuery基础总结–jQuery动画(七)

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:4   其中:访客  2   博主  2

  1. avatar 园子大魔王 1

    你的评论框还没改啊,评论信息被缓存了,每次都要手动修改

  2. avatar 好文推荐 4

    每天都有更新呐

评论加载中...