Python 前端开发之jQuery的事件操作（python是什么意思）

一、jQuery的事件操作

1、绑定事件

bind(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

参数说明：

type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象 fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当每个p标签被点击的时候，弹出其文本

$("p").bind("click", function(){   alert( $(this).text() ); });

你可以在事件处理之前传递一些附加的数据。

function handler(event) { //event.data 可以获取bind()方法的第二个参数的数据   alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)

常见事件：

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) //内容发生变化，input，select等 keyup(function(){...})   mouseover/mouseout mouseenter/mouseleave mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

或通过event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event){   event.stopPropagation(); });

2、解绑事件

unbind(type,fn);

描述：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数说明：

type (String) : (可选) 事件类型 fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例：把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

3.补充 一次性事件

one(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

参数说明：

type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象 fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click", function(){ //只有第一次点击的时候才会触发，再次点击不会触发了   alert( $(this).text() ); });

4.事件委托（事件代理）

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理：利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

1.性能要好

2.针对新创建的元素，直接可以拥有事件

事件源 :

跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

•为DOM中的很多元素绑定相同事件；

•为DOM中尚不存在的元素绑定事件；

示例：

            路飞             
• 路飞
            
• 路飞