Jquery(三)——事件篇

作者:计算机知识

jQuery鼠标事件之click与dbclick事件

用交互操作中,最简便易行直接的操作就是点击操作。jQuery提供了四个主意一个是click方法用于监听用户单击操作,另二个主意是dbclick方法用于监听用户双击操作。那八个措施的用法是看似的,上面以click()事件为例

Jquery(三)——事件篇。应用上非常轻巧:

方法一:$ele.click()

绑定$ele元素,不带别的参数一般是用来钦命触发3个事变,用的可比少

<div id="test">点击触发<div>

$("ele").click(function(){

    alert('触发指定事件')

})

$("#test").click(function(){

     $("ele").click()  //手动指定触发事件

});

 

 

 

 

 

 

 

方法二:$ele.click( handler(eventObject) )

绑定$ele成分,每回$ele成分触发点击操作会实行回调 handler函数,那样能够本着事件的反映做过多操作了,方法中的this是指向了绑定事件的成分

<div id="test">点击触发<div>

$("#test").click(function() {

    //this指向 div元素

});

 

 

 

 

 

方法三:$ele.click( [eventData ], handler(eventObject) )

动用与格局二平等,可是能够承受1个多少参数,那样的拍卖是为着缓和不一样成效域下数据传递的难点

<div id="test">点击触发<div>

$("#test").click(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

dblclick()的用法和click()的用法是近乎的,能够参照以上click()的用法。

dbclick与click事件不一样的是:

click事件触发需求以下几点:

  • click事件其实是由mousedown与mouseup 1个动作结合,所以点击的动作唯有在甩手后才触发

PS:mousedown和mouseup下壹节会讲到

dblclick事件触发必要以下几点:

dblclick又是由三个click叠合而来的,所以dblclick事件唯有在满意以下标准的景况下技术被触发

  • 鼠标指针在要素里面时点击。
  • 鼠标指针在要素里面时释放。
  • 鼠标指针在要素里面时再一次点击,点击间隔时间,是系统而定。
  • 鼠标指针在要素里面时再度出狱。

注意:在同1成分上同时绑定 click 和 dblclick 事件是不可取的。种种浏览器事件触发的顺序是见仁见智的,一些浏览器在dblclick从前接受四个click 事件 ,而一些浏览器只接受二个 click 事件。用户往往可通过差异的操作系统和浏览器配置双击灵敏度

 

一、jquery常用的风浪

Jquery 事件

jQuery鼠标事件之mousedown与mouseup事件

用户交互操作中,最简单易行直接的操作正是点击操作,因而jQuery提供了2个mousedown的迅猛方法能够监听用户鼠标按下的操作,与其对应的还也许有3个主意mouseup神速方法能够监听用户鼠标弹起的操作。两种艺术用法类似,下面以mousedown()为例

使用上极其轻松:

方法一:$ele.mousedown()

绑定$ele成分,不带任何参数一般是用来钦命触发三个事件,只怕相似用的可比少

<div id="test">点击触发<div>

$("ele").mousedown(function(){

    alert('触发指定事件')

})

$("#test").mousedown(function(){     $("ele").mousedown()  //手动指定触发事件

});

 

 

 

 

 

 

方法二:$ele.mousedown( handler(eventObject) )

绑定$ele成分,每便$ele元素触发点击操作会实践回调 handler函数

这样能够针对事件的报告做过多操作了

<div id="test">点击触发<div>

$("#test").mousedown(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.mousedown( [eventData ], handler(eventObject) )

动用与格局2一模二样,可是能够承受2个数据参数,那样的管理是为着消除分化成效域下数据传递的标题

<div id="test">点击触发<div>

$("#test").mousedown(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

mousedown事件触发需求以下几点:

  • mousedown重申是按下接触
  • 如果在贰个因素按住了鼠标不放,并且拖动鼠标离开这一个因素,并释放鼠标键,那依然是真是mousedown事件
  • 别的鼠标开关被按下时都能触发mousedown事件
  • 用event 对象的which差异按钮,敲击鼠标左键which的值是1,敲击鼠标中键which的值是二,敲击鼠标右键which的值是叁

mouseup事件触发须要以下几点:

  • mouseup强调是失手触发,与mousedown是倒转的
  • mouseup与mousedown组合起来就是click事件
  • 若果用户在二个成分上按下鼠标开关,并且拖动鼠标离开那个成分,然后释放鼠标键,那照旧是当成mouseup事件
  • 别的鼠标开关松手时都能触发mouseup事件
  • 用event 对象的which差异按钮,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是三

除此以外部须求要小心的是:

click与mousedown的区别:

  • click事件实际上是由mousedown于mouseup 三个动作结合,所以点击的动作唯有在放手后才触发

 

click(),dbclick()    

在javascript中事件调用格局为onclick、onmouseover等,在jquery中 使用事件无需写前边的on

jQuery鼠标事件之mousemove事件

用交互操作中,经常索要驾驭用户是或不是有移动的操作。基于移动的机制得以做出拖动、拖拽一文山会海的职能出来。针对移动事件,jQuery提供了二个mousemove的异常快方法能够监听用户移动的的操作

应用上特别简单:

方法一:$ele.mousemove()

绑定$ele成分,不带其余参数一般是用来内定触发贰个事变,用的可比少

<div id="test">点击触发<div>

$("ele").mousemove(function(){

    alert('触发指定事件')

})

$("#test").click(function(){     $("ele").mousemove()  //指定触发事件

});

 

 

 

 

 

 

方法二:$ele.mousemove( handler(eventObject) )

绑定$ele成分,每趟$ele成分触发点击操作会施行回调 handler函数

那般能够本着事件的举报做过多操作了

<div id="test">滑动触发<div>

$("#test").mousemove(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.mousemove( [eventData ], handler(eventObject) )

动用与艺术二同等,然而能够承受二个多少参数,那样的拍卖是为着消除不一样功用域下数据传递的难点

<div id="test">点击触发<div>

$("#test").mousemove(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

mousemove事件触发要求以下几点:

  • mousemove事件是当鼠标指针移动时接触的,纵然是二个像素
  • 假使管理器做任何重大的拍卖,恐怕只要该事件存在三个管理函数,那或然引致浏览器的惨重的习性难题

 

focus(),blur()    

bind()方法

jQuery鼠标事件之mousemove事件

用交互操作中,平日索要通晓用户是还是不是有活动的操作。基于移动的体制能够做出拖动、拖拽一多种的意义出来。针对移动事件,jQuery提供了二个mousemove的飞速方法能够监听用户移动的的操作

利用上特别简单:

方法一:$ele.mousemove()

绑定$ele成分,不带别的参数一般是用来钦点触发2个事变,用的可比少

<div id="test">点击触发<div>

$("ele").mousemove(function(){

    alert('触发指定事件')

})

$("#test").click(function(){     $("ele").mousemove()  //指定触发事件

});

 

 

 

 

 

 

方法二:$ele.mousemove( handler(eventObject) )

绑定$ele成分,每一次$ele成分触发点击操作会推行回调 handler函数

如此能够本着事件的申报做过多操作了

<div id="test">滑动触发<div>

$("#test").mousemove(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.mousemove( [eventData ], handler(eventObject) )

动用与措施2同等,可是能够承受一个数目参数,那样的拍卖是为着减轻差异作用域下数据传递的主题材料

<div id="test">点击触发<div>

$("#test").mousemove(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

mousemove事件触发要求以下几点:

  • mousemove事件是当鼠标指针移动时接触的,即便是一个像素
  • 万一管理器做任何重大的拍卖,大概1旦该事件存在五个管理函数,那可能引致浏览器的不得了的性批评题

 

change()    

为要素绑定事件

jQuery鼠标事件之mouseover与mouseout事件

在学JS的时候,大家还记得有四个方法叫移入移出事件呢?onmouseover()与onmouseout()事件~

jQuery当中一样提供了这样的轩然大波来监听用户的移入移出操作,mouseover()与mouseout()事件,两个用法类似,上边壹mouseover为例:

方法一:$ele.mouseover()

绑定$ele成分,不带任何参数一般是用来钦赐触发三个风浪,用的可比少

<div id="test">点击触发<div>

$("ele").mouseover(function(){

    alert('触发指定事件')

})

$("#test").click(function(){     $("ele").mouseover()  //指定触发事件

});

 

 

 

 

 

 

方法二:$ele.mouseover( handler(eventObject) )

绑定$ele成分,每一回$ele成分触发点击操作会实施回调 handler函数

如此能够针对事件的上报做过多操作了

<div id="test">滑动触发<div>

$("#test").mouseover(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.mouseover( [eventData ], handler(eventObject) )

选用与艺术贰依然故笔者,可是尚可2个数目参数,这样的处理是为了消除差别成效域下数据传递的难点

<div id="test">点击触发<div>

$("#test").mouseover(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

 

keydown(),keypress(),keyup()  

$("#id").bind("click",function(){
    //为id绑定click事件
    alert("ok");
}); 

jQuery鼠标事件之mouseenter与mouseleave事件

用交互操作中,平时索要知道用户操作鼠标是或不是有移到成分内部或是成非常部,因而jQuery提供了二个mouseenter和mouseleave的神速方法能够监听用户移动到当中的操作

利用上非常简单,二种参数字传送递形式与mouseover和mouseout是大同小异的,所以这里不再另行,首要讲讲差异,下边以mouseenter为例:

mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在日常很有用,jQuery的模拟那一风云,以便它可用于全数浏览器。该事件在鼠标移入到成分上时被触发。任何HTML成分都足以接受此事件。

mouseenter事件和mouseover的区别

关键点正是:冒泡的章程管理难点

简易的例证:

mouseover为例:

<div class="aaron2">

    <p>鼠标离开此区域触发mouseleave事件</p>

</div>

 

 

 

若果在p成分与div成分都绑定mouseover事件,鼠标在离开p成分,不过尚未距离div成分的时候,触发的结果:

  1. p成分响应事件
  2. div元素响应事件

此间的标题是div为啥会被触发? 原因正是事件冒泡的难题,p成分触发了mouseover,他会一贯往上找父成分上的mouseover事件,即使父成分有mouseover事件就能够被触发

故此在这种景观上面,jQuery推荐大家利用 mouseenter事件

mouseenter事件只会在绑定它的成分上被调用,而不会在后人节点上被触发

 

mousedown(),mouseup()    mouseenter(),mouseleave()  mouseover(),mouseout()  mousemove()

动用bind()方法绑定的事件,是多播事件委托,就是重新定义的风云不会覆盖前二个事变

jQuery鼠标事件之hover事件

学了mouseover、mouseout、mouseenter、mouseleave事件,也清楚了七个事件的同样点与不一样点,将来得以用来给成分做2个总结的切换效果

在要素上移进移出切换其换色,一般通过1个事件非常就足以完成,这里用mouseenter与mouseleave,那样能够制止冒泡难点

$(ele).mouseenter(function(){

     $(this).css("background", '#bbffaa');

 })

$(ele).mouseleave(function(){

    $(this).css("background", 'red');

})

 

 

 

 

 

 

如此那般目标是达到了,代码稍微有一些多,对于这么的总结逻辑jQuery直接提供了一个hover方法,能够便捷管理

只要求在hover方法中传送二个回调函数就足以了,不需求呈现的绑定三个事件

$(selector).hover(handlerIn, handlerOut)

 

  • handlerIn(eventObject):当鼠标指针进入成分时接触施行的风云函数
  • handlerOut(eventObject):当鼠标指针离开成分时接触推行的轩然大波函数

二、jquery挂事件

//可以按顺序执行两个事件
$("#id").bind("click",function(){alert("1");});
$("#id").bind("click",function(){alert("2")});

jQuery鼠标事件之focusin事件

当贰个要素,只怕其里面任何多少个成分得到主旨的时候,例如:input成分,用户在点击聚集的时候,若是开采者供给捕获这些动作的时候,jQuery提供了3个focusin事件

利用上非常简单:

方法一:$ele.focusin()

绑定$ele成分,不带任何参数一般是用来内定触发三个事变,一般用的比较少

<div id="test">点击触发<div>

$("ele").focusin(function(){

    alert('触发指定事件')

})

$("#test").mouseup(function(){     $("ele").focusin()  //指定触发事件

});

 

 

 

 

 

 

方法二:$ele.focusin( handler )

绑定$ele元素,每一次$ele成分触发点击操作会施行回调 handler函数

这么能够本着事件的上报做过多操作了

<div id="test">点击触发<div>

$("#test").focusin(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.focusin( [eventData ], handler )

采取与艺术二均等,可是可以接受叁个数量参数,那样的拍卖是为了解决区别效率域下数据传递的难题

<div id="test">点击触发<div>

$("#test").focusin(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

 

 

 

 

$(“p”).bind("事件名称”,要推行的无名氏函数)

one()方法

jQuery鼠标事件之focusout事件

当二个成分,恐怕其内部任何二个因素失去宗旨的时候,举个例子input成分,用户在点击失去焦的时候,假若开采者必要捕获这些动作,jQuery提供了叁个focusout事件

使用上特别简单:

方法一:$ele.focusout()

绑定$ele成分,不带任何参数一般是用来钦点触发八个事件,可能相似用的可比少

<div id="test">点击触发<div>

$("ele").focusout(function(){

    alert('触发指定事件')

})

$("#test").mouseup(function(){     $("ele").focusout()  //指定触发事件

});

 

 

 

 

 

 

方法二:$ele.focusout( handler )

绑定$ele成分,每趟$ele元素触发点击操作会试行回调 handler函数

这么能够针对事件的举报做过多操作了

<div id="test">点击触发<div>

$("#test").focusout(function() {

    //this指向 div元素

});

 

 

 

 

方法三:$ele.focusout( [eventData ], handler )

行使与艺术二同样,可是尚可二个数量参数,那样的管理是为了消除不一样成效域下数据传递的难点

<div id="test">点击触发<div>

$("#test").focusout(11111,function(e) {

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 

 

$(“p”).unbind("事件名称”)

绑定一回性事件

 

叁、jquery完结全选作用(重视是性质用.prop(),不用.attr())

//只执行一次单击操作 下次不会再执行
$("#id").one("click",function(){
    alert("a");
    return false;
});

 

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
</body>
<script type="text/javascript">
var arr = new Array(2,3,4);

//JSON
var a = {"one":"111",
         "two":"222",
         "three":arr,
         "four":{"hello":"你好"}
         };//元素名:值
//alert(a["one"]);//方法一取值
//alert(a.four.hello);//方法二取值

//遍历JSON数据
for(var k in a)
{
    alert(a[k]);
}

</script>
</html>

unbind()方法

 

例子1

剔除事件,撤消绑定

jQuery表单事件之blur与focus事件

在前头二.八与2.玖节我们学过了表单处总管件focusin事件与focusout事件,一样用于拍卖表单宗旨的事件还会有blur与focus事件

它们之间的本质不同:

是不是帮衬冒泡处理

举个简易的例子

<div>

  <input type="text" />

</div>

 

 

 

中间input元素能够触发focus()事件

div是input的父成分,当它涵盖的要素input触发了focus事件时,它就爆发了focusin()事件。

focus()在要素本人产生,focusin()在要素包罗的成分中发出

blur与focusout也亦是那样

 

图片 1

$("#id").unbind(); //删除id的所有事件
$("#id").unbind("click"); //删除id的所有click事件

jQuery表单事件之change事件

<input>成分,<textarea>和<select>成分的值都是能够发生变动的,开辟者能够由此change事件去监听这一个改动的动作

input元素

监听value值的转换,当有转移时,失去核心后触发change事件。对于单选开关和复选框,当用户用鼠标做出选拔时,该事件及时触发。

select元素

对于下拉摘取框,当用户用鼠标作出抉择时,该事件及时触发 

textarea元素

多行文本输入框,当有改变时,失去大旨后触发change事件

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<h1>全选效果</h1>
<div><input type="checkbox" value="qx" id="qx" /> 全选</div>
<br />
<div>
<input type="checkbox" value="1" class="ck" /> 潘庄
<input type="checkbox" value="1" class="ck" /> 火炬公园
<input type="checkbox" value="1" class="ck" /> 理工大
<input type="checkbox" value="1" class="ck" /> 马尚
<input type="checkbox" value="1" class="ck" /> 沣水
<input type="checkbox" value="1" class="ck" /> 南定
</div>
</body>
<script type="text/javascript">

$("#qx").click(function(){

        //找到全选按钮的选中状态
        //var xz = $(this)[0].checked;
        var xz = $(this).prop("checked");

        //改变所有的checkbox选中状态,用prop代替attr,解决了之前用js写出现的bug,但是在源代码中查不到
        $(".ck").prop("checked",xz);        
    })

</script>
</html>

敏捷事件

jQuery表单事件之select事件

当 textarea 或文本类型的 input 成分中的文本被增选时,会时有爆发 select 事件。
以此函数会调用实践绑定到select事件的具备函数,包涵浏览器的暗中同意行为。能够通过在有个别绑定的函数中回到false来幸免触发浏览器的暗许行为。

select事件只可以用于<input>成分与<textarea>成分

接纳上极其简单:

方法一:.select()

触发成分的select事件:

$("input").select();

方法二:$ele.select( handler(eventObject) )

绑定$ele成分,每一次$ele成分触发点击操作会实践回调 handler函数

那般能够针对事件的上报做过多操作了

<input id="test" value="文字选中"></input>

$("#test").select(function() { //响应文字选中回调

    //this指向 input元素

});

 

 

 

 

方法三:$ele.select( [eventData ], handler(eventObject) )

行使与办法2同样,然则还行三个多少参数,那样的管理是为了缓和区别功能域下数据传递的主题素材

<input id="test" value="文字选中"></input>

$("#test").select(11111,function(e) {//响应文字选中回调

    //this指向 div元素

   //e.data  => 11111 传递数据

});

 

 

 

例子2

javascript事件去掉on基本都援助

 

图片 2

click()方法

 

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
.d{ width:150px; height:150px; margin:5px; background-color:red; float:left}
</style>
</head>

<body>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>

</body>
<script type="text/javascript">

$(".d").mouseover(function(){
        //让所有的DIV变成红色
        $(".d").css("background-color","red");
        //让选中的变为绿色
        $(this).css("background-color","blue");
    })

$(".d").mouseout(function(){
        //让所有的DIV变成红色
        $(this).css("background-color","red");
    })

</script>
</html>

单击事件

本文由bwin必赢发布,转载请注明来源

关键词: jQuery 必赢亚洲565net jquery 事件