<!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. delphi对ZIP解压

    Delphi 对GZIP解压 作者:admin 来源:未知 日期:2010/5/9 13:08:46 人气:获取失败 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 呵呵,终于 ...

  2. [前端] Vue封装播放器、打包、上传NPM

    一.使用icomoon 1.生成和下载图标相关文件 先使用icomoon获取我们要使用的图标,例如播放.暂停.停止.全屏等图标. icomoon网站:https://icomoon.io/app/#/ ...

  3. 让SVG以组件的方式引入吧！

    安装 npm i -D vue-svg-loader or yarn add -D vue-svg-loader webpack 配置 module.exports = { module: { rul ...

  4. 基于AQS自己实现一个同步器

    前面说了这个多,我们可以自己尝试实现一个同步器,我们可以简单的参考一下ReentrantLock这个类的实现方式,我们就简单的实现一个不可重入的独占锁吧! 一.简单分析ReentrantLock的结构 ...

  5. 048、Java中使用switch判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. DevOps - 工程师职责

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  7. Problem B: Bulbs

    Problem B: Bulbs Greg has an m×n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. ...

  8. P1083 是否存在相等的差

    P1083 是否存在相等的差 转跳点:

  9. 洛谷训练场——简单模拟 排座位（P1056）

    题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课时会交头接耳. 同 ...

  10. wamp修改端口localhost

    一.修改Apache端口 1.在界面中选Apache,弹出隐藏菜单选项,打开配置文件httpd.conf: 2.找到 Listen 80: ServerName localhost:80; 3.将 8 ...