【Python全栈-JavaScript】jQuery事件
jQuery事件
一、页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向 window.load 事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
ready(function) #function 要在DOM就绪时执行的函数
在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){ // 在这里写你的代码... });
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
$(function($) {
// 你可以在这里继续使用$作为别名...
});二、事件处理
2-1 ：on(events,[selector],[data],fn)
on(events,[selector],[data],fn) //返回值:jQuery events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin"或"mouseover mouseleave" 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.on('click')。一共有以下这些：
blur, focus, focusin, focusout, load, resize, scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress, keyup, 。
参考案例：
1、单击时在提示框中显示段落的文本
$("p").on("click", function(){
alert( $(this).text() );
});
2、将数据传递给事件处理程序，该处理程序在此处按名称指定
function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler)
3、取消表单提交操作，并通过返回false来阻止事件冒泡
$("form").on("submit", false)
4、使用.preventDefault()仅取消默认操作
$("form").on("submit", function(event) {
event.preventDefault();
});
5、使用.stopPropagation()停止通过冒泡 提交事件而不阻止表单提交
$("form").on("submit", function(event) {
event.stopPropagation();
});
参考：http://jquery.cuishifeng.cn/on.html
2-2:off(events,[selector],[fn]) //off() 方法移除用.on()绑定的事件处理程序
off(events,[selector],[fn]) //返回值:jQuery events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin". selector:一个最初传递到.on()事件处理程序附加的选择器。 fn:事件处理程序函数以前附加事件上，或特殊值false.
参考案例：
1、从p标签中删除所有事件处理程序
$("p").off()
2、从p标签中删除所有委派的点击处理程序
$("p").off( "click", "**" )
2-3 ：one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个 一次性 的事件处理函数
one(type,[data],fn) //返回值:jQuery
String, Object, Function
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。
描述:
当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
2-3 ：trigger(type, [data])
trigger(type, [data]) //返回值:jQuery type: String,Event,Object 一个事件对象或者要触发的事件类型 data (可选): Array (可选)传递给事件处理函数的附加参数
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。
事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。
jQuery也支持 <a href="http://docs.jquery.com/Namespaced_Events">命名空间事件</a>。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增：
所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。
事件对象构造器现在已经公开，并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 <a href="http://docs.jquery.com/Events/jQuery.Event">jQuery.Event</a> 的文档里找到。
你可以有三种方式指定事件类型：
* 你可以传递字符串型的事件名称(type参数)。
* 你可以使用jQuery.Event对象。可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。
* 最后，你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你'''必须'''指定一个 <em>type</em> 属性。
三、事件委派 [live,die,delegate,undelegate]
3-1 on(events,[selector],[data],fn)
旧版本的 .live已经废弃
---------------------------------------------html <div class="container"> <p class="item">live事件委派</p> </div> -----------------------------------------------js $(document).ready(function () { $(".container").on("click",'.item', function () { $(this).after("<p class='item'>Another paragraph!</p>"); }); });
四、事件切换 [hover,toggle]
4-1：hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
<div class="container">
<p class="item">live事件委派</p>
</div>
$('p').hover(function () {
$(this).addClass('hoverinp')
console.log($(this).attr('class'))
},function () {
$(this).removeClass('hoverinp')
console.log($(this).attr('class'))
})
4-2：toggle([speed],[easing],[fn])
[speed], [easing ], [fn ] //String,String,Function speed: (可选)隐藏/显示 效果的速度。默认是 "0" 毫秒。可能的值：slow，normal，fast。" easing: (可选) 用来指定切换效果，默认是"swing"，可用参数"linear" fn: (可选) 在动画完成时执行的函数，每个元素执行一次。
示例：
无参数描述:
对表格tbody内容切换显示/隐藏
$('td').toggle();
speed 描述:
用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("slow");
speed,fn 描述:
用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast",function(){
alert("Animation Done.");
});
switch参数描述:
如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
var showOrHide=true $('#foo').toggle(showOrHide); //相当于 if (showOrHide) { $('#foo').show(); } else { $('#foo').hide(); }
五、标准事件类型
[ blur,change,click,dblclick,focus,focusin,focusout,keydown,keypress,keyup,load,mousedown,mouseout,mouseover,mouseup,resize,scrool,select,submit ]
blur([[data],fn]) 当元素失去焦点时触发 blur 事件
$("p").blur( function () { alert("Hello World!"); } );
change([[data],fn]) 当元素的值发生改变时，会发生 change 事件
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
click([[data],fn]) 点击事件
$("p").click( function () { $(this).hide(); });
dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件
$("p").dblclick( function () { alert("Hello World!"); });
focus([[data],fn]) 当元素获得焦点时，触发 focus 事件
当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){ $("#login").focus(); });
使人无法使用文本框:
$("input[type=text]").focus(function(){
this.blur();
});
focusin([data],fn) 当元素获得焦点时，触发 focusin 事件
------------------------------------------html <p> <input type="text" /> <span>focusout fire</span> </p> <p> <input type="password" /> <span>focusout fire</span> </p> --------------------------------------------js $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
focusout([data],fn) 当元素失去焦点时触发 focusout 事件
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件
$(window).keydown(function(event){ if(event.keyCode == 32) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 // 更多详细信息: http://unixpapa.com/js/key.html // 常用keyCode： Space 32 Enter 13 ESC 27 Tab 9 Esc 27 BackSapce 8 }
else if(event.keyCode == 27){
...
} });
mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用
mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件
mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件
mouseup([[data],fn]) 当在元素上放松鼠标按钮时，会发生 mouseup 事件
resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件
scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件
当页面滚动条变化时，执行的函数
示例：
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）即：元素要出现滚动条
$(window).scroll( function() { /* ...do something... */ } );
对元素滚动的次数进行计数：
$("div").scroll(function() {
$("span").text(x+=1);
});
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; $(document).ready(function(){ $("div").scroll(function() { $("span").text(x+=1); }); }); </script> </head> <body> <p>请试着滚动 DIV 中的文本：</p> <div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. <br /><br /> text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div> <p>滚动了 <span>0</span> 次。</p> </body> </html>
select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
submit([[data],fn]) 当提交表单时，会发生 submit 事件。
该事件只适用于表单元素。
示例：
提交本页的第一个表单:
$("form:first").submit();
如果你要阻止表单提交:
$("form").submit( function () {
return false;
} );
