js 调用click_js: 事件基础

最新推荐文章于 2024-08-16 07:34:20 发布

武藤杰洛特

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量3.6k

点赞数 1

文章标签： js 调用click

本文链接：https://blog.csdn.net/weixin_30724041/article/details/113451912

版权

本文详细介绍了JavaScript中的事件处理，包括事件的注册方式（如`onclick`属性和`addEventListener`），事件函数及其特有的`event`参数，如何阻止事件的默认行为，以及事件流的概念，包括捕获阶段和冒泡阶段。还提到了事件代理的使用，通过在父元素上绑定事件来处理子元素的事件，以提高性能。

摘要由CSDN通过智能技术生成

什么是事件:
js -> 交互人可以去操作页面
js -> 事件驱动的方式
用户 -> 操作html元素 -> 产生一个事件 -> 事件主动调用 -> 设定的方法或函数
主要包括了四部分:
事件源: 产生事件的地方
事件的类型: 点击键盘
事件对象: 记录当时发生事件的所有信息
事件的处理程序: 函数

注册

方法一:

把事件类型和方法注册到html元素上，如<div οnclick="fn()"></div>;

<div id="div1" onclick="fn()">点击我调用方法</div>
<script>
    function fn() {
    
        alert('事件函数被调用')
    }
</script>

和在js中获取元素后注册，如果div1.onclick,在js中方法后不需要加()。

<div id="div1">点击我调用方法</div>
<script>
    function fn() {
    
        alert('事件函数被调用')
    }

    var div1 = document.getElementById('div1');
    div1.onclick = fn;
</script>

方法二:

通过调用系统提供的方法可以绑定多个事件

addEventListener(事件类型click, 函数fn, 事件处理方式默认冒泡false)

<div id="div1">点击我调用方法</div>
<script>
    function fn() {
    
        alert('事件函数被调用')
    }

    div1.addEventListener('click', fn);
    // div1.removeEventListener('click', fn);  // 移出事件方法，参数必须和addEventListener一致
</script>

ie8不支持addEventListener方法，使用attachEvent()和detachEvent()方法兼容。