HtmlDOM 文档读取研究
来源:互联网 发布:ie浏览器连不上网络 编辑:程序博客网 时间:2024/05/30 19:32
今天用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 用户退出页面。
- HtmlDOM 文档读取研究
- HTMLDOM
- HTMLDOM
- htmlDOM操作1
- htmlDOM二级联动
- HTMLDOM添加删除元素
- aiml规范研究文档
- aiml规范研究文档
- JForum研究文档
- wine移植研究文档
- 复合文档文件格式研究
- 复合文档文件格式研究
- 复合文档文件格式研究
- 研究activemq的文档
- JMS ActiveMQ研究文档
- JMS ActiveMQ研究文档
- MQTT初步研究文档
- 文档格式规范研究
- PHP根据IP地址获取所在城市具体实现
- 军衔
- 未注册单拼域名【分享】
- 图的十字链表存储结构
- www.csdn.net
- HtmlDOM 文档读取研究
- 启动RSA 报错 Eclipse :“Java was started but returned exit code = -1”
- 数组大折腾(改进版)
- Eclipse下Tomcat常用设置
- easyui 校验 日期类型(easyui-datetimebox)的特殊性
- iOS开发笔记--数据持久化的四种方式
- centos 5.5 下编译安装 mysql
- OpenGL眼睛坐标系和目标坐标系
- win8下安装sql2005