bink绑定事件
hover合成事件
代码示例：
<!DOCTYPE html> <html> <head> <title>test1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <style type="text/css"> #panel{ width:300px; height:300px; border:1px solid; } #head{ background:red; } #content{ width:100px; height:100px; border:1px solid; } </style> <script type="text/javascript"> $(function(){ //hover合成事件 /* $("#head").hover(function(){ $(this).next().show(); },function(){ $("#content").hide(); }); */ //绑定事件b $("#head").bind("click",function(){ $("#content").show(); }); }); </script> </head> <body> <div id="panel"> <h5 id="head">什么是jquery</h5> <div id="content" style="display:none">jquery是一门前端的语言</div> </div> </body> </html>
模拟操作：trigger(触发自定义的事件)
<!DOCTYPE html> <html> <head> <title>test5.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //自定义事件 /* $("#btn").bind("myclick",function(){ $("#div1").append("<p>never</p>"); }); */ //自定义带参数的事件 /* $("#btn").bind("myclick",function(event,mes1,mes2){ $("#div1").append("<p>never"+mes1+mes2+"</p>"); }); */ $("input").bind("focus",function(){ $("#div1").append("<p>never</p>"); }); //触发自定义事件 /* $("#btn").trigger("myclick"); */ //触发带参数的自定义事件：注意参数是以数组的形式传送 /* $("#btn").trigger("myclick",["111","222"]); */ //不仅触发为input元素绑定的focus事件，也会使得input元素本身得到焦点。 //$("input").trigger("focus"); //只会触发为input元素绑定的focus事件，不会使得input元素本身得到焦点。 $("input").triggerHandler("focus"); }); </script> </head> <body> <button id="btn">button</button> <div id="div1" style="100px;height:100px;border:1px solid;"></div> input:<input type="text" value="hello world"> </body> </html>
事件对象的属性：event.type , event.preventDefault 等
<!DOCTYPE html> <html> <head> <title>test3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ /* $("#sub").click(function(event){ //event.type事件的类型 alert(event.type); }); */ //event.preventDefault() 阻止默认事件的行为******** $("#sub").click(function(event){ var name = $("#username").val(); if(name==null||name==""){ event.preventDefault(); } ; }); //event.target获取到触发事件的元素 /* $("#a1").click(function(event){ alert(event.target); return false; // 阻止链接跳转 }); */ //event.pageX和event.pageY获取相当于光标对于页面的x坐标和y坐标 /* $("body").click(function(event){ alert("x:"+event.pageX+" y:"+event.pageY); }); */ //event.which在鼠标点击事件中获取鼠标的左（1），中（2），右（3）键 /* $("#username").mousedown(function(event){ alert(event.which); }); */ //获得键盘的按键 /* $("#username").keyup(function(event){ alert(event.which); }); */ //event.metaKey********* /* $("#username").click(function(event){ alert(event.metaKey); }) */; }); </script> </head> <body> <a href="test1.html">超链接</a> <form action="test1.html"> 用户名：<input type="text" id="username"/> <input type="submit" value="提交" id="sub"/> </form> <div id="msg" style="border:1px solid;100px;height:100px"></div> <a id="a1" href="http://baidu.com">百度</a> <div id="div1" style="100px;height:100px;border:1px solid"></div> <span>span元素</span> <input id="inp1" type="text"> </body> </html>