jQuery技术

jQuery基础(三)

字号+ 作者:H5之家 来源:H5之家 2017-01-04 09:02 我要评论( )

jQuery基础课程总共分为4个部分,分别是样式篇、事件篇、动画篇、DOM篇。此为第三个部分—事件篇。此部分当中包含了,鼠标事件,表单事件,键盘事件,事件的绑定

文本框中,keydown触发时,先执行自己定义的keydown事件,这个时候文本框里面还没有将你按下的那个值输入(还没有执行默认事件),所以会少一个字母;但是keyup不一样,keyup事件前已将执行keydown默认事件,已经将文本框内值更新,所以看起来keyup是及时更新的!

文本框中,keydown触发时,先执行自己定义的keydown事件,这个时候文本框里面还没有将你按下的那个值输入(还没有执行默认事件),所以会少一个字母;但是keyup不一样,keyup事件前已将执行keydown默认事件,已经将文本框内值更新,所以看起来keyup是及时更新的!

浏览器的解析DOM方式之一 浏览器解析DOM主要有两种方式,冒泡机制和委托机制,IE浏览器主要采用的是冒泡机制,谷歌以及其他浏览器主要采用委托机制。 冒泡机制即,作用于DOM上的操作会冒泡传递,就是先作用在最具体的元素然后向上冒泡,继续作用他的父元素,到祖元素,再到最后的整个DOM文档(当然这个是可以设置冒泡阻止到那儿) 委托机制相反,作用于DOM上的操作会最先作用在整个DOM文档上,然后才会找到事件最具体的元素。

keypress事件与keydown和keyup的主要区别 只能捕获单个字符,不能捕获组合键 无法响应系统功能键(如delete,backspace) 不区分小键盘和主键盘的数字字符 总而言之, KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。

mouseenter事件和mouseover的区别 关键点就是:冒泡的方式处理问题 简单的例子: mouseover为例: <div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> </div> 如果在p元素与div元素都绑定mouseover事件,鼠标在离开p元素,但是没有离开div元素的时候,触发的结果: 1.p元素响应事件 2.div元素响应事件 这里的问题是div为什么会被触发? 原因就是事件冒泡的问题,p元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发 所以在这种情况下面,jQuery推荐我们使用 mouseenter事件 mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发

mousedown事件触发需要以下几点: mousedown强调是按下触发 如果在一个元素按住了鼠标不放,并且拖动鼠标离开这个元素,并释放鼠标键,这仍然是算作mousedown事件 任何鼠标按钮被按下时都能触发mousedown事件 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3 mouseup事件触发需要以下几点: mouseup强调是松手触发,与mousedown是相反的 mouseup与mousedown组合起来就是click事件 如果用户在一个元素上按下鼠标按键,并且拖动鼠标离开这个元素,然后释放鼠标键,这仍然是算作mouseup事件 任何鼠标按钮松手时都能触发mouseup事件 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3 另外需要注意的是: click与mousedown的区别: click事件其实是由mousedown于mouseup 2个动作构成,所以点击的动作只有在松手后才触发

这里没有取消事件冒泡。在本例中,当input获得焦点时,必定会产生”获取焦点“事件,这个事件从低到高进行冒泡。focus与focusin的区别在于看到 冒泡来的事件 是否触发。 focusin 遇到冒泡来的事件时,会触发。 focus遇到冒泡来的事件时,不会触发。也就是说,focus只有在自己产生获取焦点事件时才触发。

事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 event.preventDefault() 方法:阻止默认行为 这个用的特别多,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了 event.stopPropagation() 方法:阻止事件冒泡 事件是可以冒泡的,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数 event.which:获取在鼠标单击时,单击的是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3 event.currentTarget : 在事件冒泡过程中的当前DOM元素 冒泡前的当前触发事件的DOM对象, 等同于this. this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素; .this和event.target都是dom对象 如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 学习编写jquery插件

    学习编写jquery插件

    2017-01-04 10:00

  • Android+Jquery Mobile学习系列(4)-页面转场及参数传递

    Android+Jquery Mobile学习系列(4)-页面转场及参数传递

    2017-01-04 09:00

  • jQuery教程 - 认识jQuery

    jQuery教程 - 认识jQuery

    2017-01-03 09:01

  • jQuery.validationEngine.js学习

    jQuery.validationEngine.js学习

    2017-01-02 15:02

网友点评