<!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. 侯捷C++学习（一）

    //c++学习//标准库非常重要//要规范自己的代码complex c1(2,1);complex c2;complex* pc = new complex(0,1);string s1(" ...

  2. zigbee CC2530首选方案模组:TZU06A1

    模块特点 微型24-pin 邮票式SMT 封装 提供U.FL 接口,用于外接SMA 天线 小尺寸封装:16mm*20mm*3.7mm 通过欧盟CE0168.欧盟ROHS 认证 基于8051 单片机架构 ...

  3. obtainFreshBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  4. spring#事件发布订阅

    1. 如果在应用中发生了某些事件,事件会被拦截和处理就好了,这样就有了很大的灵活性,至少代码不会紧密的耦合在一起, 代码的解耦就是业务的解耦,业务A的代码不用手动的调用业务B的代码,业务B只需要监听相 ...

  5. redis数据导入与导出以及配置使用

    最近在研究redis 遇到redis requires Ruby version >= 2.2.2问题 解决办法是 先安装rvm,再把ruby版本提升至2.3.3 1.安装curl sudo y ...

  6. Linux下安装JDK及其碰到的问题解决

    1.下载一个linux版本的jdk包 2.新建一个目录,专门用来存放安装包 mkdir    /home/software 3.将jdk包拷贝到/home/software下面,并解压 4.配置jdk ...

  7. 吴裕雄--天生自然java开发常用类库学习笔记：线程操作案例——生产者与消费者

    class Info{ // 定义信息类 private String name = "李兴华"; // 定义name属性 private String content = &qu ...

  8. Visual Studio Code 断点调试配置方法（请按我的步骤 一定可以做到）

    1 visual studio code 的 extentions 里安装插件 debugger for chrome2 devtool: 'eval-source-map', cacheBustin ...

  9. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  10. （20）sopel算法

    基础知识的理论,主要看这个博客:https://blog.csdn.net/github_38140310/article/details/68959931 然后代码展示: #include &quo ...