js事件绑定的三个方法

最新推荐文章于 2024-11-06 11:26:12 发布

原创最新推荐文章于 2024-11-06 11:26:12 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解了JavaScript中三种常见的事件绑定方法：内联事件处理器、DOM0级事件处理和DOM2级事件处理（addEventListener）。通过具体示例展示了不同方法的特点及应用场景。

比如绑定一个button按钮提交

第一种
<button onclick="alert('点击得到的效果')">dianwo</button><!--绑定事件 onmouuseover鼠标移到按钮就会触发-->

<button onmouseover="eventHandler()">点我</button>

 function eventHandler(){
            alert('hello world')
            alert('点击得到的效果')           
        }
第二种
最好做到分离 代码放到了js
 <button id="btn" >点老子</button>
 document.querySelector('#btn').οnclick=eventHandler
  function eventHandler(){
            alert('hello world')
            alert('点击得到的效果')
            }
想要输出第二次 第一次会被覆盖 所以可以用第三种
        第三种
        <button id="btn" >点老子</button>
       
         document.querySelector('#btn').addEventListener('click,sayhello')
        document.querySelector('#btn').addEventListener('click,sayooo')
        function sayhello(){想要输出的东西}
        function sayooo(){想要输出的东西}

document.querySelector('#btn').addEventListener('cilck',function(){alret('想要输出的东西')
})
</style>