Event事件对象之Event

最新推荐文章于 2023-06-10 17:28:29 发布

zzzzzzz周绍辉

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量829

点赞数

分类专栏： javascript Event 事件对象文章标签：对象 javascript Event 事件

本文链接：https://blog.csdn.net/qq_32758013/article/details/76598488

版权

javascript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

对象

25 篇文章 0 订阅

订阅专栏

Event

10 篇文章 0 订阅

订阅专栏

属性

1. bubbles

返回一个布尔值，如果事件支持冒泡，则返回true，否则返回false

事件冒泡分为三个阶段，它是这样的:
* 第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
* 第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
* 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.bubbles

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<p id='p' onmouseenter="myFunction(event)">点击这个段落， 如果事件是一个冒泡事件将弹出警告框提示。</p>

</body>
<script>

p.onclick = function(e){
    console.log(e);
}

function myFunction(e){ 
    alert(e.bubbles);
}
</script>
</html>

2. cancelable

返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.cancelable

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<p id='p' onmouseenter="myFunction(event)">点击这个段落， 如果事件是一个冒泡事件将弹出警告框提示。</p>

</body>
<script>

p.onclick = function(e){
    console.log(e.cancelable);
}

function myFunction(e){ 
    alert(e.cancelable);
}
</script>
</html>

3. currentTarget

返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口

在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.currentTarget

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div><p id='p' onmouseenter="myFunction(event)">点击这个段落。一个警告框将警报eventlistener触发事件的元素。</p>
<p><strong>注意:</strong> currentTarget属性并不一定返回点击的元素,eventlistener触发事件的元素。</p>
</div>

</body>
<script>

p.onclick = function(e){
    console.log(e.currentTarget);
}

function myFunction(e){ 
    console.log(e.currentTarget);
}
</script>
</html>

4. eventPhase

返回事件传播的当前阶段。

返回值

当前事件阶段为捕获阶段 1
当前事件是目标阶段,在评估目标事件 2
当前的事件为冒泡阶段 3

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.eventPhase

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div id='div'><p id='p'>点击这段文字控制台显示事件发生的阶段</p>

</body>
<script>
div.onclick = function(e){
    console.log(e.eventPhase);
}

p.onclick = function(e){
    console.log(e.eventPhase);
}
</script>
</html>

5. target

可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

提示

返回的是一个节点。
多用于事件代理。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.target

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div id='div'><p>点击这段文字控制台显示事件发生的目标节点</p>

</body>
<script>
div.onclick = function(e){
    console.log(e.target.innerText);
}
</script>
</html>

6. timeStamp

可返回一个时间戳。指示发生事件的日期和时间

提示

epoch 是一个事件参考点。在这里，它是客户机启动的时间。
并非所有系统都提供该信息，因此，timeStamp 属性并非对所有系统/事件都是可用的。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.timeStamp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div id='div'><p>点击这段文字控制台显示打开网页到事件触发的时间</p>

</body>
<script>
div.onclick = function(e){
    console.log(e.timeStamp);
}
</script>
</html>

7. type

返回发生的事件的类型，即当前 Event 对象表示的事件的名称

提示

它与注册的事件句柄同名，或者是事件句柄属性删除前缀 “on” 比如 “submit”、”load” 或 “click”。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

event.timeStamp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div id='div'><p>点击这段文字控制台显示打开网页到事件触发的时间</p>

</body>
<script>
div.onclick = function(e){
    console.log(e.timeStamp);
}
</script>
</html>

方法

1. initEvent()

初始化新创建的 Event 对象的属性
参考新浪博客。

2. preventDefault()

通知浏览器不要执行与事件关联的默认动作，取消默认事件

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

Event.preventDefault()

一般情况下浏览器的右键菜单都有默认事件，我们可以取消显示它

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>
    还是有点字看起来舒服一点啊亲。
</body>
<script>
document.oncontextmenu = function(e){
    //return false;
    e.preventDefault();
}
</script>
</html>

3. stopPropagation()

阻止冒泡

提示

请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

Event.stopPropagation()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>

</head>
<body>

<div id='div'><p id='p'>点击这段文字控制台显示触发该事件的事件名称</p>

</body>
<script>
div.onclick = function(e){
    alert(e.currentTarget.nodeName);
}
p.onclick = function(e){
    e.stopPropagation();
    alert(e.currentTarget.nodeName);
}
</script>
</html>