1、关于多个html标签单击事件的实现细节
2016-05-03 13:55
661 查看
1、对于多个html标签单击事件的错误写法,以及原因分析
1.1 多个html标签点击事件,的典型错误写法
1.1.1 html代码
错误写法的结果:
无论点击哪个h1标签,弹出来的都是666
错误写法的原因分析:
因为标签的点击事件,只有在点击标签的时候,才会触发。
而在点击标签的时候,i的数值已经为6了,所以,无论点击哪个h1的标签,
弹出来的信息都是666.
2、正确的写法,利用this关键字
2.1 多个html标签点击事件,争取的写法
2.1.1 Javascript的写法
2.1.2 Jquery的写法
3、关于点击事件的小案例练习
3.1 要求
给所有的a标签里面的img标签,加上单击事件
3.2 html代码
1.1 多个html标签点击事件,的典型错误写法
1.1.1 html代码
<body> <h1>111</h1> <h1>222</h1> <h1>333</h1> <h1>444</h1> <h1>555</h1> <h1>666</h1> </body>1.1.2 Javascript代码
<script type="text/javascript"> window.onload = function() { var hlist = document.getElementsByTagName('h1'); console.log(hlist.length) /*错误的写法*/ for (var i = 0; i < hlist.length; i++) { var htag = hlist[i]; htag.onclick = function() { alert(htag.innerHTML); } } } </script>1.1.3 错误写法的结果,以及原因分析
错误写法的结果:
无论点击哪个h1标签,弹出来的都是666
错误写法的原因分析:
因为标签的点击事件,只有在点击标签的时候,才会触发。
而在点击标签的时候,i的数值已经为6了,所以,无论点击哪个h1的标签,
弹出来的信息都是666.
2、正确的写法,利用this关键字
2.1 多个html标签点击事件,争取的写法
2.1.1 Javascript的写法
<script type="text/javascript"> window.onload = function() { var hlist = document.getElementsByTagName('h1'); console.log(hlist.length) for (var i = 0; i < hlist.length; i++) { var htag = hlist[i]; /* 利用this关键字的正确写法 */ htag.onclick = function() { alert(this.innerHTML); } } } </script>
2.1.2 Jquery的写法
<script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('h1').click(function() { alert($(this).html()); }); }); </script>
3、关于点击事件的小案例练习
3.1 要求
给所有的a标签里面的img标签,加上单击事件
3.2 html代码
<body> <div id="myimg"> <ul> <li> <a href="photos/image1.jpg" title="1"> <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image2.jpg" title="2"> <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image3.jpg" title="3"> <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image4.jpg" title="4"> <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image5.jpg" title="5"> <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div> </body>3.2 Javascript代码
//置入window.onload事件中可确保在所有元素均已加载的前提下执行自定义事件 //或者不置入window.onload时,将功能代码段放在功能代码所依赖的元素之下 window.onload=function(){ //获取父容器 var div=document.getElementById("myimg"); //查找指定容器下的a标签 var href=div.getElementsByTagName("a"); //遍历这些标签 for(var i=0;i<href.length;i++){ //给每个标签绑定事件 href[i].onclick=function(){ //测试:获取每个标签中img的地址 alert(this.getElementsByTagName('img')[0].src); //为了测试:使超链接本身跳转功能失效 //当onclick与href共存时,href跳转执行在onclick之后,且当onclick返回不是false时才执行href的跳转功能 return false; } } }
相关文章推荐
- 7.HTML框架(老)
- html img Src base64 图片显示
- HTML标签
- HTML之常用标签
- 12个鲜为人知的HTML 5设计小技巧
- HTML <!DOCTYPE> 标签
- 网页表单自动提交
- html多媒体简介:
- html音频
- HtmlAgilityPach基本使用方法
- HTML中鼠标滚轮事件onmousewheel
- mailto: HTML e-mail 链接
- HTML网页之学生成绩绩点计算代码
- HTML设置超链接字体颜色和点击后的字体颜色
- <!DOCTYPE html>很重要
- 【XML】HTML的又一相关语言
- django1.8输出一些非HTML内容
- 用HTML 5实现爱心小鱼的游戏
- HTML标签使用原则
- HTML标签