HtmlDOM 文档读取研究

今天用js做事件绑定的时候遇到了一个奇怪的问题，绑定之后点击无效，

这里是绑定时间的代码也可以用document.querySelector 或者 document.querySelectorAll 这个部分浏览器不支持这个不在本文的研究范围之类。

js代码:

<script type="text/javascript">
var value = 'Happy New Year!';
function myFunc(){
  alert(this.value); // output "Happy New Year!"
  //more of the script statements
}
document.getElementsByTagName('input')[0].onclick = function () {
  /*alert(this.value);  // output "Happy everyday!"
  myFunc();  */// output "Happy New Year!"
  alert('click  frist input');
}
document.getElementsByTagName('li')[0].onclick = function () {
  /*alert(this.value);  // output "Happy everyday!"
  myFunc();  */// output "Happy New Year!"
  alert('click frist li ');
}
document.getElementsByTagName('div')[0].onclick = function () {
  /*alert(this.value);  // output "Happy everyday!"
  myFunc();  */// output "Happy New Year!"
  alert('click frist div');
}
document.getElementsByTagName('div')[0].onmouseover = function () {
  /*alert(this.value);  // output "Happy everyday!"
  myFunc();  */// output "Happy New Year!"
  alert('onmouseover fist div');
}
</script>

这里我采用了三种dom元素，input li div其他的元也能绑定的。

html代码：

<input type="text" value="inut1" /><br />
<input type="text" value="input2" /><br />
<input type="text" value="input3" /><br />
<input type="text" value="inpput4" /><br />

<li>222</li>


<li>222222222222</li><li>222</li><li>222</li><li>222</li>
<div>
div

</div>

css代码:

<style type="text/css" >

div{ width:300px; height:40px; background-color:#003366;}
body{ margin:100px 160px;}
</style>

首先我把js代码放在<head></head> 中间，这个也是我们常用方式，

现象1：点击之后没有任反应：如图：

js代码放在input之后：

现象2：点击input能有反应而 li div 点击没有反应

js代码反正li之后：

现象3 input li 点击有反应， div点击没有效果。

js放在html尾标签后：

现象3：所有的都能点击

最后一次测试，我吧js打包放入js文件中然后引用，发现的效果和以上一样

这个文件引用的位置和以上一样；只要八个这句话放在Html尾部即可。

总结：

1.页面上写的代码尽量放在html尾部

2.如果页面过多可以打包到js 然后把文件引用放在页面尾部

原理：浏览器读取的时候和程序的读取一样都是从头部开始读取，然后加入内存生成效果然后显示在页面上

在这里，没有兼职html元素我们就加载了js 所以js会失去效果。

比较好的加载方式是： html元素》》CSS >>js代码

附：（js常用事件）

onabort 图像的加载被中断。

onblur 元素失去焦点。

onchange 域的内容被改变。

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onerror 在加载文档或图像时发生错误。

onfocus 元素获得焦点。

onkeydown 某个键盘按键被按下。

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

onmouseover 鼠标移到某元素之上。

onmouseup 鼠标按键被松开。

onreset 重置按钮被点击。

onresize 窗口或框架被重新调整大小。

onselect 文本被选中。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

posted @ 2013-11-27 12:24 开源控Meteor(OSMeteor) 阅读(560) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

开源控Meteor(OSMeteor)

HtmlDOM 文档读取研究

公告