欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript DOM事件的简单绑定onclick

程序员文章站 2024-03-18 18:37:46
...

DOM：

  • 功能:
    控制html文档的内容

  • 获取页面标签(元素)对象: Element
    document.getElementById(" id值") :通过元素的id获取元素对象

  • 操作Element对象:

  1. 修改属性值:
    首先明确获取的对象是哪一个?
    查看API文档，找其中有哪些属性可以设置
<body>
    <img id="imggg" src="../img/1.jpg">
    <h1 id="ti">abcde</h1>
</body>

script
//通过id获取元素对象
	var imggg = document.getElementById("imggg");
	alert("要换图片了");
	imggg.src = "../img/2.png"
  1. 修改标签体内容:
    属性: innerHTML
    1.获取元素对象
    2.使用innerHTML属性修改标签体内容
script
        var ti = document.getElementById("ti");
        alert("要更换标题了")
        ti.innerHTML = "defg";

如何绑定事件

  1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
    事件: onclick 单击事件
<body>

	<img id="imggg" src="../img/1.jpg" onclick="fun()">

<script>

     function fun() {
         alert("我被点了");
         alert("我又被点了")
     }
    
</script>
</body>
  1. 通过js获取元素对象，指定事件属性，设置一个函数
<body>
    <img id="imggg2" src="../img/1.jpg">

<script>

    function fun2() {
        alert("2我被点了");
        alert("2我又被点了")
    }

    //获取imggg2的对象
    var elementById = document.getElementById("imggg2");
    elementById.onclick = fun2;

</script>
</body>
相关标签： JavaScript javascript js

上一篇： putty使用

下一篇：

推荐阅读