20 注册事件

最新推荐文章于 2024-09-16 20:08:29 发布

qingshui_913

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量62

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_59809997/article/details/123276282

版权

Javascript学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

根据标签获取元素

<input type="button" value="修改p标签" id="btn">
  <p>我是段落标签</p>
  <p>我是段落标签</p>
  <p>我是段落标签</p>
  <p>我是段落标签</p>
  <p>我是段落标签</p>
<script>
//获取事件源
   var btn = document.getElementById("btn");
   btn.onclick = function(){
      //获取到所有的p标签
      var pObjs = document.getElementsByTagName("p"); //pObjs为伪数组、集合
      for(var i = 0; i < pObjs.length; i++){ //利用循环进行遍历修改
         pObjs[i].innerText = "我被修改了";
      }
   }

需求：点击修改a链接

<input type="button" value="修改链接" id="btn">
<a id="ak" href="http://www.4399.com">4399</a>
<script>
   //获取事件源
   var btn = document.getElementById("btn");
   btn.onclick = function(){
      //获取a链接
      var aObj = document.getElementById("ak");
      aObj.href = "http://www.baidu.com"; //修改了a链接的网址
      aObj.innerText = "百度"; //修改了文字内容
   }
</script>

需求：修改图片的属性

<input type="button" value="修改" id="btn">
<img src="01.jpg alt="" title="图片1">
<script>
   //事件源
   var btn = document.getElementById("btn");
   btn.onclick = function(){
    //获取图片标签
    var imgObjs = document.getElementsByTagName("img"); //伪数组、集合
    imgObjs[0].title = "图标2";
    imgObjs[0].alt = "我是可以被修改的";
   }
</script>

需求：点击图片跳出弹框

<style>
   img{
       width:200px;
       height:120px;
   }
</style>
<body>
   <img src="01.jpg" alt="" id="im1">
   <img src="02.jpg" alt="" id="im2">
   <img src="03.jpg" alt="" id="im3">
</body>
<script>
   document.getElementById("im1").onclick = function(){
       alert("哈哈哈，点击图片")
   }
     document.getElementById("im2").onclick = function(){
       alert("哈哈哈，点击图片")
   }
     document.getElementById("im3").onclick = function(){
       alert("哈哈哈，点击图片")
   }
</script>

优化代码

var imObjs = document.getElementsByTagName("img"); //伪数组、集合
//遍历循环
for(var i = 0; i <imgObjs.length; i++){
   //给每张图片加点击事件
   imgObjs[i].onclick = function(){
      alert("哈哈哈，点击图片");
   }
}

需求：点击两个按钮控制显示和隐藏

<style>
  #dv{
      width:300px;
      height:200px;
      background:pink;
  }
</style>
<body>
   <input type="button" value="隐藏" id="btn1">
   <input type="button" value="显示" id="btn2">
   <div id="dv"></div>
</body>
<script>
   //获取事件源btn1和btn2
   var btn1 = document.getElementById("btn1");
   var btn2 = document.getElementById("btn2");
   btn1.onclick = function(){
      var dv = document.getElementById("dv");
      dv.style.display = "none"; //这个表示隐藏
   }
   btn2.onclick = function(){
       document.getElementById("dv").style.display = "block"; //显示
   }
</script>

需求：点击图片变小

<img src="01.jpg" alt="" id="im">
<script>
   var im = document.getElementById("im");
   im.onclick = function(){
      im.width = "200"; //无单位
      this.height = "300"; //事件前.的前面是谁 this就指向谁
   }
</script>

需求：点击按钮修改第一组p标签内容

<body>
<input type="button" value="修改p标签的内容" id="btn">
<div id="dv1">
    <p>呵呵呵</p>
    <p>呵呵呵</p>
    <p>呵呵呵</p>
    <p>呵呵呵</p>
    <p>呵呵呵</p>
    <p>呵呵呵</p>
</div>
<div id="dv2">
    <p>嘎嘎</p>
    <p>嘎嘎</p>
    <p>嘎嘎</p>
    <p>嘎嘎</p>
    <p>嘎嘎</p>
    <p>嘎嘎</p>
</div>