<!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>

javascript的自定义对象/取消事件/事件兼容性/取消冒泡的更多相关文章

  1. javascript创建自定义对象和prototype

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. javascript获取事件源对象和产生事件的对象

    事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  3. JavaScript内置对象与原型继承

    (一)   理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype    //tru ...

  4. javascript第一弹——对象

    一. 什么是对象 对象是包含一组变量(称为属性)和函数(称为方法)的集合的实例. javascript中所有事物都是对象 javascript有很多内建对象 javascript允许自定义对象 对象只 ...

  5. javascript 内置对象

    什么是对象 javascript中的所有事物都是对象:字符串  数组  数值  函数... 每个对象都带有属性和方法 javascript允许自定义对象      自定义对象: 定义并创建对象实例 使 ...

  6. JavaScript---网络编程(4)-Date、Math、Global和自定义对象

    本节博客进行Date对象.Math对象.Global对象和自定义对象的用法演示. 首先是一个out.js文件内容(输出到网页中的自定义输出方法): function println(parma){ d ...

  7. 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

    1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...

  8. JavaScript事件---事件对象

    发文不易,若转载传播,请亲注明出处,谢谢!   内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...

  9. JavaScript(第二十四天)【事件对象】

    JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的 ...

随机推荐

  1. Java常考面试题(二)(转)

    序言 昨天刚开始的"每日5题面试"这类文章,感觉还不错,把一些平常看似懂了的东西,弄清楚了.就像什么是虚拟机?这个问题,看起来知道,但是要说出个所以然来,又懵逼了,经常回过头来看看 ...

  2. 解题报告：luogu P2299

    题目链接:P2299 Mzc和体委的争夺战 单源最短路板子题吗,体面晦涩难懂(语文不好),以为是有向图,只有\(30pts\),其实是无向的,我使用了刚学来的\(SPFA\),通过了此题: \(Cod ...

  3. R语言 几个易错的地方

    1.列表与向量 定义一个向量,然后向内添加元素,得到一个长向量列表: > a = c() #定义一向量 > for (i in 1:5) + a = c(a,i) > a [1] 1 ...

  4. 深度学习之常用linux命令总结

    深度学习中常用linux命令总结 1.创建文件夹 mkdir 文件名2.删除文件 rm -d 目录名 #删除一个空目录 rmdir 目录名 #删除一个空目录 rm -r 目录名 #删除一个非空目录 r ...

  5. edge浏览器两个标签页localStorage不同步，解决办法

    今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...

  6. duilib+cef自定义浏览器控件编译错误

    新版博客已经搭建好了,有问题请访问 htt://www.crazydebug.com 公司二期好主播项目,决定用duilib开发界面,且从ie内核换成谷歌内核 再用duilib自定义一个Browser ...

  7. python 获取cpu、内存、硬盘等实时信息 psutil

    psutil是一个跨平台库,能够轻松实现获取系统运行的进程和系统利用率(CPU,内存,磁盘,网络等)信息,主要应用于系统监控,分析和限制系统资源及进程的管理,它实现了同等命令行工具提供的功能,如ps, ...

  8. raspberry pi-php-exec

    遇到的问题是在树莓派上搭建的web服务器,想通过网页操控树莓派的gpio,网页是通过php实现的,通过php的exec函数调用写好的程序实现对gpio的操作,但是赖何没有效果,分析也知道是权限问题,最 ...

  9. C++ do while无限循环~

    #include<iostream> using namespace std; #include<Windows.h> int main() { ; ; system(&quo ...

  10. delphi dll编写与调用

    dll代码: mydll.dpr library mydll; uses System.SysUtils, System.Classes, uFunction in 'uFunction.pas'; ...