Jquery学习笔记——事件

Jquery事件模型

绑定事件

         Bind（eventType，data，listener）： eventType 类型可以添加命名空间的后缀；data可以作为Event实例的data属性，可省略；listener的参数是Event对象，如：

         $(‘2’).bind(‘click.editMode’,function1):  $(‘1’).bind(‘click.editMode’,function2)   通过将这些绑定分组到editMode命名空间，随后可以作为一个单元操作，当离开编辑模式可以删除所有的绑定： $(‘*’).unbind(‘click.editMode’)

        Bind（对象）：一次绑定多个事件，如：

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
});

        Live(eventType, data,listener)        给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件，也支持多事件绑定，格式同上。 移除事件使用die

        事件处理函数返回 false，可以防止事件的传播

         特定事件绑定： eventType(listener) : 无法传入data值，有如下方法：

　　.change() 表单元素的值发生变化

　　.click() 鼠标单击

　　.dblclick() 鼠标双击

　　.focusin() 子元素获得焦点， 代替focus事件

　　.focusout() 子元素失去焦点，代替blur事件

　　.hover() 同时为mouseenter和mouseleave事件指定处理函数

　　.keydown() 按下键盘（长时间按键，只返回一个事件）

　　.keypress() 按下键盘（长时间按键，将返回多个事件）

　　.keyup() 松开键盘

　　.load() 元素加载完毕

　　.mousedown() 按下鼠标

　　.mouseenter() 鼠标进入（进入子元素不触发）

　　.mouseleave() 鼠标离开（离开子元素不触发）

　　.mousemove() 鼠标在元素内部移动

　　.mouseout() 鼠标离开（离开子元素也触发）

　　.mouseover() 鼠标进入（进入子元素也触发）

　　.mouseup() 松开鼠标

　　.ready() DOM加载完成

　　.resize() 浏览器窗口的大小发生改变

　　.scroll() 滚动条的位置发生变化

　　.select() 用户选中文本框中的内容

　　.submit() 用户递交表单

　　.toggle() 根据鼠标点击的次数，依次运行多个函数

　　.unload() 用户离开页面

 

         One：事件处理程序执行一次后自动删除

删除事件

         Unbind(eventType,listner):删除事件eventType特定监听器   unbind(event)

事件实例

         Event属性：  

                   键盘：altKey  ，ctrlKey (true|false)  keyCode  metaKey   shiftKey

                   鼠标：pageX  pageY  relatedTarget   screen   screen   

                   响应事件对象： target

                   类型：type， 适用于使用一个监听器处理多种事件

                   Which：按下的鼠标键

       详细说明：

　           event.pageX 事件发生时，鼠标距离网页左上角的水平距离

　　　　event.pageY 事件发生时，鼠标距离网页左上角的垂直距离

　　　　event.type 事件的类型（比如click）

　　　　event.which 按下了哪一个键

　　　　event.data 在事件对象上绑定数据，然后传入事件处理函数

　　　　event.target  产生事件的对象

　　　　event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）

　　　　event.stopPropagation() 停止事件向上层元素冒泡

                event.currentTarget  注册监听器的对象，比如在table上注册监听器 bind()，而点击table中的td 会激活table上注册的事件，则 table为currentTarget， td为target

 

触发事件

         只是执行事件处理程序的简便方法，不会导致事件触发和通过DOM结构进行传播

         Trigger(eventType, 参数对象) 

         快捷方式：  blur()  click focus  select   submit

切换事件

         Toggle(listenerOdd,listenerEvent):  通过触发奇偶次触发响应的监听器，如实现：根据元素的点击次数切换元素的启用状态，改变透明度以反映启用和禁用状态。

         对于mouseover和mouseout事件，如果分别通过bind注册监听器，对于以下场景：

 

 

 

 

 

 

 

        

         当鼠标从Out进入Inner时，Out的mouseout事件触发。而hover(overListner,outListner) 会忽略鼠标指针从父元素到子元素，对不必对鼠标指针从子元素上通过做出反映的情况下非常有用。

         <label><input type=”checkbox”/>测试</label> 点击标签的文本就可以切换已包含的控件的选中状态

         当选项隐藏时仍然是启用的，所以会连同其余可见的元素一起提交，会浪费带宽，在提交时可以禁用不需要的单选按钮