欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Event事件对象之Event

程序员文章站 2022-07-12 16:29:29
...

属性

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/

相关标签： 对象 javascript Event 事件

上一篇： json对象操作

下一篇： java json 对象操作

推荐阅读