-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path3、使用Javascript和DOM APIS.html
More file actions
20 lines (19 loc) · 28.8 KB
/
3、使用Javascript和DOM APIS.html
File metadata and controls
20 lines (19 loc) · 28.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>3、使用Javascript和DOM APIS</title>
<basefont face="微软雅黑" size="2" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="exporter-version" content="Evernote Windows/303788 (zh-CN, DDL); Windows/10.0.10586 (Win64);"/>
<style>
body, td {
font-family: 微软雅黑;
font-size: 10pt;
}
</style>
</head>
<body>
<a name="366"/>
<h1>3、使用Javascript和DOM APIS</h1>
<div>
<span><ul><li><span style="font-size: 19px;">javascript代码的位置</span></li></ul><div><br/></div><div>这里推荐使用组件的方法添加脚本，例如添加一个log框架</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>AFRAME.registerComponent('log', {</div><div style="margin-left:40px;">schema: {type: 'string'},</div><div style="margin-left:40px;">init: function () {</div><div style="margin-left:80px;">var stringToLog = this.data;</div><div style="margin-left:80px;">console.log(stringToLog);</div><div style="margin-left:40px;">}</div><div>});</div></div><div>然后再html里面使用框架。</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><a-scene log="Hello, Scene!"></div><div><a-box log="Hello, Box!"></a-box></div><div></a-scene></div></div><div>组件封装了所有代码，以便可重用、声明和共享。</div><div><br/></div><ul><li><span style="font-size: 19px;">通过查询和遍历获取实体</span></li></ul><div>标准的DOM提供了用于遍历、查找和选择的程序，<b><code style="margin: 0px; padding: 0px 0.25ch 0px 0.25ch; box-sizing: border-box; font-size: 13px; font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace; color: rgb(51, 51, 51); font-style: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px;">.querySelector()</code><span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"><b> 和</b></span> <span style="color: rgb(51, 51, 51); font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace; font-size: 13px; font-style: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;">.querySelectorAll().灵感来自jQuery。</span></b></div><div>测试场景：</div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><html></div><div style="margin-left:40px;"><a-scene></div><div style="margin-left:40px;"><a-box id="redBox" class="clickable" color="red"></a-box></div><div style="margin-left:40px;"><a-sphere class="clickable" color="blue"></a-sphere></div><div style="margin-left:40px;"><a-box color="green"></a-box></div><div style="margin-left:40px;"><a-entity light="type: ambient"></a-entity></div><div style="margin-left:40px;"><a-entity light="type: directional"></a-entity></div><div style="margin-left:40px;"></a-scene></div><div></html></div></div><div><br/></div><div>关于 <span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="font-size: 1.3rem;">.querySelector()获取DOM里面第一个元素</span></code></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var sceneEl = document.querySelector('a-scene');</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div>这里引用了<a-scene>场景，如果元素有id的话可以使用id选择 <span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"> (i.e., </span><code style="margin: 0px; padding: 0px 0.25ch 0px 0.25ch; box-sizing: border-box; font-size: 13px; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-weight: 600; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px;">#<ID></code><span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">).</span></div><div><span style="font-size: 15.4px;"><span style="font-family: 'Fira Sans', Helvetica, Arial, sans-serif;"><span style="color: rgb(51, 51, 51);">例如获取一个#redBox</span></span></span></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var sceneEl = document.querySelector('a-scene');</div><div>console.log(sceneEl.querySelector('#redBox'));</div><div>// <a-box id="redBox" class="clickable" color="red"></a-box></div></div><div><br/></div><div>关于<span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.querySelectorAll() 获取一组元素</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);">通过标签获取一组元素</span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>console.log(sceneEl.querySelectorAll('a-box'));</div><div>// [</div><div>// <a-box id="redBox" class="clickable" color="red"></a-box>,</div><div>// <a-box color="green"></a-box></div><div>// ]</div></div><div><font color="#476582" face="Fira Mono, Andale Mono, Monaco, Courier, monospace">也可以通过calss_name获取</font> <span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;"> (i.e., </span><code style="margin: 0px; padding: 0px 0.25ch 0px 0.25ch; box-sizing: border-box; font-size: 13px; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-weight: 600; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px;">.<CLASS_NAME></code><span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">)</span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>console.log(sceneEl.querySelectorAll('.clickable'));</div><div>// [</div><div>// <a-box id="redBox" class="clickable" color="red"></a-box></div><div>// <a-sphere class="clickable" color="blue"></a-sphere></div><div>// ]</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);">还可以通过属性名字获取</span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>console.log(sceneEl.querySelectorAll('[light]'));</div><div>// [</div><div>// <a-entity light="type: ambient"></a-entity></div><div>// <a-entity light="type: directional"></a-entity></div><div>// ]</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);">遍历数组</span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var els = sceneEl.querySelectorAll('*');</div><div>for (var i = 0; i < els.length; i++) {</div><div>console.log(els[i]);</div><div>}</div></div><div><span style="font-size: 19px;"><b><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></b></span></div><ul><li><span style="font-size: 19px;"><b>修改 A-Frame场景</b></span></li></ul><div><br/></div><div><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.createElement() //创建标签</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var el = document.createElement('a-entity');</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.appendChild() //添加标签</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var sceneEl = document.createElement('a-scene');</div><div>var entityEl = document.createElement('a-entity');</div><div>sceneEl.appendChild(entityEl);</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.remove() //删除标签</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.parentNode.removeChild(entityEl);</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><ul><li><span style="font-size: 19px;"><b><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);">修改实体</span></span></b></span></li></ul><div><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.setAttribute() //添加/修改属性</code></span></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.setAttribute('geometry', {</div><div>primitive: 'box',</div><div>height: 3,</div><div>width: 1</div><div>});</div></div><div>修改属性里面的值</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.setAttribute('material', 'color', 'red');</div></div><div><br/></div><div>修改属性里面的多个值</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>// <a-entity light="type: directional; color: #CAC; intensity: 0.5"></a-entity></div><div>entityEl.setAttribute('light', {color: '#ACC', intensity: 0.75});</div><div>// <a-entity light="type: directional; color: #ACC; intensity: 0.75"></a-entity></div></div><div><br/></div><div>还可以修改这个</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>// <a-entity geometry="primitive: cylinder; height: 4; radius: 2"></a-entity></div><div>entityEl.setAttribute('geometry', {primitive: 'torusKnot', p: 1, q: 3, radiusTubular: 4});</div><div>// <a-entity geometry="primitive: torusKnot; p: 1; q: 3; radiusTubular: 4"></a-entity></div></div><div><br/></div><div><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">.removeAttribute()// 删除属性</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>var cameraEl = document.querySelector('[camera]');</div><div>cameraEl.removeAttribute('wasd-controls');</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><ul><li><span style="font-size: 19px;">事件和事件绑定</span></li></ul><div><br/></div><div><code style="margin: 0px; padding: 0px 0.25ch 0px 0.25ch; box-sizing: border-box; font-size: 13px; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-weight: 600; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px;">.emit(eventName, eventDetail, bubbles)</code><span style="color: rgb(51, 51, 51); font-family: "Fira Sans", Helvetica, Arial, sans-serif; font-size: 15.4px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.</span><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">//发送事件</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.emit('physicscollided', {collidingEntity: anotherEntityEl}, false);</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.addEventListener(eventName, function)</span><span style="color: rgb(71, 101, 130);"><code style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 1.3rem; font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace;">//绑定事件</code></span></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>entityEl.addEventListener('physicscollided', function (event) {</div><div>console.log('Entity collided with', event.detail.collidingEntity);</div><div>});</div></div><div><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(71, 101, 130);"><br/></span></span></div><div><span style="color: rgb(51, 51, 51); font-family: "Fira Mono", "Andale Mono", Monaco, Courier, monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 600; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0.77px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">.removeEventListener(eventName, function) //移除事件</span></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>// We have to define this function with a name if we later remove it.</div><div>function collisionHandler (event) {</div><div>console.log('Entity collided with', event.detail.collidingEntity);</div><div>});</div><div>entityEl.addEventListener('physicscollided', collisionHandler);</div><div>entityEl.removeEventListener('physicscollided', collisionHandler);</div></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="font-weight: 600;"><span style="font-family: 'Fira Mono', 'Andale Mono', Monaco, Courier, monospace;"><span style="color: rgb(51, 51, 51);">在javascript里面不能移除匿名函数的事件。所以尽量不要使用匿名函数绑定事件。</span></span></span></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 19px;"><br/></span></div><div><br/></div></span>
</div></body></html>