Event事件对象之Event

时间：2021-11-03 00:17:35

属性

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()

阻止冒泡

提示

浏览器支持

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>

文档内容出自 W3cSchool和菜鸟教程， 如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/
标签：

相关文章