jQuery相关方法9----事件相关
一、事件冒泡和阻止事件冒泡
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("#dv1").click(function(){ console.log($(this).attr("id")); }); $("#dv2").click(function(){ console.log($(this).attr("id")); return false;//阻止事件冒泡 }); $("#dv3").click(function(){ console.log($(this).attr("id")); return false;//阻止事件冒泡 }); }); </script> <div id="dv1" style="width: 300px;height: 300px;background: #ccc;"> <div id="dv2" style="width: 200px;height: 200px;background: gray;"> <div id="dv3" style="width: 100px;height: 100px;background: red;"></div> </div> </div>
二、事件触发
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //focus事件 $("#txt").focus(function(){ $(this).next("span").text("事件触发了!!!"); }); //第一种:让别的元素的事件触发----对象.事件名字() $("#btn1").click(function(){ $("#txt").focus(); }); //第二种:对象.trigger("事件类型")--触发事件的默认行为 $("#btn2").click(function(){ $("#txt").trigger("focus"); }); //第三种:对象.triggerHandler("事件类型")--不触发事件的默认行为 $("#btn3").click(function(){ $("#txt").triggerHandler("focus"); }); }); </script> <input type="button" value="触发1" id="btn1"> <input type="button" value="触发2" id="btn2"> <input type="button" value="触发3" id="btn3"> <input type="text" id="txt"><span></span>
三、事件参数对象
- 推出事件参数对象
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //1.推出事件参数对象 $("#btn").click(function(){ console.log(arguments.length);//1----一个参数 console.log(arguments[0]);//x.Event{}.是个对象 }); </script> <input type="button" value="点击" id="btn">
-
例1:判断用户按下鼠标的时候,有没有按下alt键或者shift键或者ctrl键
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $(document).mousedown(function(e){ if(e.altKey){ console.log("按下了alt键和鼠标"); }else if(e.shiftKey){ console.log("按下了shift键和鼠标"); }else if(e.ctrlKey){ console.log("按下了ctrl键和鼠标"); }else{ console.log("按下了鼠标"); } }); }); </script>
-
例2:用户在页面按键(A-K),可以改变div的背景颜色
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $(document).keydown(function(e){ switch(e.keyCode){ case 65:$("#dv").css("backgroundColor","red");break; case 66:$("#dv").css("backgroundColor","orange");break; case 67:$("#dv").css("backgroundColor","yellow");break; case 68:$("#dv").css("backgroundColor","green");break; case 69:$("#dv").css("backgroundColor","blue");break; case 70:$("#dv").css("backgroundColor","purple");break; case 71:$("#dv").css("backgroundColor","white");break; case 72:$("#dv").css("backgroundColor","pink");break; case 73:$("#dv").css("backgroundColor","yellowgreen");break; case 74:$("#dv").css("backgroundColor","deeppink");break; case 75:$("#dv").css("backgroundColor","grey");break; } }); }); </script> <div id="dv" style="width: 300px;height: 300px;"></div>
四、事件参数对象下的几个属性
- e.target----得到的是触发该事件的目标对象
- e.currentTarget----得到的是触发该事件的当前对象
- e.delegateTarget-----得到的是代理的这个对象
【转载文章务必保留出处和署名,谢谢!】