javascript的自定义对象/取消事件/事件兼容性/取消冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
    <!--
       自定义对象是一种特殊数据类型，由属性和方法封装而成.
     -->
     <script type="text/javascript">
         function method1() {
         var person=new Object();
             //添加属性
               person.name=" 瑞兹 ";
               person.spell=957;
             //添加方法1.
               person.say=new Function("alert(' person.name ')");
              //添加方法2.
              person.way=way;
              function way(){
                 var num=0;
                  for(var i=0;i<100;i++){
                        num+=i;
                    }
                        alert(num);
                }

         }
    /*
      构造器 创建对象
    */

        function person(name,age){
                   //定义属性
                      this.name=name;
                     this.age=age;
                 //定义成员方法：
                  this.sayName=function(){
                     alert(this.name);
                }
               }

             function method2(){
                    var p=new person();
                       //通过构造器创建对象
              }         

    /*
      JSON  是一种轻量级的数据交换格式 ：
          -使用 键值对 形式定义
          -名称需要用双引号 “” 引起来
          -多个对定义之间 使用 ,隔开

    */
                function method3(){
            var p={"name":"张韶涵","age":30,"say":function(){alert("看得最远的地方")}}；

           }

     </script>
</head>
<body>
    <input type="button" onclick="method1();" value="创建通用对象模板!">
    <input type="button" onclick="method2();" value="创建对象模板!">
    <input type="button" onclick="method3();" value="创建JSON对象模板!">
</body>
</html>                                

2.取消事件：

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
    <script type="text/javascript">
  function judge(){
     var result =confirm('确定要删除吗？');
     return result;

     }
</script>

<body>
   <form>
     <input type="text" value="我是要提交的数据">
    <input type="submit" value="删除" onclick="judge();">
  </form>     

</body>
</head></html>

3.事件兼容性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
    <script type="text/javascript">
  function fun(e){
     console.log(event.clientX+','+event.clientY);//获取点击时的位置，单位是像素，次写法可能出现不兼容问题      //不兼容的提示：reffereceError event is not defined       // 兼容写法如下：

 console.log(e.clientX+','+e.clientY);/* 获取事件源的写法（即事件的目标节点）　　IE:event.srcElement　　Fire Fox: event.target*/console.log(event.srcElement);

console.log(event.target);// 兼容写法：　　var evesrc=event.srcElement||event.target;  console.log(evesrc.nodeName);

} </script> <body> <p onclick="console.log(event.clientX);">　　HTML使用</p>

 <p onclick="fun(event);">　　JS使用</p>

</body>
</head>
</html>

5.取消冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡处理机制</title>
<style type="text/css">
    div{
        border:1px solid #ccc;
        margin:10px;
        padding:20px;
    }
    #d1{
        width:300px;
        height:300px;
        background-color:red;
    }
    #d2{
        width:200px;
        height:200px;
        background-color:blue;
    }
    #d3{
        width:100px;
        height:100px;
        background-color:green;
    }
</style>

<script type="text/javascript">
    function f1(){
        alert("D1");
    }
    function f2(){
        alert("D2");
    }
    function f3(e){
        alert("D3");
        //取消冒泡 的写法
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble();

        }

    }

</script>

</head>
<body>
    <div id="d1" onclick="f1()">D1
        <div id="d2" onclick="f2();">D2
            <div id="d3" onclick="f3(event);">D3</div>
        </div>
    </div>
</body>
</html>