jquery 笔记 事件_jquery

浏览器模型:
1、DOM第0级模型
事件处理程序通过吧函数实例的引用指派到DOM元素的属性而声明。这也是我们最常见的,如onclick等

复制代码 代码如下:

<img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello");}

(1)、其中比较好玩的是Event实例和事件冒泡
Event实例是大多数浏览器把事件的类实例作为第一个参数传给函数,但是ie中则是将event指定到window的属性;在获取目标元素w3c标准浏览器存在target,ie则取srcElement属性,为兼容事件如下写:

复制代码 代码如下:

$("img").onclick=function(event){
if(!event) event = window.event;
var target = event.target?event.target:event.srcElement;
}

(2)、事件冒泡
目标元素获得机会吃力事件,事件模型坚持目标元素的父元素,看是否为同类型建立了处理程序,如果是,则也调用处理程序,直到DOM树顶部
对于w3c标准浏览器可使用event的stopPropagation(),对于ie可使用event的cancelBubble取消冒泡

2、第2级模型
解决0级模型中每个属性存储事件只能注册一个处理程序缺陷。

复制代码 代码如下:

$("img").addEventListener('click',function1,false).addEventListener('click',function2,false);

在2级模型中,事件被触发,先从DOM树向下传播到目标元素(捕捉阶段),再向上冒泡,上面的addEventListener第三个参数为false时建立冒泡型处理程序,为ture时建立捕捉型处理程序。
这里的捕捉型也是第一次听说,因为ie6和7就不支持第2级模型,所以也难怪,但部分ie浏览器支持类似冒泡型的有attachEvent(eventName,handler)。

那么jquery的bind则我们解决了这些。。。
参考《jquery实战》

时间: 2024-08-31 03:31:31

jquery 笔记 事件_jquery的相关文章

jQuery学习笔记之jQuery的事件_jquery

一.事件绑定 1.事件绑定函数 事件的绑定函数为如下形式: .bind(type [,data],fn) type:类型 如click..... data:参数 fn:事件执行的函数 例子 复制代码 代码如下: $(function(){ $(#id1).click(function(){ $(#id2).show();//id2显示 }) ; }); 二.合成事件 1.鼠标滑过事件 .hover(enter,leave) enter:鼠标光标移动到对象时触发的函数 leave:鼠标光标移出对象

浅析jQuery Mobile的初始化事件_jquery

jQuery Mobile 包括一个初始化事件,该事件甚至会先于 jQuery 的 document.ready 事件进行加载.jQuery Mobile 实际上在文档对象本身上触发其初始化事件,第一个触发的事件是mobileinit. 当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序 <sc

Jquery注册事件实现方法_jquery

本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

jQuery检查事件是否触发的方法_jquery

本文实例讲述了jQuery检查事件是否触发的方法.分享给大家供大家参考.具体实现方法如下: $('button').click(function(event, wasTriggered) { if (wasTriggered) { alert('triggered in code'); } else { alert('triggered by mouse'); } }); $('button').trigger('click', true); 希望本文所述对大家的jQuery程序设计有所帮助.

jQuery Dialog 取消右上角删除按钮事件_jquery

废话不多说了,直接给大家贴jquery dialog取消右上角删除按钮的代码了. 具体代码如下所示: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); 以上所述是小编给大家介绍的jquery dialog 取消右上角删除按钮事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery

 首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <div id="box"> <p id="btn">我是按钮</p> </div> </body> style: .hid{ display:none; } script: $('#box').click(functi

使用jquery hover事件实现表格的隔行换色功能示例_jquery

jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常

jQuery实现单击和鼠标感应事件_jquery

1.实现单击事件动态交替 之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用. 例子:点击事件的动态交互. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("#ddd").toggle(     

jquery 回车事件实现代码_jquery

例子,jquery键盘事件.回车键事件用法. // 键盘事件 1.keydown()  keydown事件会在键盘按下时触发.  2.keyup()  keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件  3.keypress()  keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 复制代码 代码如下: // 回车键事件 // 绑定键盘按下事件     $(document).keypress(function(e) {      // 回车键事件