什么是js事件里的父级,能简单清晰的说明不?

JavaScript012

什么是js事件里的父级,能简单清晰的说明不?,第1张

理解以下几点后就很清楚了:

DOM是html 文档接口。

DOM将html文档的元素(即html标签)根据层级整理成树状模型。

而js操作html都是通过DOM来操作的。

一棵树,有干、有枝、有叶,叶的父级是枝,枝的父级是干。

如果你只是看文件的内容的话它是可以这样理解的:

中国 包含 云南,云南 包含 红河州, 红河州 包含 红河人hongheren.cn

红河州就是红河人 的父级,云南是红河州的父级,中国是云南的父级

例:<html><body><div></div></body></html>

body是div的父级,html是body的父级

其它一次类推。

以上是DOM父级的理解,有助于理解js事件的父级。

js事件的父级,说白了就是事件发生点的元素的对象的父级对象上的事件。

如下面的代码保存为html文件:

<html><body onclick="alert('body')"><div onclick="alert('div')"

style="width:600pxheight:400pxbackground-color:F00"></div></body></html>

用浏览器开打后你会发现点击div是body的onclick事件也被触发了。

如上,应该能够理解了吧。

JavaScript 本身是不支持这种查找的, 因为"子对象"只是父对象中的一个引用, 它也可以被其它对象引用, 这样一个"子对象"就可能有多个"父对象". 能实现的是在代码运行中获取它的上级对象.

var Obj = function()

{

    this.child = {

        parent: {},

        get_parent: function()

        {

            return this.parent

        }

    }

    this.init = function()

    {

        this.child.parent = this

    }

    this.init()

}

var o = new Obj

console.log(o.child.get_parent())

/**

* 说明:通过 “父子树” 访问场景内的对象

* 操作:无,查看log信息

* 教程:ThingJS 教程——>园区与层级——>场景层级

* 难度:★★☆☆☆

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

})

// 加载场景后执行

app.on('load', function (ev) {

// 获取园区对象

var campus = ev.campus

// 通过场景的 父子树 访问对象

var children = campus.children

for (var i = 0i <children.lengthi++) {

var child = children[i]

var id = child.id

var name = child.name

var type = child.type

console.log('id: ' + id + ' name: ' + name + ' type: ' + type)

}

// id 107 为白色厂区建筑,

// parent: app.query('107')[0] 为在厂区内创建物体

// 厂区内创建的物体,只有在进入厂区后才会能显示,点击厂区进入,则看到绿色小车

// 当推出厂区后,绿色小车则隐藏

var obj = app.create({

type: 'Thing',

id: 'No1234567',

name: 'truck',

parent: app.query('107')[0],

url: 'https://model.3dmomoda.com/models/8CF6171F7EE046968B16E10181E8D941/0/gltf/', // 模型地址

position: [0, 0, 0], // 世界坐标系下的位置

complete: function (ev) {

//物体创建成功以后执行函数

console.log('thing created: ' + ev.object.id)

}

})

var campus = ev.campus

console.log('after load ' + campus.id)

// 切换层级到园区

app.level.change(campus)

})