JavaScript HTML DOM EventListener
addEventListener() 方法
实例
当用户点击按钮时触发监听事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn_green" class="class_btn class_btn_green" type="button" >点我试试</button>
<script type="text/javascript">
var btnNode = document.getElementById("id_btn_green");
// 注册事件监听器
// 参数一: 事件名,去掉前缀on
// 事件handler的函数名
btnNode.addEventListener("click",btnClicked);
// 实现 事件处理函数
function btnClicked (mouseEvent) {
NSLog('mouseEvent: ' + mouseEvent);
NSLog('btnNode: ' + this);
NSLog('当前时间: ' + new Date());
}
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>addEventListener('click',showFunction);添加绑定事件<br/>
参数1: 事件名,去掉on! 参数2: 事件处理函数名
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
addEventListener() 方法用于向指定元素添加 事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,
可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法
element
.addEventListener(
event, function, useCapture
);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数 useCapture,是个布尔值,用于描述事件是冒泡还是捕获。默认的false是冒泡,该参数是可选的。
| 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 |
---|
向元素添加事件句柄
核心代码:
当用户点击元素时弹出 "Hello World!" :
element.addEventListener("click", function(){ alert("Hello World!"); });
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>
<body>
<h1 id="id_h1" style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn" class="class_btn class_btn_green" type="button" >点我试试</button>
<script type="text/javascript">
var btnNode = document.getElementById("id_btn");
// 注册事件监听器
// 参数一: 事件名,去掉前缀on
// 事件handler的匿名函数
btnNode.addEventListener("click",function (mouseEvent) {
NSLog('mouseEvent: ' + mouseEvent);
NSLog('btnNode: ' + this);
NSLog('当前时间: ' + new Date());
});
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>addEventListener('click',showFunction);添加绑定事件<br/>
参数1: 事件名,去掉on! 参数2: 事件处理函数(匿名)
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
你可以使用一个函数名,来引用外部函数:
实例
当用户点击元素时弹出 "Hello World!" :
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
注意:先添加的事件处理程序 先执行
代码如下:
<script type="text/javascript">
var btnNode = document.getElementById("id_btn");
// 注册同一事件的多个监听器
// 参数一: 事件名,去掉前缀on
// 事件handler的匿名函数
btnNode.addEventListener("click",function (mouseEvent) {
NSLog('mouseEvent: ' + mouseEvent);
NSLog('btnNode: ' + this);
NSLog('当前时间: ' + new Date().getTime());
});
btnNode.addEventListener("click",function (mouseEvent) {
NSLog('mouseEvent2: ' + mouseEvent);
NSLog('btnNode2: ' + this);
NSLog('当前时间2: ' + new Date().getTime());
});
</script>
效果如下:
核心代码:
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
你可以向同个元素添加不同类型的事件:
核心代码:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
向 Window 对象添加事件句柄
addEventListener() 方法允许你在所有的 HTML DOM 对象添加事件监听,
HTML DOM 对象从小到大 如: HTML 元素, HTML 文档, window 对象。
或者其他支出的事件对象如: xmlHttpRequest 对象。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<h1 id="id_h1" style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<p class="sgcenter" id="id_p_result"></p>
<script type="text/javascript">
var pResultNode = document.getElementById("id_p_result");
// 给window添加事件处理函数
window.addEventListener("resize",function (event) {
var br = "<br/>";
// 参数是传递进来的事件
var eventStr = "event: " + event;
// 事件作用的当前对象是window 也就是this
var windowStr = "currentTarget: " + event.currentTarget;
// 实时打印window的宽和高
var windowInnerWidth = 'innerWidth: ' + event.currentTarget.innerWidth;
var windowInnerHeight = 'innerHeight: ' + event.currentTarget.innerHeight;
pResultNode.innerHTML = eventStr + br + windowStr + br + windowInnerWidth + br + windowInnerHeight + br + Math.random();
})
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>addEventListener('click',showFunction);添加绑定事件<br/>
参数1: 事件名,去掉on! 参数2: 事件处理函数(匿名)
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
核心代码:
当用户重置窗口大小时添加事件监听:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML =
sometext;
});
代码如下:
传递参数 ???Excuse Me???
当传递参数值时,使用"匿名函数"内部调用 事先定义好的 带参数的函数:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>
<body>
<h1 id="id_h1" style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<button id="id_btn" class="class_btn class_btn_green" type="button" >点我试试</button>
<p class="sgcenter" id="id_p_result"></p>
<script type="text/javascript">
var a = 6;
var b = 7;
var btnNode = document.getElementById("id_btn");
// 绑定事件处理程序: 匿名函数内部 调用事先定义的带参数的函数
btnNode.addEventListener("click",function () {
// 调用事先定义的带参数的函数
var result = addFunction(a,b);
var pResultNode = document.getElementById("id_p_result");
pResultNode.innerHTML = 'a + b = ' + result;
});
// 事先定义的带参数的函数
function addFunction (a,b) {
return a + b;
}
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>addEventListener('click',showFunction);添加绑定事件<br/>
参数1: 事件名,去掉on! 参数2: 事件处理函数(匿名)
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
核心代码:
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获?
事件传递 只有两种方式:冒泡(默认的) 与 捕获。
事件传递 定义了元素事件 触发的顺序。
如果你在<div> 元素中 插入一个<p> 元素,
那么,当用户点击 <p> 元素时, 你想让哪个元素的 "click" 事件先被触发呢?
第1种情况:在冒泡中,内部子元素的事件会先被触发,然后才是触发 外部父元素,
即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
第2种情况:在捕获中,外部父元素的事件会先被触发,然后才会触发内部子元素的事件,
即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
addEventListener(
event,
function,
useCapture);
useCapture默认值为 false, 即不捕获,使用冒泡传递,即内部子元素先触发事件,
当useCapture值为 true 时, 事件使用捕获传递,即外部父元素先触发事件。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div {
background-color: rgba(13,108,107,0.5);
border:1px solid pink;
padding: 5px;
color: white;
cursor: pointer;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>
<body>
<h1 id="id_h1" style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div_bubble">
<p style="background:coral;" class="sgcenter" id="id_p_bubble">参数3,默认false(不捕获),冒泡,『子』元素先触发</p>
</div>
<script type="text/javascript">
// 使用默认的bubble
var divBubbleNode = document.getElementById("id_div_bubble");
var pBubbleNode = document.getElementById("id_p_bubble");
divBubbleNode.addEventListener('click',function () {
this.style.background = "black";
NSLog("冒泡:默认false,『父』元素『后』触发: " + this);
NSLog("---------------------------");
},false);
pBubbleNode.addEventListener('click',function () {
this.style.background = "pink";
this.style.color = "black";
NSLog("冒泡:默认false,『子』元素『先』触发: " + this);
},false);
</script>
<div id="id_div_capture">
<p style="background:black;" class="sgcenter" id="id_p_capture">当参数3,设置true时,捕获,「父」元素先触发</p>
</div>
<script type="text/javascript">
// 强制使用capture
var divCaptureNode = document.getElementById("id_div_capture");
var pCaptureNode = document.getElementById("id_p_capture");
divCaptureNode.addEventListener('click',function () {
this.style.background = "pink";
NSLog("捕获:true,「父」元素「先」触发: " + this);
},true);
pCaptureNode.addEventListener('click',function () {
this.style.background = "coral";
NSLog("捕获:true,「子」元素「后」触发: " + this);
},true);
</script>
<script type="text/javascript">
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>addEventListener('click',showFunction);添加绑定事件<br/>
参数1: 事件名,去掉on! 参数2: 事件处理函数(匿名)<br/>
参数3: 默认false,不捕获,冒泡,『子』元素先触发<br/>
参数3: true,捕获,「父」元素先触发
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
核心代码: true 即 强制捕获,父元素先触发事件
document.getElementById("myDiv").addEventListener("click", myFunction,
true
);
提示:DOM事件流同时支持2种事件模型:默认的冒泡型事件 和 捕获型事件,
捕获型事件首先发生。
捕获型事件和冒泡型事件会触及DOM中的所有对象,
从document对象开始,也在document对象结束。
removeEventListener() 方法
removeEventListener() 方法 将 移除 由 addEventListener() 方法添加的 事件句柄:
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head>
<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="author" content="beyond">
<meta http-equiv="refresh" content="520">
<meta name="description" content="免费零基础教程">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
<title>beyondの心中の动漫神作</title>
<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
<script type="text/javascript" src="nslog.js"></script>
<!--[if lt IE 9]>
<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
body{
font-size: 100%;
/*声明margin和padding是个好习惯*/
margin: 0;
padding: 0;
background-image: url("sakura4.png");
background-repeat: no-repeat;
background-position: center center;
}
div {
background-color: rgba(13,109,108,0.5);
color: white;
padding: 20px;
border:1px solid;
}
</style>
<!-- 绿色按钮的css效果 -->
<link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">
</head>
<body>
<h1 id="id_h1" style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未闻花名
</h1>
<div id="id_div">
div添加了onmousemove事件句柄,鼠标在内部移动时,显示随机数
<button οnclick="btnClicked()">移除事件句柄</button>
</div>
<p id="id_p_result"></p>
<script type="text/javascript">
var divNode = document.getElementById("id_div");
divNode.addEventListener("mousemove",divOnMouseOver);
function divOnMouseOver (event) {
var pResultNode = document.getElementById("id_p_result");
pResultNode.innerHTML = Math.random();
}
function btnClicked(){
divNode.removeEventListener('mousemove',divOnMouseOver);
}
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>removeEventListener('事件名',函数名);
</p>
<footer id="copyright">
<p style="font-size:14px;text-align:center;font-style:italic;">
Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>
</p>
</footer>
</div>
</body>
</html>
效果如下:
核心代码:
element
.removeEventListener("mouse
move
", myFunction);
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
方法 | Chrome | IE | Firefox | Safari | Opera |
---|
addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:(event 要带on前缀的喔~)
element.attachEvent(event, function);
element.detachEvent(event, function);
核心代码:
跨浏览器解决方法:
var btnNode = document.getElementById("id_btn");
if (btnNode.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本
btnNode.addEventListener("click", myFunction);
} else if (btnNode.
attachEvent
) { // IE 8 及更早版本
btnNode.
attachEvent
("onclick", myFunction);
}