jQuery当中的事件（第六章ppt）

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>