常用的click事件居然这么多门道,赶紧卷

简介: 你真的了解 onclick 点击事件吗? onclick 是异步的还是同步的?事件的触发顺序你了解过吗?现在我就带你一起来了解一下 onclick 事件前后左右的一些事情。

你真的了解onclick点击事件吗?onclick是异步的还是同步的?事件的触发顺序你了解过吗?现在我就带你一起来了解一下onclick事件前后左右的一些事情。

onclick简介

onclickHTML中的一个事件属性,它的作用是当用户点击元素时触发的事件。

onclick事件可以绑定在任何元素上,比如<div><button><a>等等。

onclick事件的触发顺序是先捕获后冒泡,也就是说先触发捕获事件,然后触发冒泡事件。

onclick的异步性

onclick事件是异步的,也就是说onclick事件的触发是在JavaScript的执行栈中的任务执行完毕之后才会触发。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById('btn').onclick = function () {
    
        console.log('click');
    }

    console.log('start');
    for (var i = 0; i < 1000000000; i++) ;
    console.log('end');
</script>
</body>
</html>

上面的代码中,我们在<button>元素上绑定了onclick事件,然后在JavaScript中使用了一个for
循环,这个循环会执行一亿次,这个时候页面会卡住,但是不妨碍你点击按钮。

这个时候你点击按钮,控制台是不会有任何响应的,这是因为onclick事件是异步的,所以当你点击按钮的时候,onclick
事件并没有被触发,而是等到JavaScript的执行栈中的任务执行完毕之后才会触发。

onclick的同步性

上面说了onclick事件是异步的,现在又说onclick事件是同步的,这样说的话好像有点矛盾,其实这两种说法都是正确的,直接上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById('btn').onclick = function () {
    
        console.log('click');
    }

    for (var i = 0; i < 10; i++) {
    
        console.log(i);
        if (i === 5) {
    
            document.getElementById('btn').click();
        }
    }
</script>
</body>
</html>

上面的代码中,控制台输出到5的时候,我们手动触发了onclick事件,这个时候控制台会输出click
,然后继续输出后面的,这个就说明了onclick同步性。

查阅了相关资料,如果onclick事件是由用户手动触发的,那么onclick事件是异步的,会压入事件队列中,如果onclick
事件是由JavaScript代码触发的,那么onclick事件是同步的,会立即执行。

onclick的触发顺序

onclick事件的触发顺序是先捕获后冒泡,也就是说先触发捕获事件,然后触发冒泡事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <button id="btn">click</button>
        </div>
    </div>
</div>
<script>
    document.getElementById('div1').onclick = function () {
    
        console.log('div1');
    }

    document.getElementById('div2').onclick = function () {
    
        console.log('div2');
    }

    document.getElementById('div3').onclick = function () {
    
        console.log('div3');
    }

    document.getElementById('btn').onclick = function () {
    
        console.log('btn');
    }
</script>
</body>
</html>

上面的代码中,我们在<div>元素和<button>元素上分别绑定了onclick事件,然后点击<button>元素,控制台会依次输出btn
div3div2div1,这就是onclick事件的触发顺序。

事件触发的先后顺序

onclick事件中,如果我们绑定了多个和鼠标按键相关的事件,那么这些事件的触发顺序是怎样的呢?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>onclick</title>
</head>
<body>
<button id="btn">click</button>
<script>
    document.getElementById('btn').onclick = function () {
    
        console.log('click');
    }

    document.getElementById('btn').ondblclick = function () {
    
        console.log('dblclick');
    }

    document.getElementById('btn').onmousedown = function () {
    
        console.log('mousedown');
    }

    document.getElementById('btn').onmouseup = function () {
    
        console.log('mouseup');
    }
</script>
</body>
</html>

上面的代码中,我们在<button>元素上绑定了onclickondblclickonmousedownonmouseup四个事件。

然后点击<button>元素,控制台会依次输出mousedownmouseupclick

如果双击<button>元素,控制台会依次输出mousedownmouseupclickmousedownmouseupclickdblclick

所以事件触发的先后顺序是onmousedownonmouseuponclickondblclick

所以呢在使用onclick事件的时候,如果绑定了多个和鼠标按键相关的事件,那么就需要注意事件处理的逻辑,避免出现一些意想不到的问题。

事件对象

onclick事件中,我们可以通过event参数来获取事件对象,事件对象中包含了事件的相关信息。

事件对象eventMouseEvent的实例,它继承了UIEventEvent,所以事件对象中包含了UIEventEvent的所有属性和方法。

MouseEvent的属性:

属性 说明
altKey 是否按下了Alt
button 鼠标按键的编号
buttons 鼠标按键的状态
clientX 鼠标指针相对于浏览器窗口的水平坐标
clientY 鼠标指针相对于浏览器窗口的垂直坐标
ctrlKey 是否按下了Ctrl
metaKey 是否按下了Meta
movementX 鼠标指针在水平方向上的移动距离
movementY 鼠标指针在垂直方向上的移动距离
offsetX 鼠标指针相对于事件目标的水平坐标
offsetY 鼠标指针相对于事件目标的垂直坐标
pageX 鼠标指针相对于文档的水平坐标
pageY 鼠标指针相对于文档的垂直坐标
relatedTarget 鼠标指针相关的元素
screenX 鼠标指针相对于屏幕的水平坐标
screenY 鼠标指针相对于屏幕的垂直坐标
shiftKey 是否按下了Shift

MouseEvent的方法:

  • getModifierState(): 返回一个布尔值,表示是否按下了指定的键。
  • initMouseEvent(): 初始化事件对象。
  • preventDefault(): 阻止事件的默认行为。
  • stopImmediatePropagation(): 阻止事件向上冒泡,并阻止事件的进一步捕获或冒泡。
  • stopPropagation(): 阻止事件向上冒泡。

click事件注册的方式

click事件可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

onclick属性

onclick属性是Element的一个属性,它的值是一个函数,当click事件触发时,会执行这个函数。

<button onclick="console.log('click')">click</button>

addEventListener()

addEventListener()方法是EventTarget的一个方法,它的第一个参数是事件的名称,第二个参数是事件处理函数,第三个参数是一个布尔值,表示是否在捕获阶段触发事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    
    console.log('click');
  });
</script>

attachEvent()

attachEvent()方法是EventTarget的一个方法,它的第一个参数是事件的名称,第二个参数是事件处理函数。

<button id="btn">click</button>
<script>
  var btn = document.getElementById('btn');
  btn.attachEvent('onclick', function() {
    
    console.log('click');
  });
</script>

结语

click事件是鼠标点击事件,它是MouseEvent的一个实例,它的事件类型是click,它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。

参考链接

MDN click

MDN MouseEvent

目录
相关文章
|
6月前
|
存储 移动开发 前端开发
七夕特辑——3D爱心(可监听鼠标移动)
七夕特辑——3D爱心(可监听鼠标移动)
|
5月前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
39 1
|
5月前
|
前端开发 程序员
老程序员分享:jquerytooltip事件
老程序员分享:jquerytooltip事件
23 0
|
6月前
|
JavaScript 开发者
【掰开揉碎】深入了解 @tap 和 @click
【掰开揉碎】深入了解 @tap 和 @click
182 0
|
6月前
|
JavaScript
JS事件,你真的懂吗(捕获,冒泡)?
JS事件,你真的懂吗(捕获,冒泡)?
59 0
|
JavaScript 容器
弄懂事件委托
弄懂事件委托
66 0
|
JavaScript 前端开发 机器人
事件冒泡学个透
事件冒泡学个透
|
JavaScript 前端开发
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的“升级版”。如何利用原生JS实现轮播图效果。如图: 在这里插入图片描述 HTML代码: &lt;div class=&quot;box&quot;&gt; &lt;img src=&quot;img/0.jpg&quot; alt=&quot;&quot;&gt; &lt;!-- &lt;img src=&quot;img/1.jpg&quot; alt=&quot;&quot;&gt; &lt;img src=&quot;img/2.jpg&quot; alt=&quot;&quot;&gt; &lt;img src=&quot;img/3.jpg&quot; alt=&quot;&quot;&gt; --&gt; &lt;div class=&quot;
史上最简单的原生JS实现轮播图效果
|
JavaScript 前端开发
史上最详细的DOM事件之鼠标事件
史上最详细的DOM事件之鼠标事件 说到JavaScript的DOM,不得不提的就是DOM事件,当然DOM中事件包含好多,我们先来讲一讲DOM的鼠标事件。 HTMl代码: &lt;h1&gt;01DOM的鼠标事件&lt;/h1&gt; &lt;div id=&quot;wrap&quot;&gt; &lt;div class=&quot;box&quot;&gt;onclick&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;oncontextmenu&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;ondblclick&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;onmousedown&lt;/div&gt; &lt;div class
|
JavaScript
史上最详细的DOM事件之键盘事件
HTML代码: &lt;input type=&quot;text&quot; name=&quot;&quot; id=&quot;text&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;&quot; id=&quot;text2&quot;&gt; 1 2 1.onkeydown事件 var oText=document.getElementById(&quot;text&quot;); var oText2=document.getElementById(&quot;text2&quot;); // onkeydown 某个键盘按键被按下。 针对所有键 oText.onkeydown=function(event){ co