<!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执行操作系统脚本

    http://www.cnblogs.com/bencakes/p/6139477.html 以前只是知道Runtime.getRuntime().exec(command);这种用法,但是有时候命令 ...

  2. 我用Python帮朋友做了张猪肉数据分析图，结果。。。

    却发现他是这么拿我当兄弟的 事情的经过是这样的: 我开开心心的去一家烧饼店吃饭 .   ​ 抬头一看,二师兄又涨价了 叹了口气,再这么下去真的要吃不起夹肉的烧饼了 点了两个烧饼一碗馄饨 快吃完的时候, ...

  3. 064、Java中递归调用

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

  4. 10 Class文件结构

  5. iPhone Safari下iframe不显示滚动条无法滚动的解决方法。iframe的坑！

    <div class="dataTables_wrapper" style="-webkit-overflow-scrolling:touch;overflow:a ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-play-circle

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 《ES6标准入门》(阮一峰)--8.函数的扩展

    1.函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log ...

  8. MongoDB 3.2 升级至 3.4.6

    MongoDB 升级测试步骤:1.MongoDB版本升级顺序3.2->3.4->3.6->4.0 不能跨版本升级2.升级到3.4后,您不能降级到3.2.7或更早版本.您只能降级到3. ...

  9. 怎么更改Rstudio中的默认目录

    方法一. 每次启动Rstudio之后,执行代码 setwd("F:/R/R_data") 默认目录就会修改为双引号内的位置路径. 方法二. 对Rstudio进行设置一次即可. ①点 ...

  10. 如何将本地项目推送到Github

    如何将本地项目推送到Github Tip:在本地要安装好Git,官网:https://git-scm.com/ 一个学习Git的好地方:https://try.github.io/ 在线闯关实战,边练 ...