jQuery中的事件LOGIN

jQuery中的事件

jQuery中的事件

有了jQuery,  我们有了处理对象事件的一系列函数.  上面基础知识还是要懂, 但是再也不用自己去实现处理多播事件委托的函数了.  正所谓有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法举例:

$("#testDiv4").bind("click", showMsg);

我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

使用jQuery事件处理函数的好处:

1. 添加的是多播事件委托.  

也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.

$("#testDiv4").bind("click", function(event) { alert("one"); });
$("#testDiv4").bind("click", function(event) { alert("two"); });

单击testDiv4对象时, 依次提示"one"和"two".

2. 统一了事件名称.  
添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称.

3. 可以将对象行为全部用脚本控制. 
让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.

下面是基础的jQuery事件处理函数:

EventHandling.jpg

下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我,我就会消失。</p> <p>点我消失!</p> <p>点我也消失!</p> </body> </html>
提交重置代码
章节课件