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中尚不存在的元素綁定事件；

示例：

????????

????????????路飛 ????????????
• 路飛
????????????
• 路飛
???????????? ????????