【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>
View Code

select([[data],fn])  当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件

submit([[data],fn])  当提交表单时,会发生 submit 事件。

该事件只适用于表单元素。

示例:

提交本页的第一个表单:

$("form:first").submit();

如果你要阻止表单提交:

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

 

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

posted @ 2019-04-10 15:58  XJT2019  阅读(172)  评论(0编辑  收藏  举报