如何添加html元素的事件 有几种方法

如何添加html元素的事件 有几种方法,第1张

常见的三种,一种是标签内联的书写方式,不推荐使用

另外两种都是相对比较常用的,具体看代码吧

方法1:标签内联的书写方式

<div onclick="alert('点击此处d窗')">HTML5学堂 - - 数百篇原创文章分享 </div>

方法2和方法3:

<div id="con">通过id获取标签,之后为标签绑定事件</div>

<script>

    var con = document.getElementById('con')

    con.onmouseover = function(){

        alert('鼠标移入d出这个')

    }

    con.addEventListener('mouseout', function(){

        alert('鼠标移出d出这个')

    }, false)

</script>

第一种方法:在HTML元素当中绑定事件

<div class="wrap" onclick="show()">绑定事件一</div>

<script type="text/javascript">

    function show() {

        alert('绑定事件一')

    }

</script>

第二种方法:

<div class="wrap" id="btn">绑定事件一</div>

<script type="text/javascript">

    var btnEle = document.querySelector('#btn')

    btnEle.onclick = show

    function show() {

        alert('绑定事件一')

    }

</script>

参考资料:《JavaScript事件 详细讲解》

第三种方法:

<div class="wrap" id="btn">绑定事件一</div>

<script type="text/javascript">

    var btnEle = document.querySelector('#btn')

    btnEle.addEventListener('click', show, !1)

    function show() {

        alert('绑定事件一')

    }

</script>

参考资料:《说说JavaScript的事件绑定方法并举例》


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11933633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存