首页 > 代码库 > JavaScript学习笔记及知识点整理_3

JavaScript学习笔记及知识点整理_3

2024-08-17 07:20:29   220人阅读

1.js的事件冒泡及阻止方法:
事件冒泡的概念:
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
换言之,也就是说,如果子类对象的事件被激活,那么父类对象的同类事件也会被激活,并按照有子类对象一直向外延伸的顺序执行.例如下面的代码:

<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
    <div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
        <script type="text/javascript">
            function outSideWork() {
                alert(‘My name is outSide,I was working...‘);
            }

            function inSideWork() {
                alert(‘My name is inSide,I was working...‘);
            }
            //冒泡使得大盒子和小盒子都发生命令,并且按照由内到外的顺序执行            
        </script>

阻止事件冒泡的代码如下,即将事件对象传入,并且调用stopPropagation方法,代码如下(针对不同浏览器进行了优化):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function demo(id,e) {
        alert(id);
        stopBubble(e);
    }

    function stopBubble(e) {
        if (e && e.stopPropagation){//判断有没有stopPropagation属性
            e.stopPropagation();//停止传播
        }
        else {
            window.event.cancelBubble = true;
        }
    }
</script>
</head>
<body id="body" onclick="demo(this.id , event);">
    <div id="outer" onclick="demo(this.id , event);">
        <div id="inner" onclick="demo(this.id , event);">点击</div>
    </div>
</body>
</html>

2.跨页面通讯之frameset内部页面如何交互:
window.frames 返回窗口中所有命名的框架
parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
window.opener返回用open方法打开当前窗口的那个窗口

3.JSON

  • JSON的语法规则:数组用[]表示,对象用{}表示,名称.值对组成数组对象.名称置于双引号中,值有字符串,数值,布尔值,null,对象和数组.并列的数值之间用对象分割.

序列化JSON对象:

var xiaoming = {
    name: ‘小明‘,
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    ‘middle-school‘: ‘\"W3C\" Middle School‘,
    skills: [‘JavaScript‘, ‘Java‘, ‘Python‘, ‘Lisp‘]
};

JSON.stringify(xiaoming); 
// ‘{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}‘

第二个参数可以用于输出对象的指定属性:
JSON.stringify(xiaoming, [‘name‘, ‘skills‘], ‘ ‘);
输出结果

{
  "name": "小明",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

还可以传入一个函数,利用函数来处理预先处理键值对:

function convert(key, value) {
    if (typeof value =http://www.mamicode.com/== ‘string‘) {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, ‘  ‘);
/*
{
  将value全部变成大写.
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}
*/

将JSON字符串转化为js对象
直接用JSON.parse即可将JSON字符串转化为一个js对象.如下面的代码所示:

JSON.parse(‘[1,2,3,true]‘); // [1, 2, 3, true]
JSON.parse(‘{"name":"小明","age":14}‘); // Object {name: ‘小明‘, age: 14}
JSON.parse(‘true‘); // true
JSON.parse(‘123.45‘); // 123.45

parse也可以接受一个函数,用来在解析的时候对key和value完成对应的操作:

JSON.parse(‘{"name":"小明","age":14}‘, function (key, value) {
    // 把number * 2:
    if (key === ‘name‘) {
        return value + ‘同学‘;
    }
    return value;
}); // Object {name: ‘小明同学‘, age: 14}

JavaScript学习笔记及知识点整理_3


联系
我们