【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;
} );

参考：http://jquery.cuishifeng.cn/submit.html