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实战》

赞 (0)

相关推荐

  • jquery 笔记 事件

    浏览器模型: 1.DOM第0级模型 事件处理程序通过吧函数实例的引用指派到DOM元素的属性而声明.这也是我们最常见的,如onclick等 复制代码 代码如下: <img onclick="alert('hello');" src="1.jpg" /> $("img").onmouseover = function(){alert("hello");} (1).其中比较好玩的是Event实例和事件冒泡 Event实例

  • 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最佳实践

    知识要点: 1,自定义事件custom events及事件的订阅 2,trigger.bind.unbind方法的使用 3,带命名空间的自定义事件 将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看. 复制代码 代码如下: /* JQuery自定义事件的应用-Javascript OO 有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B. 领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是... Levin每周一要用google doc写一份关于

  • 多种jQuery绑定事件的实现方式

    最近发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_but

  • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • jQuery绑定事件-多种实现方式总结

    jQuery绑定事件-多种实现方式总结 <html> <head> <meta charset="utf-8" /> <script src=https://pan.baidu.com/s/1o8GiuOq?qq-pf-to=pcqq.c2c></script> </head> <body> <input type="text"/> <input type=&quo

  • 详解Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们分享一下关于Jquery的事件和文档操作,便于小白们快速上手. 一.事件操作: <html> <head> <title>Jquery事件操作测试</title> <script src="http://ajax.aspnetcdn.com/aj

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • jQuery基于事件控制实现点击显示内容下拉效果

    jQuery基于事件控制实现点击显示内容下拉效果

    本文实例讲述了jQuery基于事件控制实现点击显示内容下拉效果.分享给大家供大家参考,具体如下: 1.实例代码: <!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&

  • jQuery 绑定事件的方式总结

      jQuery 绑定事件 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前    一:bind(type,[data],function(eventObjec

随机推荐