1.元素绑定事件(DOM0级):
案例: 11-绑定事件(DOM 0级)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绑定事件</title>
</head>
<body>
<p onclick="alert('123')">点击事件</p>
<input type="button" value="点击我" onclick="alert('点就对了')">
</body>
</html>案例: 12-JS代码实现绑定事件(DOM 0级)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS代码实现绑定事件</title>
</head>
<body>
<div id="tm">
内容
</div>
<script>
//第一步:拿到要绑事件的div
var d = document.querySelector('#tm'); //id选择器
d.onclick = function(){
//在事件的响应方法中this指向当前事件源对象
alert(this.innerHTML);
}
// 局限性:这种绑定事件的方式,只能绑定一个方法.后面的事件会覆盖前面的事件
d.onclick = function(){
console.log(1);
}
</script>
</body>
</html>案例: 13-ul中li标签点击显示内容案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> ul中li标签点击显示内容案例</title>
</head>
<body>
<ul id="cityList">
<li>北京1</li>
<li>北京2</li>
<li>北京3</li>
<li>北京4</li>
<li>北京5</li>
</ul>
<script>
// 给所有的li标签绑定点击事件,并弹出li标签的内容
//第一步:先得到素有的li标签
var liNodeList = document.querySelectorAll('#cityList li');
// liNodeList.forEach(function(element, index){
// //绑定点击事件
// element.onclick = function(){
// alert(this.innerHTML);
// };
// //因为:li标签的事件响应方法都是一样的,没有必要每循环一次都创建一个
// // 事件响应函数的对象.
// });
liNodeList.forEach(function(element, index){
//之间将元素的事件响应方法指向一个声明的函数
///优化,减少了内存消耗,多个li公用一个函数对象
element.onclick = liOnClickHander;
});
//Li标签点击时触发执行的事件响应方法
function liOnClickHander(){
alert(this.innerHTML);
}
</script>
</body>
</html>事件流:
事件分为捕获阶段和冒泡阶段。捕 获阶段就是事件信息从顶层 向下层 传递的过程，而冒泡是事件反应处 理从底层向上层反馈的过程，例如 ：一个公司的文件和法规从上层一 直向下层进行传达，而反应是从底 层一层层的向上反馈。 • Js可以通过addEventListener来实 现捕获阶段或者冒泡阶段的事件响 应方法注册。 • 直接对Dom对象上设置的事件属性 和标签中直接编写标签属性的方式 都是在冒泡阶段执行。IE9之后才支 持了事件捕获，之前版本只支持冒泡.
绑定事件(DOM2级)
案例:14-事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件流</title>
<style>
div {
border: 1px solid #ccc;
}
.parent {
height: 200px;
width: 200px;
padding: 30px;
background-color: maroon;
}
.child {
width: 100px;
height: 100px;
background-color: #9900cc;
}
</style>
</head>
<body>
<div class="parent">
我是父DIV标签
<div class="child">
我是子DIV标签
</div>
</div>
<script>
// 14-事件流
// 点击了子元素标签的时候,父元素的绑定的点击事件也会被执行.原因:事件冒泡
// 给父元素绑定一个点击事件,点击子元素,看看是否事件影响方法(事件处理程序)执行
var parentDiv = document.querySelector('.parent');
parentDiv.onclick = function(){
alert('父DIV被点击了');
}
window.onclick = function(){
alert('Window 点击事件执行')
}
</script>
</body>
</html>案例:15-addEventListener案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加事件的第二种绑定方式</title>
<style>
div {
border: 1px solid #ccc;
background-color: #c0d;
}
.parent {
width: 200px;
height: 200px;
padding: 30px;
}
.child {
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
</head>
<body>
<input id="btn" type="button" value="点击我" />
<div class="parent">
父DIV
<div class="child">
子DIV
</div>
</div>
<script>
//拿到按钮的Dom元素对象
var btn = document.querySelector('#btn');
// 第一种:DOM0级的绑定方式
// btn.onclick = function(){
// };
// 缺点: 1.不能绑定多个事件处理程序
// 2.只能在冒泡阶段执行事件响应程序
//第二种绑定事件的方式,传递三个参数,第一个参数是 事件类型字符串不带on
// 第二个参数是事件处理程序.第三个参数是是否在捕获解读那执行事件处理程序.
// btn.addEventListener('click', function () {
// alert('按钮被点击1');
// }, false);
// 给一个按钮的点击事件绑定了两个事件处理程序
// btn.addEventListener('click', function () {
// alert('按钮被点击了2');
// });
//DOM2绑定事件的方式,事件的执行顺序是注册的事件处理程序顺序.
//控制在捕获阶段执行事件响应程序
var parentDiv = document.querySelector('.parent');
var childDiv = document.querySelector('.child');
//捕获阶段执行事件处理程序
// parentDiv.addEventListener('click',function(){
// alert('父DIV');
// }, true);
// childDiv.addEventListener('click', function(){
// alert('子DIV');
// },true);
//冒泡阶段执行事件处理程序
parentDiv.addEventListener('click',function(){
alert('父DIV');
}, false);
childDiv.addEventListener('click', function(){
alert('子DIV');
}, false);
</script>
</body>
</html>案例:16-五角星点击案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例</title>
<style>
span {
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wjx-wrap">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<script>
//拿到所有五角星的span的NodeList集合
var wjxList = document.querySelectorAll('.wjx-wrap span');
// 给所有的五角星设置绑定点击事件
// wjxList.forEach(function (element, index) {
// element.addEventListener('click', function () {
// //把所有的五角星设置为空心五角星
// wjxList.forEach(function (wjx, index) {
// wjx.innerHTML = '☆';
// });
// // 把自己设置成实心五角星
// element.innerHTML = '★';
// });
// });
// 循环注册事件的时候,一定要注意内存消耗的问题
wjxList.forEach(function(element, index) {
element.addEventListener('click', wjxClickHandler);
});
//五角星点击事件的处理程序
function wjxClickHandler() {
//把所有的五角星设置为空心五角星
wjxList.forEach(function (wjx, index) {
wjx.innerHTML = '☆';
});
// 把自己设置成实心五角星
// element.innerHTML = '★';
//在事件处理函数的作用域中,this就指向当前注册事件的标签元素.
this.innerHTML = '★';
}
</script>
</body>
</html>
案例:17-自动添加li标签的效果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动添加li标签效果</title>
</head>
<body>
<input type="button" value="添加LI标签" id="btnAdd"/>
<ul class="list"></ul>
<script>
// 要求:实现动态添加Li标签的效果,要求Li的内部文本从1开始,按钮每点击一次,自动添加一个li
// 第一步:拿到btn按钮
var btnAdd = document.querySelector('#btnAdd'); //IE8开始支持
var index = 1;
btnAdd.addEventListener('click',function(){
// 拿到ul标签
var list = document.querySelector('.list');
list.innerHTML += "<li>" + index + "</li>";
index ++;
}); //ie8都不支持
</script>
</body>
</html>
解除事件绑定(DOM2级)
IE8的事件绑定和解绑
跨浏览器兼容绑定事件
事件响应方法的执行顺序
案例:18-解除事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>解除事件绑定</title>
</head>
<body>
<input type="button" value="点击按钮" id="btnClick">
<input type="button" value="解除绑定事件" id="btnRemove">
<input type="button" value="按钮3" id="btn3">
<script>
var btnClick = document.querySelector('#btnClick');
var btnRemove = document.querySelector('#btnRemove');
//DOM0绑定事件
btnClick.onclick = function(){
alert('DOM0 级点击事件');
}
//DOM2级绑定事件
btnRemove.addEventListener('click',function(){
//给btnClick按钮的DOM0级事件解绑
btnClick.onclick = null;
//给btnClick按钮解绑DOM2级别的事件
btnClick.removeEventListener('click', btnClickHandler);
});
//DOM2级事件绑定和解绑
btnClick.addEventListener('click', btnClickHandler);
//事件处理程序
function btnClickHandler(){
alert('DOM2级的绑定事件');
}
// 要想实现解绑,必须要把事件处理程序独立出来,以下处理程序不成立
// var btn3 = document.querySelector('#btn3');
// btn3.addEventListener('click', function(){
// alert('3');
// });
// btn3.removeEventListener('click', function(){
// alert('3');
// });
</script>
</body>
</html>案例:19-ie事件绑定程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IE的事件绑定程序</title>
</head>
<body>
<input type="button" value="点击" id="btn" />
<input type="button" value="解绑" id="btnDetach" />
<script>
//获取按钮btn
var btn = document.getElementById('btn'); //兼容性非常好
var btnDetach = document.getElementById('btnDetach');
// 给ie浏览器绑定点击事件
btn.attachEvent('onclick', k);
btnDetach.attachEvent('onclick', function(){
//对ie浏览器进行解绑事件.
btn.detachEvent('onclick', k);
});
// 事件处理程序
function k(){
alert('ok');
}
</script>
</body>
</html>案例:20-事件绑定兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件绑定兼容处理</title>
</head>
<body>
<input type="button" value="点击" id="btn" />
<script>
//兼容ie和其他浏览器
var btn = document.querySelector('#btn');
// 所有的浏览器都兼容, DOM0的注册绑定事件方式.
// btn.onclick = function(){
// alert('ok');
// };
//兼容ie浏览器和其他浏览器的兼容处理方法
if (btn.addEventListener) {
btn.addEventListener('click', clickHandler)
} else {
btn.attachEvent('onclick', clickHandler)
}
function clickHandler() {
alert('兼容处理');
}
</script>
</body>
</html>案例:21-事件注册的执行顺序
<!DOCTYPE html>
<html lang="en">
<!--
设置标签的事件属性或者直接给元素设置事件属性的IE会优先执行(DOM0);
addEventListener的事件响应方法执行顺序跟注册顺序一致.(DOM2);
attachEvent注册的事件响应方法的执行顺序不确定,执行过程不能依赖它的注册顺序.
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件注册的执行顺序</title>
</head>
<body>
<input type="button" value="点击" id="btn" />
<script>
var btn = document.getElementById('btn');
// DOM 0的绑定实际那响应方式
btn.onclick = function () {
alert('DOM - 0级');
}
//DOM2 的绑定事件的方式
if (btn.addEventListener) {
btn.addEventListener('click', function () {
alert('DOM -2 -1');
});
btn.addEventListener('click', function () {
alert('DOM -2 -2');
});
btn.addEventListener('click', function () {
alert('DOM -2 -3');
});
} else {
btn.attachEvent('onclick', function () {
alert('DOM ie-2 - 1');
});
btn.attachEvent('onclick', function () {
alert('DOM ie-2 - 2');
});
btn.attachEvent('onclick', function () {
alert('DOM ie-2 - 3');
});
}
</script>
</body>
</html>源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
上一篇: JS - DOM和BOM的概念 - 01
下一篇: JS - 事件对象 - 03