在JavaScript文档中嵌入JavaScript时,放置<script>标记和包含JavaScript 的适当位置在哪里？我似乎记得你不应该把它们放在这个<head>部分中,但放在该部分的开头<body>也是不好的,因为在完全呈现页面之前必须解析JavaScript(或类似的东西).这似乎将该部分的末尾<body>作为<script>标记的逻辑位置.
所以,在这里是把正确的地方<script>标记？
(这个问题引用了这个问题,其中建议JavaScript函数调用应该从<a>标签移动到<script>标签.我专门使用jQuery,但更一般的答案也是合适的.)
我正在创造一种聚合物元素.我已经制作了模板,现在正在编写脚本.由于某种原因,document.querySelector为类和id选择器返回null.不确定这是否与聚合物不起作用(没有理由不应该)或者我没有输入某些东西或者其他什么是错误的.
事件card.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="event-card-description.html">
<polymer-element name="event-card" attributes="header image description">
<template>
<style>
.card-header {
display: block;
position: static;
font-size: 1.2rem;
font-weight: 300;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
overflow: hidden;
}
event-card-description {
margin: 0;
position: relative;
top: 225px;
}
</style>
<div
style="background: url(../images/{{image}}.jpg) no-repeat; background-size: cover"
class="card-header" layout horizontal center
on-mouseover='{{onHovered}}'
on-mouseout='{{onUnhovered}}'>
<event-card-description
id="description"
header={{header}}
description={{description}}>
</event-card-description>
</div>
</template>
<script>
Polymer('event-card', {
onHovered: function() {
var elem = document.querySelector("#description");
console.log(elem);
}
}); …在vanilla js中进行事件授权的最佳方式(最快/最合适)是什么？
例如,如果我在jQuery中有这个:
$('#main').on('click', '.focused', function(){
settingsPanel();
});
我怎样才能将其翻译成香草js？或许有.addEventListener()
我能想到这样做的方式是:
document.getElementById('main').addEventListener('click', dothis);
function dothis(){
// now in jQuery
$(this).children().each(function(){
if($(this).is('.focused') settingsPanel();
});
}
但这似乎效率低下,特别是如果#main有很多孩子.
这是正确的方法吗？
document.getElementById('main').addEventListener('click', doThis);
function doThis(event){
if($(event.target).is('.focused') || $(event.target).parents().is('.focused') settingsPanel();
}