-
- 慕容7322432 2021-01-26
事件对象内容
-
截图0赞 · 0采集
-
- 慕码人9569303 2020-04-17
type属性 用于获取事件类型
target属性 用于获取事件的目标
stopPropagation()方法 用于阻止事件的冒泡
preventDefault()方法 阻止事件的默认行为
- 0赞 · 0采集
-
- 如花慕少 2020-04-03
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="box">
<!-- <input type="button" value="HTML事件" id="btn" onclick="showMes()"> -->
<input type="button" value="DOM0事件" id="btn2">
<input type="button" value="DOM2事件" id="btn3">
<input type="button" value="IE事件" id="btn4">
<a href="26.html" id="go">跳转</a>
</div>
<script type="text/javascript">
//HTML事件，将触发事件放在HTML里面。可以直接写，也可以封装。
function showMes(event){
alert(event.target.nodeName);
event.stopPropagation();
}
function showBox(){
alert("这是放按钮的盒子");
}
function stopGoto(){
event.stopPropagation();//先阻止冒泡行为：stopPropagation
event.preventDefault();//阻止事件的默认行为，即阻止跳转行为：preventDefault
}
var d=document;
var box=d.getElementById("box"),
go=d.getElementById("go"),
btn2=d.getElementById("btn2"),
btn3=d.getElementById("btn3"),
btn4=d.getElementById("btn4") ;
//DOM0事件，在js里触发事件，便于修改；当触发的事件=null为删除该事件。
/*btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
}
btn2.onclick=null;*///null不加引号。删除事件后，点击按钮将不再跳出弹框。
//DOM2事件，处理事件addEventListener("其包括三个参数，触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。
//注意：DOM2的触发事件不加“on”，且此方法不支持IE浏览器。
/*btn3.addEventListener("click",showMes,false);
btn3.removeEventListener("click",showMes,false);*/
//IE事件
//IE8以及更早浏览器只支持事件冒泡
//添加事件attachEvent("其包含两个参数，触发、函数（触发需要加‘on’）")，删除事件detachEvent("统一包含两个参数")。
//btn4.attachEvent("onclick",showMes);
//btn4.detachEvent("onclick",showMes);
//封装一个DOM0,DOM2,IE事件，谁行谁用上。
var eventutil={
addhandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
removehandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
}
}
eventutil.addhandler(btn3,'click',showMes);
eventutil.addhandler(box,'click',showBox);
eventutil.addhandler(go,'click',stopGoto);//先出来showMes的内容，然后弹出showBox，这就是事件冒泡，逐级往上往外触发。
//eventutil.removehandler(btn3,'click',showMes);
//组织事件冒泡
</script>
</body>
</html>
- 0赞 · 0采集
-
- 如花慕少 2020-04-03
function showMes(event){
alert(event.target.nodeName);
}
- 0赞 · 0采集
-
- 如花慕少 2020-04-03
<script type="text/javascript">
//HTML事件，将触发事件放在HTML里面。可以直接写，也可以封装。
function showMes(event){
alert(event.type);
}
</script>
- 0赞 · 0采集
-
- 緣来 2019-06-25
preventDefault()方法阻止事件的默认行为 eg ,<a></a>的默认跳转
-
截图0赞 · 0采集
-
- 緣来 2019-06-25
event.type //得到添加的事件类型
默认 事件向上冒泡 ，点击按钮触发事件，会接着触发 按钮外层 绑定的事件
event.stopPropagation()//阻止事件冒泡
-
截图0赞 · 0采集
-
- 慕斯卡2268586 2019-06-18
事件对象（event）：在触发 DOM 上的事件时都会产生一个对象
DOM 中的事件对象
type 属性：用于获取事件类型
target 属性：用于获取事件目标
stopPropagation() 方法，阻止时间冒泡
preventDefault() 方法，阻止事件的默认行为；比如让链接不再跳转
- 0赞 · 0采集
-
- 昼夕 2019-02-20
事件对象（event）：在触发 DOM 上的事件时都会产生一个对象
DOM 中的事件对象
type 属性：用于获取事件类型
target 属性：用于获取事件目标
stopPropagation() 方法，阻止时间冒泡
preventDefault() 方法，阻止事件的默认行为
- 1赞 · 0采集
-
- 慕圣6698645 2019-01-10
- 事件对象：
-
截图0赞 · 0采集
-
- gilzhao 2018-09-08
事件对象（event）：在触发 DOM 上的事件时都会产生一个对象
DOM 中的事件对象
type 属性：用于获取事件类型
target 属性：用于获取事件目标
stopPropagation() 方法，阻止时间冒泡
preventDefault() 方法，阻止事件的默认行为
- 0赞 · 1采集
-
- NEPTOO 2018-08-28
//阻止事件冒泡
<a href="event.html" id="go">跳转</a>
function stopGoto(event){
event.stopPropagation();
event.preventDefault();
}
var go=document.getElementById('go');
eventUtil.addHandler(go,'click',stopGoto);
- 0赞 · 0采集
-
- NEPTOO 2018-08-28
function showMes(){ alert(event.target.nodeName); event.stopPropagation(); //stopPropagation()方法 用于阻止事件冒泡 }- 0赞 · 0采集
-
- 鸩荼 2018-08-17
3-1DOM中的事件对象
需要重学，基本上没看懂。
- 0赞 · 0采集
-
- 94_Alex 2018-08-07
事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象 事件对象event
1 DOM中的事件对象
（1） type属性，用户 获取事件类型
（2） target属性 用于获取事件目标
（3 ）stopPropagation() 方法 用于阻止事件冒泡
（4 ）preventDefault（）阻止事件的默认行为
hubbles 属性 canselable 属性
- 0赞 · 0采集
-
- 风233 2018-07-19
并用if--else封装事件兼容浏览器
-
截图0赞 · 0采集
-
- Hello_my_new_world 2018-07-18
事件对象:（不支持IE）
bubbles 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。
canselable事件：是否可以取消默认事件，返回一个布尔值。
-
截图0赞 · 0采集
-
- 吴周超 2018-07-14
taget属性 用于获取时间目标节点
type 用于获取事件类型
stopPropagation（）方法用于阻止事件冒泡；
preventDefault（）阻止事件的默认行为；
-
截图0赞 · 0采集
-
- qq_袮D影孑_03909390 2018-07-12
事件对象属性
-
截图0赞 · 0采集
-
- Sandaydi 2018-06-29
DOM事件对象
-
截图0赞 · 0采集
-
- qq_Rainy小迪_0 2018-06-25
事件对象event
-
截图0赞 · 0采集
-
- Fishzz 2018-06-14
DOM的事件对象属性和方法。
-
截图0赞 · 0采集
-
- qq_银色水晶瓶_0 2018-06-12
事件对象 IE中不能用
-
截图0赞 · 0采集
-
- Fishzz 2018-06-12
事件对象：
type属性
target属性
stopPropagation 阻止事件冒泡
preventDefault 阻止事件默认行为
-
截图0赞 · 0采集
-
- 小哲麒 2018-05-31
function showMessage(event){
alert("event.target.nodename");
event.stopPropagation();//阻止事件向上传播
}
- 0赞 · 0采集
-
- qq_借个背包就出发_03588511 2018-05-23
DOM的事件对象
type属性 用于获取事件类型
target属性 用于获取事件目标
stopPropagation()方法 用于阻止事件冒泡
preventDefault()方法 阻止事件的默认行为
- 0赞 · 0采集
-
- qq_借个背包就出发_03588511 2018-05-23
stopPropagation阻止冒泡
- 0赞 · 0采集
-
- AtlantisKing 2018-05-18
三、事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象event
1、DOM中的事件对象
（1）、type属性 用于获取事件类型
（2）、target属性 用于获取事件目标
（3）、stopPropagation（）方法 用于阻止事件冒泡
（4）、preventDefault（）方法 阻止事件的默认行为
- 0赞 · 0采集
-
- qq_善水_0 2018-05-11
事件对象中比较重要的四点
-
截图0赞 · 0采集
-
- 前端大郎 2018-05-04
事件对象event：在触发DOM上的事件时都会产生一个对象笔记
DOM的事件对象
type属性 用于获取事件类型
target属性 用于获取事件目标
stopPropagation()方法 用于阻止事件冒泡
preventDefault()方法 阻止事件的默认行为
- 0赞 · 0采集
