JavaScript-5-事件触发机制、三种触发方式

最新推荐文章于 2025-05-28 11:29:07 发布

bdevy

最新推荐文章于 2025-05-28 11:29:07 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_38328762/article/details/100018377

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了JavaScript中的事件触发机制，包括事件源、常见事件类型如onclick和ondblclick。详细讲解了三种触发方式：行内绑定（οnclick属性）、事件监听（addEventListener）和动态绑定（obj.οnclick=func）。强调了addEventListener的兼容性问题，以及动态绑定时需要注意函数引用与调用的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件触发机制
1. 事件源【就是网页中的标签】 button
2. 事件 onclick 单击 ondblclick 双击
3. 行为【js】 show()

触发方式一（行内绑定）：标签内 οnclick=“func()” 没有event

<body ondblclick="show()">

<button type="button" onclick="change()" id="btn">点击</button>

<script>
    function show() {
        /* docuent.write() 重新绘制网页 */
        // document.write('点击。。');
        alert('点击');
    }
    function change(){
        var b=document.getElementById('btn');
        b.innerText='登录';
    }
</script>

</body>

触发方式二（事件监听）：添加事件监听 addEventListener() 有event

兼容性不好，ie是attachEvent()
```
<body>

<button type="button" id="btn">点击</button>

<script>
    var b=document.getElementById('btn');
    b.addEventListener('click',function (change) {
        b.innerText='登录';
    },true);
</script>

</body>
```
注意：不可以b.addEventListener(‘click’,change(),true);，这样没用

【这里只是简要简绍一下，后面到事件再详细说。。。。】

触发方式三（动态绑定）：obj.οnclick=func; 有event

匿名函数：

<body>

<button type="button" id="btn">点击</button>
<script>
    var btn=document.getElementById('btn');
    btn.onclick = function(e){
        btn.innerText='登录';
        alert(e.target.value);  /* e.target 监听目标 */ /* e == event */
    }
</script>

</body>

普通函数：

<body>

<button type="button" id="btn">点击</button>
<script>
    var btn=document.getElementById('btn');
    btn.onclick = change;
    function change(){
        btn.innerText='登录';
    }
</script>

</body>