javaScript 外部对象2

最新推荐文章于 2022-05-27 10:13:11 发布

qhj1610

最新推荐文章于 2022-05-27 10:13:11 发布

阅读量262

点赞数

分类专栏： java点滴文章标签：事件冒泡处理机制

本文链接：https://blog.csdn.net/qhj1610/article/details/69788233

版权

java点滴专栏收录该内容

19 篇文章 0 订阅

订阅专栏

document 对象

创建新节点
-document.createElement（elementName）
-elementName,要创建的元素的标签名称
-返回的是新创建的节点
js 代码如下：

var newNode = document.createElement（"input"）；

//设置节点信息
newNode.type="text";
newNode.value="marry";
newNode.style.color="red";

增加新节点
parentNode.appendChild(newNode);
追加，新节点作为父节点的最后一个子节点添加

parentNode.insertBefore(newNode,refNode);
refNode:参考节点，新节点位于参考节点之前添加

//c 作为兄弟节点添加
A.inserBefore(c,d);

//添加一个孩子 b 
A.appendChild(b);

删除节点
node.removeChild(childNode)
删除某个子节点，childNode 必须是 node 的子节点

自定义对象

1. 自定义对象概述
自定义对象是一种特殊的数据类型，由属性和方法封装而成。
属性指与对象有关的值对象.属性名
方法指对象可以执行的行为或可以完成的功能对象.方法名()

2. 创建对象

直接创建对象

直接创建 Object 对象

    function testObject(){
        var personObj = new Object();
        //添加属性
        personObj.name="jack";
        personObj.age="18";
        //添加方法
        personObj.say = new Function("alert('hello')");
        //测试
        personObj.say();   //hello
        alert(personObj.age);  //18
    }

使用构造器创建对象
定义构造函数，以创建自定义的对象
语法：function ObjName (参数1，参数2，···){}

function Person(n,a){
    //定义 name 和 age 属性
    this.name=n;
    this.age=a;
    //定义方法 showName
    this.showName = function(){
        alert("my name is"+ this.name);
    }
    //定义方法 introduceSelf
    this.introduceSelt = introFunc();   
}
function introFunc(){
    alert(this.name +":"+ this.age);
}


//测试对象
function test(){
    var p1 = new Person("marry",10);
    alert(p1.name);
    alert(p1.age);
    alert(p1.showName());
    alert(p1.introduceSelf());
}

使用 JSON 创建对象
JavaScript Object Notation,是一种轻量级的数据交换格式。
1. 使用名/值对的方式定义
2. 名需要用“”引起来，如果值是字符串类型也需要用 “”引起来
3. 多对定义之间用”,”号隔开

var obj = {"name":"Dave","age":88};
//测试对象
alert(obj.name);

js 中的事件和 event 对象

事件
1. 什么是事件？
页面元素状态发生改变，用户在操作键盘或鼠标时触发的动作。事件触发后都会产生 event对象

键盘事件
鼠标事件
状态改变事件

２. 事件属性
通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作。
3. 事件的定义

//<html>中的代码
<input type="button" value="按钮" onclick="method();">

//js 中的代码
btnObj.onclick = method;
//或者
btnObj.onclick = function(){
    alert("hello");
}

4.取消事件
onXXX = “return false;”;

event 对象
1. event 对象概述
任何一个事件触发时都会产生 event 对象，event 的对象记录了事件触发时鼠标的位置、键盘按键状态和触发对象等信息。使用 event 对象可以获得相关信息，比如单击位置、触发对象等。
2. 获取 event 对象
根据不同的浏览器获取 event 对象有所不同
IE 浏览器直接使用 event,代码如下：

<p onclick="alert(event.clientX);">p text</p>
<div onclick="func();">div text</div>
function func(){
    alert(event.clientX +":"+ event.clientY);
}

Firefox 浏览器，js 中的代码不能直接写 event（需要作为参数传入），代码如下：

<div onclick="func(event)">div text</div>

function func(event){
    alert(event.clientX+":"+event.clientY);
}

3. 如何使用 event 对象
事件源：触发事件的元素(事件的目标节点)。
对于 event 对象经常需要获得事件源，而不同浏览器又有所区别
IE 浏览器：event.srcElement
FireFox 浏览器：event.target
获取事件源代码如下：

<div onclick="func(event)">div text</div>

//IE 
function func(e){
    alert(e.srcElement);
}
//FireFox
function func(e){
    alert(e.target);
}

//考虑兼容问题可以这样写：
fuction func(e){
    var obj = e.srcElement || e.target
    alert(obj);
}