1、关于多个html标签单击事件的实现细节

最新推荐文章于 2023-02-27 13:59:34 发布

Bwz_Learning

最新推荐文章于 2023-02-27 13:59:34 发布

阅读量4.7k

点赞数 4

分类专栏： JavaScript_Bak 文章标签： click onclick Javascript的点击事件 Jquery的单击事件

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51303723

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、对于多个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.οnlοad=function(){
        //获取父容器
        var div=document.getElementById("myimg");
        //查找指定容器下的a标签
        var href=div.getElementsByTagName("a");
        //遍历这些标签
        for(var i=0;i<href.length;i++){
            //给每个标签绑定事件
            href[i].οnclick=function(){
                //测试：获取每个标签中img的地址
                alert(this.getElementsByTagName('img')[0].src);
                //为了测试：使超链接本身跳转功能失效
                //当onclick与href共存时，href跳转执行在onclick之后，且当onclick返回不是false时才执行href的跳转功能
                return false;
        }
    }
}

Bwz_Learning

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
1、关于多个html标签单击事件的实现细节

1、对于多个html标签单击事件的错误写法,以及原因分析 1.1 多个html标签点击事件，的典型错误写法 1.1.1 html代码 111 222 333 444 555 666 1.1.2 Javascript代码 window.onload = function() { v
复制链接

扫一扫